@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">
		<div class="lokasi-header">
			<div>
				<p class="lokasi-eyebrow">INVENTARIS</p>
				<h1>Data Lokasi</h1>
				<p class="lokasi-subtitle">Daftar gedung dan ruangan yang tersimpan.</p>
			</div>
			<div class="lokasi-total">
				<strong>{{ $gedung->count() }}</strong>
				<span>Gedung</span>
			</div>
		</div>

		<div class="lokasi-table-card">
			<div class="table-responsive">
				<table class="lokasi-table">
					<thead>
						<tr>
							<th>No</th>
							<th>Nama Gedung</th>
							<th>Jumlah Ruangan</th>
							<th>Aksi</th>
						</tr>
					</thead>
					<tbody>
			@forelse ($gedung as $item)
						<tr>
							<td>{{ $gedung->firstItem() + $loop->index }}</td>
							<td class="nama-gedung">
								<div class="gedung-name-wrap">
									@php($gambarUtama = $item->gambar->firstWhere('is_primary', true))
									@if ($gambarUtama)
										<img class="gedung-avatar" data-gedung-avatar="{{ $item->id_gedung }}" src="{{ asset($gambarUtama->path) }}" alt="Gambar utama {{ $item->nama_gedung }}">
									@else
										<span class="gedung-avatar gedung-avatar-placeholder" data-gedung-avatar="{{ $item->id_gedung }}" aria-hidden="true"><i class="fa-solid fa-building"></i></span>
									@endif
									<span>{{ $item->nama_gedung }}</span>
								</div>
							</td>
							<td>{{ $item->ruangan->count() }} Ruangan</td>
							<td class="lokasi-actions">
								<button type="button" class="lokasi-action btn-gallery-lokasi" title="Lihat gambar"
									onclick="openGalleryGedung({{ $item->id_gedung }}, @js($item->nama_gedung))">
									<i class="fa-solid fa-images"></i>
									<span>Lihat Gambar</span>
								</button>
								<a href="{{ route('lokasi.detail', $item->id_gedung) }}" class="lokasi-action btn-detail-lokasi" title="Detail ruangan">
									<i class="fa-solid fa-eye"></i>
								</a>
								<button type="button" class="lokasi-action btn-edit-lokasi" title="Edit gedung"
									onclick="openEditLokasiModal('gedung', {{ $item->id_gedung }}, @js($item->nama_gedung))">
									<i class="fa-solid fa-pen"></i>
								</button>
								<form action="{{ route('lokasi.gedung.destroy', $item->id_gedung) }}" method="POST" class="form-hapus-lokasi" onsubmit="return openHapusLokasiModal(this)" data-nama="{{ $item->nama_gedung }}" data-jenis="gedung">
									@csrf
									@method('DELETE')
									<button type="submit" class="lokasi-action btn-delete-lokasi" title="Hapus gedung">
										<i class="fa-solid fa-trash"></i>
									</button>
								</form>
							</td>
						</tr>
			@empty
						<tr><td colspan="4" class="lokasi-empty">Belum ada data gedung.</td></tr>
			@endforelse
					</tbody>
				</table>
			</div>

			<div class="pagination-wrapper">
				<div class="pagination-info">
					Menampilkan {{ $gedung->firstItem() ?? 0 }} - {{ $gedung->lastItem() ?? 0 }} dari {{ $gedung->total() }} data
				</div>

				<div class="pagination">
					@if ($gedung->onFirstPage())
						<span class="disabled">‹ Prev</span>
					@else
						<a href="{{ $gedung->previousPageUrl() }}">‹ Prev</a>
					@endif

					<span class="active">{{ $gedung->currentPage() }}</span>

					@if ($gedung->hasMorePages())
						<a href="{{ $gedung->nextPageUrl() }}">Next ›</a>
					@else
						<span class="disabled">Next ›</span>
					@endif
				</div>
			</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">Lokasi</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">Lokasi</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_gedung" id="editLokasiIdGedung">
					<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_gedung" 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="modalGaleriGedung" 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 GEDUNG</p>
					<h2 id="galleryGedungTitle">Gambar Gedung</h2>
				</div>
				<button type="button" class="gallery-expand-toggle" onclick="toggleGalleryExpand('modalGaleriGedung', this)" aria-label="Perbesar galeri" title="Perbesar galeri">
					<i class="fa-solid fa-expand"></i>
				</button>
				<button type="button" class="modal-close" onclick="closeGalleryGedung()" 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="galleryGedungMainImage" class="gallery-main-image" alt="Gambar gedung">
					</div>
					<div id="galleryGedungMainCaption" class="gallery-main-caption"></div>
				</div>
				<div id="galleryGedungGrid" 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 input = document.getElementById('editLokasiNama');
			const jenisLabel = document.getElementById('editJenisLokasi');
			const imageInput = document.getElementById('editLokasiImages');

			form.action = jenis === 'gedung'
				? '{{ route('gedung.update') }}'
				: '{{ route('ruangan.update') }}';
			document.getElementById('editLokasiIdGedung').value = jenis === 'gedung' ? id : '';
			document.getElementById('editLokasiIdRuangan').value = jenis === 'ruangan' ? id : '';
			input.name = jenis === 'gedung' ? 'nama_gedung' : 'nama_ruangan';
			input.value = nama;
			jenisLabel.textContent = jenis;
			imageInput.dataset.jenis = jenis;
			imageInput.dataset.id = id;
			imageInput.value = '';
			document.getElementById('editLokasiDeleteImages').value = '';
			document.getElementById('editLokasiNewPreview').innerHTML = '';
			loadExistingLokasiImages(jenis, 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 selectGalleryGedungImage(image) {
			galleryGedungSelectionVersion += 1;
			const mainImage = document.getElementById('galleryGedungMainImage');
			const caption = document.getElementById('galleryGedungMainCaption');
			mainImage.src = image.url;
			mainImage.alt = image.deskripsi || 'Gambar gedung';
			caption.textContent = image.deskripsi || 'Tidak ada deskripsi.';
			document.querySelectorAll('#galleryGedungGrid .gallery-card').forEach(card => {
				card.classList.toggle('is-selected', card.dataset.imageId === String(image.id));
			});
		}

		let galleryGedungSelectionVersion = 0;
		let galleryGedungPrimaryController = 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 lokasi';

				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(jenis, id) {
			const container = document.getElementById('editLokasiExistingImages');
			container.innerHTML = '<p class="lokasi-image-loading">Memuat gambar tersimpan...</p>';

			try {
				const response = await fetch(`{{ url('/') }}/${jenis}/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 lokasi';

					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 galleryImageCard(image, gedungId) {
			const card = document.createElement('button');
			card.type = 'button';
			card.className = 'gallery-card gallery-gedung-card' + (image.is_primary ? ' is-primary' : '');
			card.dataset.imageId = image.id;
			card.title = image.is_primary ? 'Gambar utama' : 'Jadikan gambar utama';
			card.addEventListener('click', () => {
				selectGalleryGedungImage(image);
				setPrimaryGedungImage(gedungId, image.id);
			});

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

			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 openGalleryGedung(id, nama) {
			document.getElementById('galleryGedungTitle').textContent = `Galeri ${nama}`;
			document.getElementById('modalGaleriGedung').classList.add('show');
			const grid = document.getElementById('galleryGedungGrid');
			grid.innerHTML = '<p class="gallery-empty">Memuat gambar...</p>';

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

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

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

		async function setPrimaryGedungImage(gedungId, imageId) {
			if (galleryGedungPrimaryController) galleryGedungPrimaryController.abort();
			galleryGedungPrimaryController = new AbortController();
			const selectionVersion = galleryGedungSelectionVersion;
			try {
				const response = await fetch(`/gedung/images/${gedungId}/primary`, {
					method: 'POST',
					signal: galleryGedungPrimaryController.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');

				const rowImage = document.querySelector(`[data-gedung-avatar="${gedungId}"]`);
				if (rowImage) {
					const imageElement = document.createElement('img');
					imageElement.className = 'gedung-avatar';
					imageElement.dataset.gedungAvatar = gedungId;
					imageElement.src = data.url;
					imageElement.alt = 'Gambar utama';
					rowImage.replaceWith(imageElement);
				}

				if (selectionVersion !== galleryGedungSelectionVersion) return;

				document.querySelectorAll('#galleryGedungGrid .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 closeGalleryGedung() {
			const modal = document.getElementById('modalGaleriGedung');
			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