@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">Idle Screen</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Idle Screen</h1>
            <!-- end page-header -->

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('idle_screen.create') }}" class="btn btn-custom">
                            <i class="fa fa-plus"></i> Add Idle Screen
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="idle-screen-table" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Media Type</th>
                                <th>Media</th>
                                <th>Active</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($idleScreens as $idleScreen)
                                <tr>
                                    <td>{{ $idleScreen->id }}</td>
                                    <td>{{ $idleScreen->title }}</td>
                                    <td>{{ ucfirst($idleScreen->media_type) }}</td>
                                    <td>
                                        @if ($idleScreen->media_type == 'image')
                                            <a href="#" class="btn btn-custom view-images" data-media-type="image"
                                                data-images="{{ json_encode(
                                                    $idleScreen->images->map(function ($image, $index) {
                                                        return [
                                                            'id' => $image->id,
                                                            'url' => asset('storage/' . $image->data_url),
                                                            'name' => 'Image ' . ($index + 1),
                                                        ];
                                                    }),
                                                ) }}">
                                                View Images ({{ $idleScreen->images->count() }})
                                            </a>
                                        @else
                                            <a href="#" class="btn btn-custom view-media" data-media-type="video"
                                                data-media-url="{{ asset('storage/' . $idleScreen->data_url) }}">
                                                View Video
                                            </a>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="switcher">
                                            <input type="checkbox" name="active_idle_screen_{{ $idleScreen->id }}"
                                                id="active_idle_screen_{{ $idleScreen->id }}"
                                                class="active-idle-screen-switcher" data-id="{{ $idleScreen->id }}"
                                                {{ $idleScreen->is_active ? 'checked' : '' }} value="1">
                                            <label for="active_idle_screen_{{ $idleScreen->id }}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="{{ route('idle_screen.edit', $idleScreen->id) }}" class="btn btn-custom">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <form id="delete-idle-screen-{{ $idleScreen->id }}"
                                            action="{{ route('idle_screen.destroy', $idleScreen->id) }}" method="POST"
                                            style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-custom delete-btn"
                                                data-form-id="delete-idle-screen-{{ $idleScreen->id }}">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- Modal for media preview -->
        <div class="modal fade" id="mediaModal" tabindex="-1" role="dialog" aria-labelledby="mediaModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="mediaModalLabel">Media Preview</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="mediaContent">
                        <!-- Media will be inserted here -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-custom" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal for image carousel -->
        <div class="modal fade" id="imageCarouselModal" tabindex="-1" role="dialog"
            aria-labelledby="imageCarouselModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="imageCarouselModalLabel">Images</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-0">
                        <div id="imageCarousel" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner" id="carouselContent">
                                <!-- Carousel items will be inserted here -->
                            </div>
                            <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                            <ol class="carousel-indicators" id="carouselIndicators">
                                <!-- Indicators will be inserted here -->
                            </ol>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-custom" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>

    <style>
        /* Carousel controls positioning - vertically centered */
        #imageCarousel .carousel-control-prev,
        #imageCarousel .carousel-control-next {
            top: 50%;
            transform: translateY(-50%);
            height: 60px;
            width: 5%;
            opacity: 0.8;
        }

        /* Custom carousel arrow styling */
        #imageCarousel .carousel-control-prev-icon,
        #imageCarousel .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background-image: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Font Awesome arrows */
        #imageCarousel .carousel-control-prev-icon::after {
            content: "\f104";
            /* Font Awesome left arrow */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: white;
            font-size: 20px;
        }

        #imageCarousel .carousel-control-next-icon::after {
            content: "\f105";
            /* Font Awesome right arrow */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: white;
            font-size: 20px;
        }

        /* Fallback arrows for systems without Font Awesome */
        #imageCarousel .carousel-control-prev-icon::before {
            color: white;
            font-size: 24px;
            font-weight: bold;
            font-family: Arial, sans-serif;
        }

        #imageCarousel .carousel-control-next-icon::before {
            color: white;
            font-size: 24px;
            font-weight: bold;
            font-family: Arial, sans-serif;
        }

        /* Hover effects */
        #imageCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
        #imageCarousel .carousel-control-next:hover .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.9);
            transform: scale(1.1);
            transition: all 0.3s ease;
        }

        #imageCarousel .carousel-control-prev:hover,
        #imageCarousel .carousel-control-next:hover {
            opacity: 1;
        }

        /* Carousel indicators styling */
        #imageCarousel .carousel-indicators {
            bottom: 15px;
        }

        #imageCarousel .carousel-indicators li {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.8);
        }

        #imageCarousel .carousel-indicators li.active {
            background-color: white;
        }
    </style>

    <script>
        class IdleScreenManager {
            constructor() {
                this.currentActiveIdleScreen = null;
                this.init();
            }

            init() {
                this.initializeDataTable();
                this.attachEventListeners();
                this.setInitialActiveState();
            }

            initializeDataTable() {
                $('#idle-screen-table').DataTable({
                    responsive: true,
                    columnDefs: [{
                        orderable: false,
                        targets: [3, 4, 5] // Media, Active, Actions columns
                    }],
                    order: [
                        [0, 'desc']
                    ]
                });
            }

            attachEventListeners() {
                this.attachMediaPreviewHandlers();
                this.attachImageCarouselHandlers();
                this.attachIdleScreenSwitcherHandlers();
                this.attachDeleteHandlers();
            }

            setInitialActiveState() {
                // Find and store the currently active idle screen
                const activeSwitch = document.querySelector('.active-idle-screen-switcher:checked');
                if (activeSwitch) {
                    this.currentActiveIdleScreen = activeSwitch.dataset.id;
                }
            }

            attachMediaPreviewHandlers() {
                document.querySelectorAll('.view-media').forEach(button => {
                    button.addEventListener('click', (e) => {
                        e.preventDefault();
                        this.showMediaPreview(button);
                    });
                });
            }

            attachImageCarouselHandlers() {
                document.querySelectorAll('.view-images').forEach(button => {
                    button.addEventListener('click', (e) => {
                        e.preventDefault();
                        this.showImageCarousel(button);
                    });
                });
            }

            attachIdleScreenSwitcherHandlers() {
                document.querySelectorAll('.active-idle-screen-switcher').forEach(switcher => {
                    switcher.addEventListener('change', (e) => {
                        this.handleIdleScreenSwitch(switcher);
                    });
                });
            }

            showMediaPreview(button) {
                const mediaType = button.dataset.mediaType;
                const mediaUrl = button.dataset.mediaUrl;
                let mediaContent = '';

                if (mediaType === 'image') {
                    mediaContent = `<img src="${mediaUrl}" alt="Media" class="img-fluid" style="max-width: 100%;">`;
                } else if (mediaType === 'video') {
                    mediaContent = `
                        <video width="100%" controls>
                            <source src="${mediaUrl}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>`;
                }

                document.getElementById('mediaContent').innerHTML = mediaContent;
                $('#mediaModal').modal('show');
            }

            showImageCarousel(button) {
                try {
                    const images = JSON.parse(button.dataset.images);

                    if (!images || images.length === 0) {
                        this.showAlert('No images to display.', 'warning');
                        return;
                    }

                    this.buildCarousel(images);
                    $('#imageCarouselModal').modal('show');
                } catch (error) {
                    console.error('Error parsing images data:', error);
                    this.showAlert('Error loading images.', 'danger');
                }
            }

            buildCarousel(images) {
                const carouselContent = document.getElementById('carouselContent');
                const carouselIndicators = document.getElementById('carouselIndicators');

                // Clear existing content
                carouselContent.innerHTML = '';
                carouselIndicators.innerHTML = '';

                // Build carousel items and indicators
                images.forEach((image, index) => {
                    // Create carousel item
                    const carouselItem = document.createElement('div');
                    carouselItem.className = `carousel-item ${index === 0 ? 'active' : ''}`;
                    carouselItem.innerHTML = `
                        <div class="d-flex justify-content-center align-items-center" style="min-height: 400px; background-color: #f8f9fa;">
                            <img src="${image.url}" class="d-block img-fluid" alt="${image.name}" 
                                 style="max-height: 70vh; max-width: 100%; object-fit: contain;">
                        </div>
                        <div class="carousel-caption d-none d-md-block" style="background-color: rgba(0,0,0,0.7); border-radius: 5px;">
                            <h5>${image.name}</h5>
                        </div>
                    `;
                    carouselContent.appendChild(carouselItem);

                    // Create indicator
                    const indicator = document.createElement('li');
                    indicator.setAttribute('data-target', '#imageCarousel');
                    indicator.setAttribute('data-slide-to', index);
                    if (index === 0) {
                        indicator.className = 'active';
                    }
                    carouselIndicators.appendChild(indicator);
                });

                // Hide controls and indicators if only one image
                const prevControl = document.querySelector('.carousel-control-prev');
                const nextControl = document.querySelector('.carousel-control-next');

                if (images.length <= 1) {
                    prevControl.style.display = 'none';
                    nextControl.style.display = 'none';
                    carouselIndicators.style.display = 'none';
                } else {
                    prevControl.style.display = 'block';
                    nextControl.style.display = 'block';
                    carouselIndicators.style.display = 'flex';
                }
            }

            async handleIdleScreenSwitch(activeSwitcher) {
                const newActiveId = activeSwitcher.dataset.id;
                const isActive = activeSwitcher.checked;

                try {
                    // Uncheck all other idle screen switchers
                    this.updateOtherIdleScreenSwitchers(activeSwitcher);

                    // Update the server
                    const response = await fetch(
                        '{{ route('idle_screen.setActive', ':id') }}'.replace(':id', newActiveId), {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                is_active: isActive
                            })
                        }
                    );

                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }

                    const data = await response.json();

                    if (data.status === 'success') {
                        this.currentActiveIdleScreen = isActive ? newActiveId : null;
                        const successMessage = isActive ?
                            'Idle screen activated successfully.' :
                            'Idle screen deactivated successfully.';
                        this.showAlert(successMessage, 'success');
                    } else {
                        throw new Error(data.message || 'Failed to update status');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    this.showAlert('Failed to update idle screen status. Please try again.', 'danger');
                    this.revertIdleScreenSwitcherState(activeSwitcher);
                }
            }

            updateOtherIdleScreenSwitchers(activeSwitcher) {
                document.querySelectorAll('.active-idle-screen-switcher').forEach(switcher => {
                    if (switcher !== activeSwitcher) {
                        switcher.checked = false;
                    }
                });
            }

            revertIdleScreenSwitcherState(switcher) {
                switcher.checked = !switcher.checked;

                // Restore previous state
                if (this.currentActiveIdleScreen) {
                    const previousActiveSwitch = document.querySelector(
                        `.active-idle-screen-switcher[data-id="${this.currentActiveIdleScreen}"]`
                    );
                    if (previousActiveSwitch) {
                        previousActiveSwitch.checked = true;
                    }
                }
            }

            attachDeleteHandlers() {
                // Idle screen deletion handlers
                document.querySelectorAll('.delete-btn').forEach(button => {
                    button.addEventListener('click', (e) => {
                        e.preventDefault();
                        this.handleIdleScreenDeletion(button);
                    });
                });
            }

            handleIdleScreenDeletion(button) {
                const formId = button.dataset.formId;

                if (confirm('Are you sure you want to delete this idle screen?')) {
                    document.getElementById(formId).submit();
                }
            }

            showAlert(message, type) {
                // Remove existing alerts to prevent stacking
                const existingAlerts = document.querySelectorAll('.alert:not(.alert-static)');
                existingAlerts.forEach(alert => alert.remove());

                const alertHtml = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${this.escapeHtml(message)}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;

                document.querySelector('#content .page-header').insertAdjacentHTML('afterend', alertHtml);

                // Auto dismiss after 5 seconds
                setTimeout(() => {
                    const alert = document.querySelector('.alert:not(.alert-static)');
                    if (alert) {
                        $(alert).alert('close');
                    }
                }, 5000);
            }

            escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        }

        // Initialize the idle screen manager when DOM is ready
        document.addEventListener('DOMContentLoaded', () => {
            new IdleScreenManager();

            // Auto-dismiss session alerts after 5 seconds
            const sessionAlerts = document.querySelectorAll('.alert.alert-success, .alert.alert-danger');
            sessionAlerts.forEach(alert => {
                setTimeout(() => {
                    $(alert).alert('close');
                }, 3000);
            });
        });
    </script>
@endsection