@extends('layouts.app')

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

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Hotel Management</a></li>
                <li class="breadcrumb-item"><a href="{{ route('hotel.facilities.index') }}">Facilities</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">View Facility</h1>

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Facility Details</h4>
                </div>

                <div class="panel-body">
                    @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 (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <!-- Facility Details -->
                    <div class="row">
                        <!-- Images Section -->
                        <div class="col-lg-8">
                            <div class="facility-images">
                                <h5 class="section-title">Images</h5>

                                @if ($facility->hasImages())
                                    <!-- Main Image Display -->
                                    <div class="main-image-container mb-3">
                                        <div id="mainImageCarousel" class="carousel slide" data-ride="carousel"
                                            data-interval="false">
                                            <div class="carousel-inner">
                                                @php $imageIndex = 0; @endphp
                                                @if ($facility->img_url)
                                                    <div class="carousel-item {{ $imageIndex === 0 ? 'active' : '' }}">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url) }}"
                                                            alt="{{ $facility->title }} - Image 1"
                                                            class="d-block w-100 main-image" data-toggle="modal"
                                                            data-target="#imageModal"
                                                            data-image-src="{{ asset('storage/facilities/' . $facility->img_url) }}"
                                                            data-image-title="Image 1">
                                                        <div class="image-overlay">
                                                            <span class="image-number">1</span>
                                                        </div>
                                                    </div>
                                                    @php $imageIndex++; @endphp
                                                @endif

                                                @if ($facility->img_url_2)
                                                    <div class="carousel-item {{ $imageIndex === 0 ? 'active' : '' }}">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url_2) }}"
                                                            alt="{{ $facility->title }} - Image 2"
                                                            class="d-block w-100 main-image" data-toggle="modal"
                                                            data-target="#imageModal"
                                                            data-image-src="{{ asset('storage/facilities/' . $facility->img_url_2) }}"
                                                            data-image-title="Image 2">
                                                        <div class="image-overlay">
                                                            <span class="image-number">2</span>
                                                        </div>
                                                    </div>
                                                    @php $imageIndex++; @endphp
                                                @endif

                                                @if ($facility->img_url_3)
                                                    <div class="carousel-item {{ $imageIndex === 0 ? 'active' : '' }}">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url_3) }}"
                                                            alt="{{ $facility->title }} - Image 3"
                                                            class="d-block w-100 main-image" data-toggle="modal"
                                                            data-target="#imageModal"
                                                            data-image-src="{{ asset('storage/facilities/' . $facility->img_url_3) }}"
                                                            data-image-title="Image 3">
                                                        <div class="image-overlay">
                                                            <span class="image-number">3</span>
                                                        </div>
                                                    </div>
                                                    @php $imageIndex++; @endphp
                                                @endif

                                                @if ($facility->img_url_4)
                                                    <div class="carousel-item {{ $imageIndex === 0 ? 'active' : '' }}">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url_4) }}"
                                                            alt="{{ $facility->title }} - Image 4"
                                                            class="d-block w-100 main-image" data-toggle="modal"
                                                            data-target="#imageModal"
                                                            data-image-src="{{ asset('storage/facilities/' . $facility->img_url_4) }}"
                                                            data-image-title="Image 4">
                                                        <div class="image-overlay">
                                                            <span class="image-number">4</span>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>

                                            @if ($facility->image_count > 1)
                                                <!-- Carousel Controls -->
                                                <a class="carousel-control-prev" href="#mainImageCarousel" 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="#mainImageCarousel" role="button"
                                                    data-slide="next">
                                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                    <span class="sr-only">Next</span>
                                                </a>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Thumbnail Images -->
                                    @if ($facility->image_count > 1)
                                        <div class="thumbnail-container">
                                            <div class="row">
                                                @if ($facility->img_url)
                                                    <div class="col-3">
                                                        <div class="thumbnail-wrapper">
                                                            <img src="{{ asset('storage/facilities/' . $facility->img_url) }}"
                                                                alt="Thumbnail 1" class="thumbnail-image"
                                                                data-slide-to="0" data-target="#mainImageCarousel">
                                                            <div class="thumbnail-overlay">1</div>
                                                        </div>
                                                    </div>
                                                @endif

                                                @if ($facility->img_url_2)
                                                    <div class="col-3">
                                                        <div class="thumbnail-wrapper">
                                                            <img src="{{ asset('storage/facilities/' . $facility->img_url_2) }}"
                                                                alt="Thumbnail 2" class="thumbnail-image"
                                                                data-slide-to="{{ $facility->img_url ? '1' : '0' }}"
                                                                data-target="#mainImageCarousel">
                                                            <div class="thumbnail-overlay">2</div>
                                                        </div>
                                                    </div>
                                                @endif

                                                @if ($facility->img_url_3)
                                                    <div class="col-3">
                                                        <div class="thumbnail-wrapper">
                                                            <img src="{{ asset('storage/facilities/' . $facility->img_url_3) }}"
                                                                alt="Thumbnail 3" class="thumbnail-image"
                                                                data-slide-to="{{ ($facility->img_url ? 1 : 0) + ($facility->img_url_2 ? 1 : 0) }}"
                                                                data-target="#mainImageCarousel">
                                                            <div class="thumbnail-overlay">3</div>
                                                        </div>
                                                    </div>
                                                @endif

                                                @if ($facility->img_url_4)
                                                    <div class="col-3">
                                                        <div class="thumbnail-wrapper">
                                                            <img src="{{ asset('storage/facilities/' . $facility->img_url_4) }}"
                                                                alt="Thumbnail 4" class="thumbnail-image"
                                                                data-slide-to="{{ ($facility->img_url ? 1 : 0) + ($facility->img_url_2 ? 1 : 0) + ($facility->img_url_3 ? 1 : 0) }}"
                                                                data-target="#mainImageCarousel">
                                                            <div class="thumbnail-overlay">4</div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    <div class="no-images-placeholder">
                                        <i class="fa fa-building fa-3x text-muted"></i>
                                        <p class="text-muted mt-2">No images available</p>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Details Section -->
                        <div class="col-lg-4">
                            <div class="facility-details">
                                <h5 class="section-title">Details</h5>

                                <div class="detail-card">
                                    <div class="detail-item">
                                        <label class="detail-label">Title:</label>
                                        <div class="detail-value">{{ $facility->title }}</div>
                                    </div>

                                    <div class="detail-item">
                                        <label class="detail-label">Description:</label>
                                        <div class="detail-value description-content">
                                            {!! nl2br(e($facility->description)) !!}
                                        </div>
                                    </div>

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

                                    <div class="detail-item">
                                        <label class="detail-label">Total Images:</label>
                                        <div class="detail-value">
                                            <span class="badge badge-primary">{{ $facility->image_count }}</span>
                                        </div>
                                    </div>

                                    <div class="detail-item">
                                        <label class="detail-label">Created:</label>
                                        <div class="detail-value">
                                            <i class="fa fa-calendar"></i>
                                            {{ $facility->created_at->format('M d, Y') }}
                                            <small class="text-muted d-block">
                                                {{ $facility->created_at->format('h:i A') }}
                                            </small>
                                        </div>
                                    </div>

                                    <div class="detail-item">
                                        <label class="detail-label">Last Updated:</label>
                                        <div class="detail-value">
                                            <i class="fa fa-clock"></i>
                                            {{ $facility->updated_at->format('M d, Y') }}
                                            <small class="text-muted d-block">
                                                {{ $facility->updated_at->format('h:i A') }}
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="action-buttons mt-4">
                                    <a href="{{ route('hotel.facilities.edit', $facility->id) }}"
                                        class="btn btn-custom btn-block">
                                        <i class="fa fa-edit"></i> Edit Facility
                                    </a>

                                    <form action="{{ route('hotel.facilities.destroy', $facility->id) }}" method="POST"
                                        class="mt-2"
                                        onsubmit="return confirm('Are you sure you want to delete this facility and all its images?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-custom btn-block">
                                            <i class="fa fa-trash"></i> Delete Facility
                                        </button>
                                    </form>

                                    <a href="{{ route('hotel.facilities.index') }}"
                                        class="btn btn-custom btn-block mt-2">
                                        <i class="fa fa-arrow-left"></i> Back to List
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <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>
    </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">{{ $facility->title }} - <span
                            id="modalImageTitle">Image</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">
                    <img id="modalImage" src="" alt="Full Size Image" class="img-fluid">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

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

    <style>
        .section-title {
            color: #495057;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #007bff;
            display: inline-block;
        }

        .facility-images {
            margin-bottom: 2rem;
        }

        .main-image-container {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .main-image {
            height: 400px;
            object-fit: cover;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .main-image:hover {
            transform: scale(1.02);
        }

        .image-overlay {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .thumbnail-container {
            margin-top: 1rem;
        }

        .thumbnail-wrapper {
            position: relative;
            margin-bottom: 0.5rem;
        }

        .thumbnail-image {
            width: 100%;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

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

        .thumbnail-image.active {
            border-color: #007bff;
        }

        .thumbnail-overlay {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
        }

        .no-images-placeholder {
            text-align: center;
            padding: 3rem;
            border: 2px dashed #dee2e6;
            border-radius: 12px;
            background-color: #f8f9fa;
        }

        .facility-details {
            height: fit-content;
        }

        .detail-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            border: 1px solid #dee2e6;
        }

        .detail-item {
            margin-bottom: 1.5rem;
        }

        .detail-item:last-child {
            margin-bottom: 0;
        }

        .detail-label {
            font-weight: 600;
            color: #495057;
            display: block;
            margin-bottom: 0.5rem;
        }

        .detail-value {
            color: #6c757d;
            line-height: 1.5;
        }

        .description-content {
            max-height: 200px;
            overflow-y: auto;
            padding: 0.75rem;
            background: white;
            border-radius: 4px;
            border: 1px solid #dee2e6;
        }

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

        .badge-primary {
            background-color: #007bff;
            color: white;
        }

        .action-buttons .btn {
            font-weight: 600;
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 20px;
        }

        .modal-body img {
            max-height: 70vh;
            object-fit: contain;
        }

        /* QR Code Styles */
        .qr-code-display {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            background: white;
            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) {
            .main-image {
                height: 250px;
            }

            .thumbnail-image {
                height: 60px;
            }

            .facility-details {
                margin-top: 2rem;
            }

            .col-lg-4,
            .col-lg-8 {
                padding-left: 15px;
                padding-right: 15px;
            }

            .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;
            }
        }

        @media (max-width: 576px) {
            .thumbnail-container .col-3 {
                margin-bottom: 0.5rem;
            }

            .detail-card {
                padding: 1rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle image modal
            const imageModal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');
            const modalImageTitle = document.getElementById('modalImageTitle');

            // Show modal when main image is clicked
            document.querySelectorAll('.main-image').forEach(img => {
                img.addEventListener('click', function() {
                    const imageSrc = this.dataset.imageSrc;
                    const imageTitle = this.dataset.imageTitle;

                    modalImage.src = imageSrc;
                    modalImageTitle.textContent = imageTitle;
                });
            });

            // Thumbnail click handling
            document.querySelectorAll('.thumbnail-image').forEach(thumbnail => {
                thumbnail.addEventListener('click', function() {
                    const slideIndex = this.dataset.slideTo;
                    $('#mainImageCarousel').carousel(parseInt(slideIndex));
                });
            });

            // Add active class to current thumbnail
            $('#mainImageCarousel').on('slide.bs.carousel', function(e) {
                const activeIndex = e.to;
                document.querySelectorAll('.thumbnail-image').forEach((thumb, index) => {
                    thumb.classList.toggle('active', index === activeIndex);
                });
            });

            // Initialize first thumbnail as active
            const firstThumbnail = document.querySelector('.thumbnail-image');
            if (firstThumbnail) {
                firstThumbnail.classList.add('active');
            }

            // Auto-hide alerts
            setTimeout(function() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(alert => {
                    if (alert.classList.contains('show')) {
                        alert.classList.remove('show');
                        setTimeout(() => {
                            if (alert.parentNode) {
                                alert.parentNode.removeChild(alert);
                            }
                        }, 150);
                    }
                });
            }, 5000);

            // Smooth scroll for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });
        });
    </script>
@endsection