@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="{{ route('restos.index') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('restos.index') }}">Restaurant</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>
            <!-- end breadcrumb -->

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

            <!-- begin restaurant details panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Restaurant Details</h4>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <!-- Left Column: Media Content -->
                        <div class="col-lg-8 col-md-7">
                            @if ($resto->mode === 'video' && $resto->video_url)
                                <!-- Video Mode Display -->
                                <div class="video-container mb-4">
                                    <h5 class="mb-3">
                                        <i class="fa fa-video-camera text-danger"></i> Video Content
                                    </h5>
                                    @if ($resto->youtube_video_id)
                                        <div class="embed-responsive embed-responsive-16by9 mb-3">
                                            <iframe class="embed-responsive-item" src="{{ $resto->youtube_embed_url }}"
                                                frameborder="0" allowfullscreen loading="lazy"
                                                title="YouTube video for {{ $resto->title }}">
                                            </iframe>
                                        </div>
                                        <p class="text-muted small">
                                            <i class="fa fa-external-link"></i>
                                            <a href="{{ $resto->video_url }}" target="_blank" rel="noopener noreferrer">
                                                View on YouTube
                                            </a>
                                        </p>
                                    @else
                                        <div class="alert alert-warning">
                                            <i class="fa fa-exclamation-triangle"></i>
                                            Invalid YouTube URL format
                                        </div>
                                    @endif
                                </div>
                            @else
                                <!-- Image Mode Display -->
                                @php
                                    $images = $resto->getAllImages();
                                    $imageUrls = $resto->getImageUrls();
                                @endphp

                                @if (!empty($images))
                                    <div class="images-container mb-4">
                                        <h5 class="mb-3">
                                            <i class="fa fa-image text-success"></i>
                                            Images ({{ count($images) }})
                                        </h5>

                                        @if (count($images) === 1)
                                            <!-- Single Image Display -->
                                            <div class="single-image-view">
                                                <img src="{{ $imageUrls[0] }}" alt="{{ $resto->title }}"
                                                    class="img-fluid rounded shadow-sm"
                                                    style="max-height: 400px; width: 100%; object-fit: cover;"
                                                    loading="lazy"
                                                    onerror="this.src='{{ asset('images/placeholder-image.jpg') }}'; this.onerror=null;">
                                            </div>
                                        @else
                                            <!-- Multiple Images with Gallery -->
                                            <div class="image-gallery">
                                                <!-- Main Image Display -->
                                                <div class="main-image-container mb-3">
                                                    <img id="mainImage" src="{{ $imageUrls[0] }}" alt="{{ $resto->title }}"
                                                        class="img-fluid rounded shadow-sm"
                                                        style="max-height: 400px; width: 100%; object-fit: cover; cursor: pointer;"
                                                        loading="lazy" data-toggle="modal" data-target="#imageModal"
                                                        onerror="this.src='{{ asset('images/placeholder-image.jpg') }}'; this.onerror=null;">
                                                </div>

                                                <!-- Thumbnail Navigation -->
                                                <div class="thumbnail-nav">
                                                    <div class="row no-gutters">
                                                        @foreach ($imageUrls as $index => $imageUrl)
                                                            <div class="col-3 pr-2">
                                                                <img src="{{ $imageUrl }}"
                                                                    alt="{{ $resto->title }} - Image {{ $index + 1 }}"
                                                                    class="img-thumbnail thumbnail-image {{ $index === 0 ? 'active' : '' }}"
                                                                    style="height: 80px; width: 100%; object-fit: cover; cursor: pointer;"
                                                                    data-main-src="{{ $imageUrl }}"
                                                                    data-index="{{ $index }}" loading="lazy"
                                                                    onerror="this.src='{{ asset('images/placeholder-image.jpg') }}'; this.onerror=null;">
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @else
                                    <!-- No Images Available -->
                                    <div class="no-media-container mb-4">
                                        <div class="alert alert-info text-center">
                                            <i class="fa fa-image fa-2x text-muted mb-2"></i>
                                            <p class="mb-0">No images available for this item</p>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </div>

                        <!-- Right Column: Details -->
                        <div class="col-lg-4 col-md-5">
                            <div class="item-details">
                                <!-- Category -->
                                <div class="detail-item mb-3">
                                    <h6 class="detail-label text-muted mb-2">
                                        <i class="fa fa-cutlery"></i> Title
                                    </h6>
                                    <h3 class="item-title mb-0">{{ $resto->title }}</h3>
                                </div>

                                <div class="detail-item mb-3">
                                    <h6 class="detail-label text-muted mb-1">
                                        <i class="fa fa-tag"></i> Category
                                    </h6>
                                    <span class="badge badge-primary badge-lg">
                                        {{ $resto->restoCategory->category ?? 'No Category' }}
                                    </span>
                                </div>

                                <!-- Price -->
                                <div class="detail-item mb-3">
                                    <h6 class="detail-label text-muted mb-1">
                                        <i class="fa fa-money"></i> Price
                                    </h6>
                                    <h4 class="price-display text-success mb-0">
                                        Rp {{ number_format($resto->price, 0, ',', '.') }}
                                    </h4>
                                </div>

                                <!-- Description -->
                                @if ($resto->description)
                                    <div class="detail-item mb-3">
                                        <h6 class="detail-label text-muted mb-2">
                                            <i class="fa fa-align-left"></i> Description
                                        </h6>
                                        <div class="description-content">
                                            <p class="mb-0">{{ $resto->description }}</p>
                                        </div>
                                    </div>
                                @endif

                                <!-- Content Mode -->
                                <div class="detail-item mb-3">
                                    <h6 class="detail-label text-muted mb-1">
                                        <i class="fa fa-cog"></i> Content Mode
                                    </h6>
                                    <span class="badge {{ $resto->mode === 'video' ? 'badge-danger' : 'badge-success' }}">
                                        {{ ucfirst($resto->mode ?? 'image') }} Mode
                                    </span>
                                </div>

                                <!-- QR Code Section -->
                                @if ($resto->qr_img && $resto->qr_url)
                                    <div class="detail-item mb-3">
                                        <h6 class="detail-label text-muted mb-1">
                                            <i class="fa fa-qrcode"></i> QR Code
                                        </h6>
                                        <div class="qr-code-display">
                                            <img src="{{ $resto->getQrCodeUrl() }}" alt="QR Code" class="qr-code-image"
                                                data-toggle="modal" data-target="#qrModal">
                                            <div class="qr-code-details">
                                                <strong>URL:</strong>
                                                <a href="{{ $resto->qr_url }}" target="_blank" class="qr-code-url">
                                                    {{ $resto->qr_url }}
                                                </a>
                                                <div class="qr-actions mt-2">
                                                    <a href="{{ $resto->getQrCodeUrl() }}" download
                                                        class="btn btn-custom btn-sm">
                                                        <i class="fa fa-download"></i> Download
                                                    </a>
                                                    <a href="{{ $resto->qr_url }}" target="_blank"
                                                        class="btn btn-outline-secondary btn-sm">
                                                        <i class="fa fa-external-link"></i> Visit
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <!-- Visibility Status -->
                                <div class="detail-item mb-3">
                                    <h6 class="detail-label text-muted mb-1">
                                        <i class="fa fa-eye"></i> Visibility
                                    </h6>
                                    <span class="badge {{ $resto->hide ? 'badge-warning' : 'badge-success' }}">
                                        {{ $resto->hide ? 'Hidden' : 'Visible' }}
                                    </span>
                                </div>

                                <!-- Action Buttons -->
                                <div class="action-buttons mt-4">
                                    <div class="btn-group-vertical w-100">
                                        <a href="{{ route('restos.edit', $resto->id) }}" class="btn btn-custom mb-2">
                                            <i class="fa fa-edit"></i> Edit Item
                                        </a>
                                        <button type="button" class="btn btn-custom mb-2" data-toggle="modal"
                                            data-target="#deleteModal">
                                            <i class="fa fa-trash"></i> Delete Item
                                        </button>
                                        <a href="{{ route('restos.index') }}" class="btn btn-custom">
                                            <i class="fa fa-arrow-left"></i> Back to List
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end restaurant details 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 for Full View -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">{{ $resto->title }} - Image Gallery</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">
                    <img id="modalImage" src="" alt="{{ $resto->title }}" class="img-fluid rounded">
                    <div class="modal-nav mt-3">
                        <button type="button" class="btn btn-outline-primary" id="prevImage">
                            <i class="fa fa-chevron-left"></i> Previous
                        </button>
                        <span class="mx-3" id="imageCounter"></span>
                        <button type="button" class="btn btn-outline-primary" id="nextImage">
                            Next <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- QR Code Modal -->
    @if ($resto->qr_img && $resto->qr_url)
        <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 - {{ $resto->title }}</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 src="{{ $resto->getQrCodeUrl() }}" alt="QR Code" class="qr-modal-image">
                            <div class="qr-modal-details mt-3">
                                <h6>Scan or visit:</h6>
                                <a href="{{ $resto->qr_url }}" target="_blank"
                                    class="qr-modal-url">{{ $resto->qr_url }}</a>
                                <div class="qr-modal-actions mt-3">
                                    <a href="{{ $resto->getQrCodeUrl() }}" download class="btn btn-custom btn-sm">
                                        <i class="fa fa-download"></i> Download QR Code
                                    </a>
                                    <a href="{{ $resto->qr_url }}" 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>
    @endif

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</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>Are you sure you want to delete <strong>"{{ $resto->title }}"</strong>?</p>
                    <p class="text-danger"><small>This action cannot be undone.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <form action="{{ route('restos.destroy', $resto->id) }}" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-trash"></i> Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom Styles -->
    <style>
        .detail-item {
            border-bottom: 1px solid #eee;
            padding-bottom: 0.75rem;
        }

        .item-title {
            font-weight: 600;
            color: #2c3e50;
            line-height: 1.3;
        }

        .detail-item:last-child {
            border-bottom: none;
        }

        .detail-label {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .price-display {
            font-weight: bold;
        }

        .description-content {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 0.375rem;
            border-left: 4px solid #007bff;
        }

        .thumbnail-image {
            transition: all 0.3s ease;
            opacity: 0.7;
        }

        .thumbnail-image:hover,
        .thumbnail-image.active {
            opacity: 1;
            border-color: #007bff;
            transform: scale(1.05);
        }

        .badge-lg {
            font-size: 0.9rem;
            padding: 0.5rem 0.75rem;
        }

        .action-buttons .btn {
            border-radius: 0.375rem;
            font-weight: 500;
        }

        .single-image-view img {
            transition: transform 0.3s ease;
        }

        .single-image-view img:hover {
            transform: scale(1.02);
        }

        .modal-nav button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* QR Code Styles */
        .qr-code-display {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .qr-code-image {
            width: 120px;
            height: 120px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            background-color: white;
            padding: 5px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .qr-code-image:hover {
            transform: scale(1.05);
        }

        .qr-code-details {
            flex: 1;
        }

        .qr-code-url {
            color: #007bff;
            text-decoration: none;
            word-break: break-all;
            font-size: 0.9rem;
        }

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

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

        .qr-modal-image {
            max-width: 300px;
            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-modal-actions {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
        }

        @media (max-width: 768px) {
            .qr-code-display {
                flex-direction: column;
                align-items: center;
            }

            .qr-code-image {
                width: 100px;
                height: 100px;
            }

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

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

            .qr-modal-image {
                max-width: 200px;
            }
        }
    </style>

    <!-- JavaScript for Image Gallery -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const thumbnails = document.querySelectorAll('.thumbnail-image');
            const mainImage = document.getElementById('mainImage');
            const modalImage = document.getElementById('modalImage');
            const imageCounter = document.getElementById('imageCounter');
            const prevBtn = document.getElementById('prevImage');
            const nextBtn = document.getElementById('nextImage');

            let currentImageIndex = 0;
            const imageUrls = @json($resto->getImageUrls() ?? []);

            // Handle thumbnail clicks
            thumbnails.forEach((thumbnail, index) => {
                thumbnail.addEventListener('click', function() {
                    // Update main image
                    const newSrc = this.dataset.mainSrc;
                    if (mainImage) {
                        mainImage.src = newSrc;
                    }

                    // Update active thumbnail
                    thumbnails.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    // Update current index
                    currentImageIndex = index;
                });
            });

            // Handle modal image navigation
            function updateModalImage(index) {
                if (modalImage && imageUrls[index]) {
                    modalImage.src = imageUrls[index];
                    if (imageCounter) {
                        imageCounter.textContent = `${index + 1} of ${imageUrls.length}`;
                    }

                    // Update navigation buttons
                    if (prevBtn) {
                        prevBtn.disabled = index === 0;
                    }
                    if (nextBtn) {
                        nextBtn.disabled = index === imageUrls.length - 1;
                    }
                }
            }

            // Modal event handlers
            $('#imageModal').on('show.bs.modal', function() {
                updateModalImage(currentImageIndex);
            });

            if (prevBtn) {
                prevBtn.addEventListener('click', function() {
                    if (currentImageIndex > 0) {
                        currentImageIndex--;
                        updateModalImage(currentImageIndex);
                    }
                });
            }

            if (nextBtn) {
                nextBtn.addEventListener('click', function() {
                    if (currentImageIndex < imageUrls.length - 1) {
                        currentImageIndex++;
                        updateModalImage(currentImageIndex);
                    }
                });
            }

            // Keyboard navigation in modal
            $('#imageModal').on('keydown', function(e) {
                if (e.key === 'ArrowLeft' && currentImageIndex > 0) {
                    currentImageIndex--;
                    updateModalImage(currentImageIndex);
                } else if (e.key === 'ArrowRight' && currentImageIndex < imageUrls.length - 1) {
                    currentImageIndex++;
                    updateModalImage(currentImageIndex);
                }
            });
        });
    </script>
@endsection