@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">Restaurant</li>
            </ol>
            <!-- end breadcrumb -->

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

            <!-- Alert container for notifications -->
            <div id="alert-container" class="mb-3"></div>

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('restos.create') }}" class="btn btn-sm btn-custom">
                            <i class="fa fa-plus"></i> Add Restaurant
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Category</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Price</th>
                                <th>Mode</th>
                                <th>Content</th>
                                <th>QR Code</th>
                                <th>Hide</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($restos as $resto)
                                <tr>
                                    <td>{{ $resto->id }}</td>
                                    <td>{{ $resto->restoCategory->category ?? 'N/A' }}</td>
                                    <td>{{ $resto->title }}</td>
                                    <td>{{ Str::limit($resto->description, 50) }}</td>
                                    <td>Rp {{ number_format($resto->price, 0, ',', '.') }}</td>
                                    <td>
                                        <span
                                            class="badge badge-{{ ($resto->mode ?? 'image') === 'video' ? 'primary' : 'success' }}">
                                            <i
                                                class="fa fa-{{ ($resto->mode ?? 'image') === 'video' ? 'play' : 'image' }}"></i>
                                            {{ ucfirst($resto->mode ?? 'image') }}
                                        </span>
                                    </td>
                                    <td>
                                        @if (($resto->mode ?? 'image') === 'video')
                                            @if ($resto->video_url)
                                                <div class="video-content">
                                                    <img src="{{ $resto->youtube_thumbnail }}" alt="Video Thumbnail"
                                                        class="img-thumbnail"
                                                        style="width: 120px; height: 68px; object-fit: cover; cursor: pointer;"
                                                        onclick="openVideoModal('{{ $resto->youtube_embed_url }}', '{{ addslashes($resto->title) }}')">
                                                    <div class="mt-1">
                                                        <small class="text-muted">
                                                            <i class="fa fa-youtube-play text-danger"></i>
                                                            YouTube Video
                                                        </small>
                                                    </div>
                                                </div>
                                            @else
                                                <span class="text-muted">No Video</span>
                                            @endif
                                        @else
                                            <div class="image-gallery">
                                                @php
                                                    $images = array_filter([
                                                        $resto->image,
                                                        $resto->image_2,
                                                        $resto->image_3,
                                                        $resto->image_4,
                                                    ]);
                                                @endphp

                                                @if (!empty($images))
                                                    <div class="row">
                                                        @foreach ($images as $index => $image)
                                                            <div class="col-6 mb-1">
                                                                <img src="{{ asset('storage/resto_images/' . $image) }}"
                                                                    alt="{{ $resto->title }}" class="img-thumbnail"
                                                                    style="width: 60px; height: 60px; object-fit: cover; cursor: pointer;"
                                                                    onclick="openImageModal('{{ asset('storage/resto_images/' . $image) }}', '{{ addslashes($resto->title) }}')">
                                                            </div>
                                                            @if ($index >= 3)
                                                                @break
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                    @if (count($images) > 4)
                                                        <small class="text-muted">+{{ count($images) - 4 }} more</small>
                                                    @endif
                                                @else
                                                    <span class="text-muted">No Images</span>
                                                @endif
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($resto->qr_img && $resto->qr_url)
                                            <div class="qr-display">
                                                <img src="{{ $resto->getQrCodeUrl() }}" alt="QR Code" class="qr-thumbnail"
                                                    data-toggle="modal" data-target="#qrModal"
                                                    data-qr-src="{{ $resto->getQrCodeUrl() }}"
                                                    data-qr-url="{{ $resto->qr_url }}"
                                                    data-resto-title="{{ $resto->title }}">
                                                <div class="qr-info">
                                                    <small class="text-muted d-block">
                                                        <i class="fa fa-qrcode"></i> Available
                                                    </small>
                                                    <small class="text-muted">
                                                        <a href="{{ $resto->qr_url }}" target="_blank" class="qr-url-link">
                                                            {{ Str::limit($resto->qr_url, 20) }}
                                                        </a>
                                                    </small>
                                                </div>
                                            </div>
                                        @else
                                            <div class="no-qr">
                                                <small class="text-muted">
                                                    <i class="fa fa-minus-circle"></i> No QR Code
                                                </small>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input"
                                                id="customSwitch{{ $resto->id }}" {{ $resto->hide ? 'checked' : '' }}
                                                onchange="toggleHide({{ $resto->id }}, this.checked)">
                                            <label class="custom-control-label"
                                                for="customSwitch{{ $resto->id }}"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('restos.show', $resto->id) }}" class="btn btn-sm btn-custom"
                                                title="View">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <a href="{{ route('restos.edit', $resto->id) }}" class="btn btn-sm btn-custom"
                                                title="Edit">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <button class="btn btn-sm btn-custom" title="Delete"
                                                onclick="confirmDelete({{ $resto->id }})">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                        <form id="delete-form-{{ $resto->id }}"
                                            action="{{ route('restos.destroy', $resto->id) }}" method="POST"
                                            style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- 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>

    <!-- Image Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image 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 text-center p-0">
                    <div class="image-modal-container">
                        <img id="modalImage" src="" alt="" class="modal-image">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Modal -->
    <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="videoModalLabel">Video 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">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe id="modalVideo" class="embed-responsive-item" src="" frameborder="0"
                            allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- QR Code Modal -->
    <div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="qrModalLabel">QR Code - <span id="modalRestoTitle"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <div class="qr-modal-content">
                        <img id="modalQrImage" src="" alt="QR Code" class="qr-modal-image">
                        <div class="qr-modal-details mt-3">
                            <h6>Scan or visit:</h6>
                            <a id="modalQrUrl" href="" target="_blank" class="qr-modal-url"></a>
                            <div class="qr-actions mt-3">
                                <a id="downloadQrBtn" href="" download class="btn btn-custom btn-sm">
                                    <i class="fa fa-download"></i> Download QR Code
                                </a>
                                <a id="visitUrlBtn" href="" target="_blank"
                                    class="btn btn-outline-secondary btn-sm">
                                    <i class="fa fa-external-link"></i> Visit URL
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Custom styles for notifications */
        #alert-container {
            position: relative;
            z-index: 1040;
        }

        .custom-control-input:disabled~.custom-control-label {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Fixed Image Modal Styles */
        .modal-image {
            max-height: 70vh;
            width: auto;
            object-fit: contain;
        }

        /* QR Code Styles */
        .qr-display {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .qr-thumbnail {
            width: 40px;
            height: 40px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            background-color: white;
            padding: 2px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .qr-thumbnail:hover {
            transform: scale(1.1);
            border-color: #007bff;
        }

        .qr-info {
            flex: 1;
        }

        .qr-url-link {
            color: #007bff;
            text-decoration: none;
            font-size: 0.75rem;
        }

        .qr-url-link:hover {
            text-decoration: underline;
        }

        .no-qr {
            text-align: center;
            padding: 1rem 0.5rem;
        }

        /* QR Modal Styles */
        .qr-modal-image {
            max-width: 250px;
            height: auto;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            background-color: white;
            padding: 10px;
        }

        .qr-modal-url {
            color: #007bff;
            text-decoration: none;
            word-break: break-all;
            font-weight: 500;
        }

        .qr-modal-url:hover {
            text-decoration: underline;
        }

        .qr-actions {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Improved modal styles */
        .modal-content {
            border-radius: 0.5rem;
        }

        .modal-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }

        /* Loading state for switches */
        .custom-control-input:disabled {
            opacity: 0.6;
        }

        /* Responsive image gallery */
        .image-gallery .row {
            margin: 0;
        }

        .image-gallery .col-6 {
            padding: 0 2px;
        }

        /* Image Modal Container */
        .image-modal-container {
            width: 100%;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
            overflow: hidden;
        }

        /* Fixed Image Modal Styles */
        .modal-image {
            max-width: 100%;
            max-height: 500px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }

        @media (max-width: 768px) {
            .btn-group .btn {
                padding: 0.25rem 0.5rem;
                font-size: 0.875rem;
            }

            .image-gallery img {
                width: 45px !important;
                height: 45px !important;
            }

            .qr-display {
                flex-direction: column;
                gap: 0.25rem;
            }

            .qr-thumbnail {
                width: 30px;
                height: 30px;
            }

            .qr-actions {
                flex-direction: column;
                gap: 0.25rem;
            }

            .qr-modal-image {
                max-width: 200px;
            }

            .image-modal-container {
                height: 350px;
            }

            .modal-image {
                max-height: 350px;
            }
        }

        @media (max-width: 576px) {
            .image-modal-container {
                height: 280px;
            }

            .modal-image {
                max-height: 280px;
            }
        }
    </style>

    <script>
        // Global variable to track DataTable instance
        let restoDataTable = null;

        /**
         * Show notification using Bootstrap alerts instead of toastr
         */
        function showNotification(message, type = 'success', duration = 5000) {
            const alertContainer = document.getElementById('alert-container');
            if (!alertContainer) {
                console.warn('Alert container not found');
                return;
            }

            const alertId = 'alert-' + Date.now();

            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" id="${alertId}" role="alert">
                    <strong>${type === 'success' ? 'Success!' : type === 'danger' ? 'Error!' : 'Info!'}</strong> ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            alertContainer.insertAdjacentHTML('beforeend', alertHtml);

            // Auto-dismiss after duration
            if (duration > 0) {
                setTimeout(() => {
                    const alertElement = document.getElementById(alertId);
                    if (alertElement) {
                        alertElement.classList.remove('show');
                        setTimeout(() => alertElement.remove(), 150);
                    }
                }, duration);
            }
        }

        /**
         * Toggle hide status for restaurant item
         */
        function toggleHide(id, checked) {
            const hide = checked ? 1 : 0;
            const switchElement = document.getElementById('customSwitch' + id);

            // Disable the switch during request
            switchElement.disabled = true;

            fetch('{{ route('restos.toggleHide', ':id') }}'.replace(':id', id), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                            '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        hide: hide
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    showNotification(data.message || 'Hide status updated successfully.', 'success');
                })
                .catch(error => {
                    console.error('Error updating hide status:', error);
                    showNotification('Error updating hide status. Please try again.', 'danger');

                    // Revert the checkbox state
                    switchElement.checked = !checked;
                })
                .finally(() => {
                    // Re-enable the switch
                    switchElement.disabled = false;
                });
        }

        /**
         * Confirm delete action with proper security
         */
        function confirmDelete(id) {
            const confirmed = confirm(
                'Are you sure you want to delete this restaurant item? This action cannot be undone.');

            if (confirmed) {
                const deleteForm = document.getElementById('delete-form-' + id);
                if (deleteForm) {
                    deleteForm.submit();
                } else {
                    showNotification('Delete form not found. Please refresh the page and try again.', 'danger');
                }
            }
        }

        /**
         * Open image modal with security measures
         */
        function openImageModal(imageSrc, title) {
            // Sanitize title to prevent XSS
            const sanitizedTitle = title.replace(/[<>&'"]/g, function(char) {
                const entityMap = {
                    '<': '&lt;',
                    '>': '&gt;',
                    '&': '&amp;',
                    "'": '&#39;',
                    '"': '&quot;'
                };
                return entityMap[char];
            });

            const modalImage = document.getElementById('modalImage');
            const modalLabel = document.getElementById('imageModalLabel');

            if (modalImage && modalLabel) {
                modalImage.src = imageSrc;
                modalImage.alt = sanitizedTitle;
                modalLabel.textContent = sanitizedTitle;

                // Show modal using Bootstrap 4 method
                if (typeof $ !== 'undefined') {
                    $('#imageModal').modal('show');
                } else {
                    // Fallback for vanilla JS
                    const modal = document.getElementById('imageModal');
                    modal.classList.add('show');
                    modal.style.display = 'block';
                }
            }
        }

        /**
         * Open video modal with security measures
         */
        function openVideoModal(embedUrl, title) {
            // Sanitize title to prevent XSS
            const sanitizedTitle = title.replace(/[<>&'"]/g, function(char) {
                const entityMap = {
                    '<': '&lt;',
                    '>': '&gt;',
                    '&': '&amp;',
                    "'": '&#39;',
                    '"': '&quot;'
                };
                return entityMap[char];
            });

            const modalVideo = document.getElementById('modalVideo');
            const modalLabel = document.getElementById('videoModalLabel');

            if (modalVideo && modalLabel) {
                modalVideo.src = embedUrl;
                modalLabel.textContent = sanitizedTitle;

                // Show modal using Bootstrap 4 method
                if (typeof $ !== 'undefined') {
                    $('#videoModal').modal('show');
                } else {
                    // Fallback for vanilla JS
                    const modal = document.getElementById('videoModal');
                    modal.classList.add('show');
                    modal.style.display = 'block';
                }
            }
        }

        /**
         * Initialize page functionality
         */
        document.addEventListener('DOMContentLoaded', function() {
            // QR Modal functionality
            const qrModal = document.getElementById('qrModal');
            const modalQrImage = document.getElementById('modalQrImage');
            const modalQrUrl = document.getElementById('modalQrUrl');
            const modalRestoTitle = document.getElementById('modalRestoTitle');
            const downloadQrBtn = document.getElementById('downloadQrBtn');
            const visitUrlBtn = document.getElementById('visitUrlBtn');

            // Handle QR thumbnail clicks
            document.querySelectorAll('.qr-thumbnail').forEach(thumbnail => {
                thumbnail.addEventListener('click', function() {
                    const qrSrc = this.dataset.qrSrc;
                    const qrUrl = this.dataset.qrUrl;
                    const restoTitle = this.dataset.restoTitle;

                    modalQrImage.src = qrSrc;
                    modalQrUrl.href = qrUrl;
                    modalQrUrl.textContent = qrUrl;
                    modalRestoTitle.textContent = restoTitle;
                    downloadQrBtn.href = qrSrc;
                    visitUrlBtn.href = qrUrl;
                });
            });

            // Clear video src when modal is closed to stop playing
            const videoModal = document.getElementById('videoModal');
            if (videoModal) {
                if (typeof $ !== 'undefined') {
                    $('#videoModal').on('hidden.bs.modal', function() {
                        document.getElementById('modalVideo').src = '';
                    });
                } else {
                    // Vanilla JS event listener
                    videoModal.addEventListener('hidden.bs.modal', function() {
                        document.getElementById('modalVideo').src = '';
                    });
                }
            }

            // Handle Laravel session flash messages
            @if (session('success'))
                showNotification('{{ session('success') }}', 'success');
            @endif

            @if (session('error'))
                showNotification('{{ session('error') }}', 'danger');
            @endif

            @if ($errors->any())
                showNotification('{{ $errors->first() }}', 'danger');
            @endif
        });

        // Handle page visibility changes and cleanup
        document.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'visible' && restoDataTable) {
                // Refresh table when page becomes visible again
                try {
                    restoDataTable.draw();
                } catch (error) {
                    console.warn('DataTable refresh error:', error);
                }
            }
        });

        // Cleanup on page unload
        window.addEventListener('beforeunload', function() {
            if (restoDataTable) {
                try {
                    restoDataTable.destroy();
                    restoDataTable = null;
                } catch (error) {
                    console.warn('DataTable cleanup error:', error);
                }
            }
        });
    </script>
@endsection