@extends('layouts.app')

@section('content')

    <link rel="stylesheet" href="{{ asset('css/lokasi.css') }}">

    @if ($errors->any())
        <script>
            alert(@json($errors->first()));
        </script>
    @endif

    <div class="lokasi-page lokasi-detail-page">
        <div class="lokasi-detail-topbar">
            <a href="{{ route('lokasi') }}" class="lokasi-back-link">
                <i class="fa-solid fa-arrow-left"></i> Kembali ke Daftar Lokasi
            </a>
        </div>

        <div class="lokasi-header">
            <div>
                <p class="lokasi-eyebrow">DETAIL LOKASI</p>
                <h1>{{ $gedung->nama_gedung }}</h1>
                <p class="lokasi-subtitle">Daftar ruangan dan gambar yang tersimpan di gedung ini.</p>
            </div>
            <div class="lokasi-total">
                <strong>{{ $gedung->ruangan->count() }}</strong>
                <span>Ruangan</span>
            </div>
        </div>

        <div class="lokasi-detail-card">
            <div class="lokasi-detail-card-header">
                <div>
                    <p class="lokasi-eyebrow">RUANGAN</p>
                    <h2>Ruangan di {{ $gedung->nama_gedung }}</h2>
                </div>
            </div>

            <div class="lokasi-detail-ruangan-list">
                @forelse ($gedung->ruangan as $ruangan)
                    <article class="lokasi-ruangan-detail">
                        <div class="lokasi-ruangan-detail-heading">
                            <div class="lokasi-ruangan-title">
                                <span class="lokasi-ruangan-icon"><i class="fa-solid fa-door-open"></i></span>
                                <div>
                                    <h3>{{ $ruangan->nama_ruangan }}</h3>
                                    @if ($ruangan->kapasitas)
                                        <p>Kapasitas {{ $ruangan->kapasitas }} orang</p>
                                    @endif
                                </div>
                            </div>
                            <div class="lokasi-actions">
                                <button type="button" class="lokasi-action btn-gallery-lokasi"
                                    title="Lihat gambar {{ $ruangan->nama_ruangan }}"
                                    onclick="openGalleryRuangan({{ $ruangan->id_ruangan }}, @js($ruangan->nama_ruangan))">
                                    <i class="fa-solid fa-images"></i>
                                    <span>Lihat Gambar</span>
                                </button>
                                <button type="button" class="lokasi-action btn-edit-lokasi" title="Edit ruangan"
                                    onclick="openEditLokasiModal('ruangan', {{ $ruangan->id_ruangan }}, @js($ruangan->nama_ruangan))">
                                    <i class="fa-solid fa-pen"></i>
                                </button>
                                <form action="{{ route('lokasi.ruangan.destroy', $ruangan->id_ruangan) }}" method="POST" class="form-hapus-lokasi" onsubmit="return openHapusLokasiModal(this)" data-nama="{{ $ruangan->nama_ruangan }}" data-jenis="ruangan">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="lokasi-action btn-delete-lokasi" title="Hapus ruangan">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                    </article>
                @empty
                    <div class="lokasi-empty">
                        <i class="fa-solid fa-door-open"></i>
                        <p>Belum ada ruangan di gedung ini.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <div id="modalHapusLokasi" class="lokasi-modal" aria-hidden="true">
        <div class="lokasi-modal-box modal-hapus-box">
            <div class="lokasi-modal-header">
                <div>
                    <p class="lokasi-eyebrow">KONFIRMASI</p>
                    <h2>Hapus <span id="hapusJenisLokasi">Ruangan</span>?</h2>
                </div>
                <button type="button" class="modal-close" onclick="closeHapusLokasiModal()">&times;</button>
            </div>
            <div class="lokasi-modal-body">
                <p>Apakah Anda yakin ingin menghapus:</p>
                <strong id="hapusNamaLokasi" class="hapus-nama-lokasi"></strong>
                <form id="formHapusLokasi" method="POST" class="modal-hapus-form">
                    @csrf
                    @method('DELETE')
                    <div class="modal-hapus-actions">
                        <button type="button" class="btn-modal-batal" onclick="closeHapusLokasiModal()">Batal</button>
                        <button type="submit" class="btn-modal-hapus"><i class="fa-solid fa-trash"></i> Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modalEditLokasi" class="lokasi-modal" aria-hidden="true">
        <div class="lokasi-modal-box modal-edit-box">
            <div class="lokasi-modal-header">
                <div>
                    <p class="lokasi-eyebrow">EDIT LOKASI</p>
                    <h2>Edit <span id="editJenisLokasi">Ruangan</span></h2>
                </div>
                <button type="button" class="modal-close" onclick="closeEditLokasiModal()">&times;</button>
            </div>
            <div class="lokasi-modal-body">
                <form id="formEditLokasi" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id_ruangan" id="editLokasiIdRuangan">
                    <input type="hidden" name="delete_images" id="editLokasiDeleteImages" value="">
                    <label for="editLokasiNama">Nama</label>
                    <input type="text" name="nama_ruangan" id="editLokasiNama" required>
                    <div class="lokasi-image-upload-panel">
                        <label for="editLokasiImages">Tambah Gambar Baru</label>
                        <input type="file" id="editLokasiImages" name="images[]" accept="image/jpeg,image/png,image/webp" multiple>
                        <small>JPG, JPEG, PNG, atau WEBP, maksimal 2 MB per file.</small>
                        <div id="editLokasiNewPreview" class="lokasi-image-preview"></div>
                    </div>
                    <div id="editLokasiExistingImages" class="lokasi-image-preview"></div>
                    <div class="modal-hapus-actions">
                        <button type="button" class="btn-modal-batal" onclick="closeEditLokasiModal()">Batal</button>
                        <button type="submit" class="btn-modal-simpan"><i class="fa-solid fa-floppy-disk"></i> Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modalGaleriRuangan" class="lokasi-modal lokasi-gallery-modal" aria-hidden="true">
        <div class="lokasi-modal-box lokasi-gallery-box">
            <div class="lokasi-modal-header">
                <div>
                    <p class="lokasi-eyebrow">GALERI RUANGAN</p>
                    <h2 id="galleryRuanganTitle">Gambar Ruangan</h2>
                </div>
                <button type="button" class="gallery-expand-toggle" onclick="toggleGalleryExpand('modalGaleriRuangan', this)" aria-label="Perbesar galeri" title="Perbesar galeri">
                    <i class="fa-solid fa-expand"></i>
                </button>
                <button type="button" class="modal-close" onclick="closeGalleryRuangan()" aria-label="Tutup galeri">&times;</button>
            </div>
            <div class="lokasi-modal-body">
                <div class="gallery-main-stage">
                    <div class="gallery-main-image-wrap">
                        <img id="galleryRuanganMainImage" class="gallery-main-image" alt="Gambar ruangan">
                    </div>
                    <div id="galleryRuanganMainCaption" class="gallery-main-caption"></div>
                </div>
                <div id="galleryRuanganGrid" class="gallery-grid gallery-thumbnails"></div>
            </div>
        </div>
    </div>

    <script>
        function openHapusLokasiModal(form) {
            document.getElementById('formHapusLokasi').action = form.action;
            document.getElementById('hapusNamaLokasi').textContent = form.dataset.nama;
            document.getElementById('hapusJenisLokasi').textContent = form.dataset.jenis;
            document.getElementById('modalHapusLokasi').classList.add('show');
            return false;
        }

        function closeHapusLokasiModal() {
            document.getElementById('modalHapusLokasi').classList.remove('show');
        }

        function openEditLokasiModal(jenis, id, nama) {
            const form = document.getElementById('formEditLokasi');
            const imageInput = document.getElementById('editLokasiImages');
            form.action = '{{ route('ruangan.update') }}';
            document.getElementById('editLokasiIdRuangan').value = id;
            document.getElementById('editLokasiNama').value = nama;
            document.getElementById('editJenisLokasi').textContent = jenis;
            imageInput.value = '';
            document.getElementById('editLokasiDeleteImages').value = '';
            document.getElementById('editLokasiNewPreview').innerHTML = '';
            loadExistingLokasiImages(id);
            document.getElementById('modalEditLokasi').classList.add('show');
        }

        function closeEditLokasiModal() {
            document.getElementById('modalEditLokasi').classList.remove('show');
        }

        function toggleGalleryExpand(modalId, button) {
            const modal = document.getElementById(modalId);
            const expanded = modal.classList.toggle('gallery-expanded');
            button.innerHTML = expanded
                ? '<i class="fa-solid fa-compress"></i>'
                : '<i class="fa-solid fa-expand"></i>';
            button.setAttribute('aria-label', expanded ? 'Kembalikan ukuran galeri' : 'Perbesar galeri');
            button.title = expanded ? 'Kembalikan ukuran galeri' : 'Perbesar galeri';
        }

        function selectGalleryRuanganImage(image) {
            galleryRuanganSelectionVersion += 1;
            const mainImage = document.getElementById('galleryRuanganMainImage');
            const caption = document.getElementById('galleryRuanganMainCaption');
            mainImage.src = image.url;
            mainImage.alt = image.deskripsi || 'Gambar ruangan';
            caption.textContent = image.deskripsi || 'Tidak ada deskripsi.';
            document.querySelectorAll('#galleryRuanganGrid .gallery-card').forEach(card => {
                card.classList.toggle('is-selected', card.dataset.imageId === String(image.id));
            });
        }

        let galleryRuanganSelectionVersion = 0;
        let galleryRuanganPrimaryController = null;

        function renderNewLokasiImages() {
            const input = document.getElementById('editLokasiImages');
            const preview = document.getElementById('editLokasiNewPreview');
            preview.innerHTML = '';

            Array.from(input.files).forEach(file => {
                const card = document.createElement('div');
                card.className = 'lokasi-image-card';

                const image = document.createElement('img');
                image.src = URL.createObjectURL(file);
                image.alt = 'Preview gambar ruangan';

                const description = document.createElement('input');
                description.type = 'text';
                description.name = 'image_descriptions[]';
                description.placeholder = 'Deskripsi gambar';

                card.append(image, description);
                preview.appendChild(card);
            });
        }

        async function loadExistingLokasiImages(id) {
            const container = document.getElementById('editLokasiExistingImages');
            container.innerHTML = '<p class="lokasi-image-loading">Memuat gambar tersimpan...</p>';

            try {
                const response = await fetch(`{{ url('/ruangan/images') }}/${id}`, {
                    headers: { Accept: 'application/json' }
                });
                const data = await response.json();
                container.innerHTML = '';

                if (!data.data || !data.data.length) {
                    container.innerHTML = '<p class="lokasi-image-loading">Belum ada gambar tersimpan.</p>';
                    return;
                }

                data.data.forEach(imageData => {
                    const card = document.createElement('div');
                    card.className = 'lokasi-image-card';

                    const image = document.createElement('img');
                    image.src = imageData.url;
                    image.alt = imageData.deskripsi || 'Gambar ruangan';

                    const description = document.createElement('input');
                    description.type = 'text';
                    description.name = `existing_descriptions[${imageData.id}]`;
                    description.value = imageData.deskripsi || '';
                    description.placeholder = 'Deskripsi gambar';

                    const remove = document.createElement('button');
                    remove.type = 'button';
                    remove.className = 'lokasi-image-delete';
                    remove.textContent = 'Hapus';
                    remove.addEventListener('click', () => {
                        const hidden = document.getElementById('editLokasiDeleteImages');
                        const deleted = hidden.value ? hidden.value.split(',') : [];
                        if (!deleted.includes(String(imageData.id))) deleted.push(String(imageData.id));
                        hidden.value = deleted.join(',');
                        card.remove();
                    });

                    card.append(image, description, remove);
                    container.appendChild(card);
                });
            } catch (error) {
                container.innerHTML = '<p class="lokasi-image-loading">Gambar tersimpan tidak dapat dimuat.</p>';
            }
        }

        document.getElementById('editLokasiImages').addEventListener('change', event => {
            const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
            const validFiles = Array.from(event.target.files).filter(file =>
                validTypes.includes(file.type) && file.size <= 2 * 1024 * 1024
            );

            if (validFiles.length !== event.target.files.length) {
                alert('Gambar harus JPG, JPEG, PNG, atau WEBP dengan ukuran maksimal 2 MB.');
            }

            const transfer = new DataTransfer();
            validFiles.forEach(file => transfer.items.add(file));
            event.target.files = transfer.files;
            renderNewLokasiImages();
        });

        function galleryRuanganImageCard(image, ruanganId) {
            const card = document.createElement('button');
            card.type = 'button';
            card.className = 'gallery-card gallery-ruangan-card' + (image.is_primary ? ' is-primary' : '');
            card.dataset.imageId = image.id;
            card.title = image.is_primary ? 'Gambar utama' : 'Jadikan gambar utama';
            card.addEventListener('click', () => {
                selectGalleryRuanganImage(image);
                setPrimaryRuanganImage(ruanganId, image.id);
            });

            const imageElement = document.createElement('img');
            imageElement.src = image.url;
            imageElement.alt = image.deskripsi || 'Gambar ruangan';

            const content = document.createElement('span');
            content.className = 'gallery-card-content';
            const status = document.createElement('strong');
            status.textContent = image.is_primary ? 'Gambar Utama' : 'Jadikan Gambar Utama';
            const description = document.createElement('span');
            description.textContent = image.deskripsi || 'Tidak ada deskripsi.';
            content.append(status, description);
            card.append(imageElement, content);
            return card;
        }

        async function openGalleryRuangan(id, nama) {
            document.getElementById('galleryRuanganTitle').textContent = `Galeri ${nama}`;
            document.getElementById('modalGaleriRuangan').classList.add('show');
            const grid = document.getElementById('galleryRuanganGrid');
            grid.innerHTML = '<p class="gallery-empty">Memuat gambar...</p>';

            try {
                const response = await fetch(`{{ url('/ruangan/images') }}/${id}`, {
                    headers: { Accept: 'application/json' }
                });
                const data = await response.json();
                grid.innerHTML = '';

                if (!data.data || !data.data.length) {
                    document.querySelector('#modalGaleriRuangan .gallery-main-stage').classList.add('is-empty');
                    grid.innerHTML = '<p class="gallery-empty"><i class="fa-regular fa-image"></i><br>Ruangan ini belum memiliki gambar.</p>';
                    return;
                }

                document.querySelector('#modalGaleriRuangan .gallery-main-stage').classList.remove('is-empty');
                data.data.forEach(image => grid.appendChild(galleryRuanganImageCard(image, id)));
                selectGalleryRuanganImage(data.data[0]);
            } catch (error) {
                grid.innerHTML = '<p class="gallery-empty">Gambar tidak dapat dimuat.</p>';
            }
        }

        async function setPrimaryRuanganImage(ruanganId, imageId) {
            if (galleryRuanganPrimaryController) galleryRuanganPrimaryController.abort();
            galleryRuanganPrimaryController = new AbortController();
            const selectionVersion = galleryRuanganSelectionVersion;
            try {
                const response = await fetch(`{{ url('/ruangan/images') }}/${ruanganId}/primary`, {
                    method: 'POST',
                    signal: galleryRuanganPrimaryController.signal,
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ image_id: imageId })
                });
                const data = await response.json();
                if (!response.ok || !data.success) throw new Error('Gagal memilih gambar utama');

                if (selectionVersion !== galleryRuanganSelectionVersion) return;

                document.querySelectorAll('#galleryRuanganGrid .gallery-card').forEach(card => {
                    const isPrimary = card.dataset.imageId === String(imageId);
                    card.classList.toggle('is-primary', isPrimary);
                    const status = card.querySelector('.gallery-card-content strong');
                    if (status) status.textContent = isPrimary ? 'Gambar Utama' : 'Jadikan Gambar Utama';
                });
            } catch (error) {
                if (error.name === 'AbortError') return;
                alert('Gambar utama gagal disimpan.');
            }
        }

        function closeGalleryRuangan() {
            const modal = document.getElementById('modalGaleriRuangan');
            modal.classList.remove('show', 'gallery-expanded');
            modal.querySelector('.gallery-expand-toggle').innerHTML = '<i class="fa-solid fa-expand"></i>';
        }

        document.querySelectorAll('.lokasi-modal').forEach(modal => {
            modal.addEventListener('click', event => {
                if (event.target === modal) modal.classList.remove('show');
            });
        });
    </script>
@endsection