@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">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Hotel Management</a></li>
                <li class="breadcrumb-item active">Facilities</li>
            </ol>

            <h1 class="page-header">Facilities</h1>

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('hotel.facilities.create') }}" class="btn btn-custom">
                            <i class="fa fa-plus"></i> Add Facility
                        </a>
                    </div>
                </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

                    <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th width="5%">ID</th>
                                <th width="25%">Images</th>
                                <th width="20%">Title</th>
                                <th width="25%">Description</th>
                                <th width="15%">QR Code</th>
                                <th width="10%">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($facilities as $facility)
                                <tr>
                                    <td>{{ $facility->id }}</td>
                                    <td>
                                        <div class="images-container">
                                            <div class="row">
                                                @if ($facility->img_url)
                                                    <div class="col-3 mb-1">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url) }}"
                                                            alt="{{ $facility->title }}" class="img-thumbnail"
                                                            style="width: 45px; height: 45px; object-fit: cover;">
                                                        <small class="d-block text-center text-muted">1</small>
                                                    </div>
                                                @endif
                                                @if ($facility->img_url_2)
                                                    <div class="col-3 mb-1">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url_2) }}"
                                                            alt="{{ $facility->title }}" class="img-thumbnail"
                                                            style="width: 45px; height: 45px; object-fit: cover;">
                                                        <small class="d-block text-center text-muted">2</small>
                                                    </div>
                                                @endif
                                                @if ($facility->img_url_3)
                                                    <div class="col-3 mb-1">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url_3) }}"
                                                            alt="{{ $facility->title }}" class="img-thumbnail"
                                                            style="width: 45px; height: 45px; object-fit: cover;">
                                                        <small class="d-block text-center text-muted">3</small>
                                                    </div>
                                                @endif
                                                @if ($facility->img_url_4)
                                                    <div class="col-3 mb-1">
                                                        <img src="{{ asset('storage/facilities/' . $facility->img_url_4) }}"
                                                            alt="{{ $facility->title }}" class="img-thumbnail"
                                                            style="width: 45px; height: 45px; object-fit: cover;">
                                                        <small class="d-block text-center text-muted">4</small>
                                                    </div>
                                                @endif
                                            </div>
                                            <small class="text-muted">
                                                {{ $facility->image_count }}/4 images
                                            </small>
                                        </div>
                                    </td>
                                    <td>
                                        <strong>{{ $facility->title }}</strong>
                                        <small class="d-block text-muted">
                                            Created: {{ $facility->created_at->format('M d, Y') }}
                                        </small>
                                    </td>
                                    <td>
                                        <div class="description-preview">
                                            {{ Str::limit($facility->description, 100) }}
                                        </div>
                                    </td>
                                    <td>
                                        @if ($facility->qr_img && $facility->qr_url)
                                            <div class="qr-display">
                                                <img src="{{ $facility->getQrCodeUrl() }}" alt="QR Code"
                                                    class="qr-thumbnail" data-toggle="modal" data-target="#qrModal"
                                                    data-qr-src="{{ $facility->getQrCodeUrl() }}"
                                                    data-qr-url="{{ $facility->qr_url }}"
                                                    data-facility-title="{{ $facility->title }}">
                                                <div class="qr-info">
                                                    <small class="text-muted d-block">
                                                        <i class="fa fa-qrcode"></i> QR Available
                                                    </small>
                                                    <small class="text-muted">
                                                        <a href="{{ $facility->qr_url }}" target="_blank"
                                                            class="qr-url-link">
                                                            {{ Str::limit($facility->qr_url, 30) }}
                                                        </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="btn-group" role="group">
                                            <a href="{{ route('hotel.facilities.show', $facility->id) }}"
                                                class="btn btn-custom btn-sm" title="View">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <a href="{{ route('hotel.facilities.edit', $facility->id) }}"
                                                class="btn btn-sm btn-custom" title="Edit">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <form action="{{ route('hotel.facilities.destroy', $facility->id) }}"
                                                method="POST" style="display: inline;"
                                                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-sm" title="Delete">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">
                                        <div class="empty-state py-4">
                                            <i class="fa fa-building fa-3x text-muted mb-3"></i>
                                            <h5 class="text-muted">No Facilities Found</h5>
                                            <p class="text-muted">Start by creating your first facility.</p>
                                            <a href="{{ route('hotel.facilities.create') }}" class="btn btn-custom">
                                                <i class="fa fa-plus"></i> Create Facility
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </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>

    <!-- 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="modalFacilityTitle"></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>
        .images-container {
            min-height: 80px;
        }

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

        .description-preview {
            max-height: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-group-vertical .btn {
            margin-bottom: 2px;
        }

        .btn-group-vertical .btn:last-child {
            margin-bottom: 0;
        }

        .empty-state {
            padding: 2rem;
        }

        .img-thumbnail {
            border-radius: 4px;
        }

        /* 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;
        }

        @media (max-width: 768px) {
            .table td {
                font-size: 12px;
            }

            .images-container .row .col-3 {
                padding: 1px;
            }

            .images-container img {
                width: 30px !important;
                height: 30px !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;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // QR Modal functionality
            const qrModal = document.getElementById('qrModal');
            const modalQrImage = document.getElementById('modalQrImage');
            const modalQrUrl = document.getElementById('modalQrUrl');
            const modalFacilityTitle = document.getElementById('modalFacilityTitle');
            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 facilityTitle = this.dataset.facilityTitle;

                    modalQrImage.src = qrSrc;
                    modalQrUrl.href = qrUrl;
                    modalQrUrl.textContent = qrUrl;
                    modalFacilityTitle.textContent = facilityTitle;
                    downloadQrBtn.href = qrSrc;
                    visitUrlBtn.href = qrUrl;
                });
            });

            // Image hover preview functionality
            const thumbnails = document.querySelectorAll('.img-thumbnail');
            thumbnails.forEach(img => {
                img.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.1)';
                    this.style.transition = 'transform 0.2s ease';
                    this.style.zIndex = '1000';
                    this.style.position = 'relative';
                });

                img.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                    this.style.zIndex = 'auto';
                });
            });

            // Auto-hide alerts after 5 seconds
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    if (alert && alert.classList.contains('show')) {
                        alert.classList.remove('show');
                        setTimeout(() => {
                            if (alert.parentNode) {
                                alert.parentNode.removeChild(alert);
                            }
                        }, 150);
                    }
                }, 5000);
            });
        });
    </script>
@endsection