@php($admin = auth()->user()->isAdmin())
@php($foto = $perumahan->foto)

{{-- ================= GALERI FOTO MARKETING ================= --}}
<div class="card mb-3">
    <div class="card-header bg-white d-flex flex-wrap gap-2 justify-content-between align-items-center">
        <span class="fw-semibold"><i class="bi bi-images"></i> Galeri Foto Marketing
            <span class="badge text-bg-light border">{{ $foto->count() }}/{{ \App\Http\Controllers\GaleriPerumahanController::MAKS_FOTO }}</span></span>
        @if($admin && $foto->count() < \App\Http\Controllers\GaleriPerumahanController::MAKS_FOTO)
            <button class="btn btn-sm btn-primary" data-bs-toggle="collapse" data-bs-target="#formFoto"><i class="bi bi-upload"></i> Unggah Foto</button>
        @endif
    </div>

    @if($admin)
    <div class="collapse @error('foto') show @enderror @error('foto.*') show @enderror" id="formFoto">
        <form method="POST" action="{{ route('perumahan.foto.simpan', $perumahan) }}" enctype="multipart/form-data" class="card-body border-bottom bg-light">
            @csrf
            <div class="row g-2 align-items-end">
                <div class="col-md-5">
                    <label class="form-label small mb-1">Foto (bisa pilih beberapa, maks. 10 per unggahan, @ 8 MB)</label>
                    <input type="file" name="foto[]" multiple accept="image/png,image/jpeg,image/webp" required
                           class="form-control @error('foto') is-invalid @enderror @error('foto.*') is-invalid @enderror">
                    @error('foto')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    @foreach($errors->get('foto.*') as $pesan)<div class="invalid-feedback d-block">{{ $pesan[0] }}</div>@endforeach
                </div>
                <div class="col-md-5">
                    <label class="form-label small mb-1">Keterangan (opsional, untuk semua foto yang diunggah)</label>
                    <input type="text" name="keterangan" maxlength="150" class="form-control" placeholder="mis. Rumah contoh tipe 45, Taman bermain, Gerbang utama">
                </div>
                <div class="col-md-2"><button class="btn btn-primary w-100"><i class="bi bi-cloud-upload"></i> Unggah</button></div>
            </div>
            <div class="form-text">Format JPG/PNG/WebP. Foto besar otomatis diperkecil dan data lokasi (EXIF) dibuang.</div>
        </form>
    </div>
    @endif

    <div class="card-body">
        @if($foto->isEmpty())
            <p class="text-muted text-center my-3">Belum ada foto perumahan.
                @if($admin) Unggah foto rumah contoh, fasilitas & lingkungan untuk bahan promosi marketing.@endif</p>
        @else
            <div class="row g-2">
                @foreach($foto as $i => $f)
                <div class="col-6 col-md-4 col-lg-3">
                    <div class="foto-item position-relative rounded overflow-hidden border">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#modalGaleri" data-index="{{ $i + ($perumahan->landscape_url ? 1 : 0) }}" class="d-block ratio ratio-4x3 bg-light">
                            <img src="{{ $f->thumb_url }}" alt="{{ $f->keterangan ?: 'Foto '.$perumahan->nama }}" loading="lazy" class="object-fit-cover">
                        </a>
                        @if($f->keterangan)
                            <div class="small px-2 py-1 text-truncate" title="{{ $f->keterangan }}">{{ $f->keterangan }}</div>
                        @endif
                        @if($admin)
                        <div class="foto-aksi position-absolute top-0 end-0 m-1 d-flex gap-1">
                            @unless($loop->first)
                            <form method="POST" action="{{ route('perumahan.foto.ubah', $f) }}">@csrf @method('PUT')
                                <button name="geser" value="kiri" class="btn btn-sm btn-light py-0 px-1" title="Geser ke depan"><i class="bi bi-arrow-left"></i></button></form>
                            @endunless
                            @unless($loop->last)
                            <form method="POST" action="{{ route('perumahan.foto.ubah', $f) }}">@csrf @method('PUT')
                                <button name="geser" value="kanan" class="btn btn-sm btn-light py-0 px-1" title="Geser ke belakang"><i class="bi bi-arrow-right"></i></button></form>
                            @endunless
                            <button type="button" class="btn btn-sm btn-light py-0 px-1" title="Ubah keterangan"
                                    data-bs-toggle="modal" data-bs-target="#modalKeterangan"
                                    data-action="{{ route('perumahan.foto.ubah', $f) }}" data-keterangan="{{ $f->keterangan }}"><i class="bi bi-pencil"></i></button>
                            <form method="POST" action="{{ route('perumahan.foto.hapus', $f) }}" data-confirm="Hapus foto ini dari galeri?">@csrf @method('DELETE')
                                <button class="btn btn-sm btn-light text-danger py-0 px-1" title="Hapus"><i class="bi bi-trash"></i></button></form>
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

{{-- ================= LIGHTBOX (landscape + foto) ================= --}}
@if($perumahan->landscape_url || $foto->isNotEmpty())
<div class="modal fade" id="modalGaleri" tabindex="-1" aria-label="Galeri {{ $perumahan->nama }}">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark text-white border-0">
            <div class="modal-header border-0 py-2">
                <h6 class="modal-title" id="judulGaleri">{{ $perumahan->nama }}</h6>
                <div class="ms-auto d-flex gap-2 align-items-center">
                    <a href="#" id="unduhGaleri" class="btn btn-sm btn-outline-light"><i class="bi bi-download"></i> Unduh</a>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
            </div>
            <div class="modal-body p-0">
                <div id="carouselGaleri" class="carousel slide" data-bs-ride="false" data-bs-interval="false">
                    <div class="carousel-inner">
                        @php($slide = collect())
                        @if($perumahan->landscape_url)
                            @php($slide->push(['src' => $perumahan->landscape_url, 'unduh' => route('perumahan.landscape', [$perumahan, 'unduh' => 1]), 'ket' => 'Gambar landscape / site plan']))
                        @endif
                        @foreach($foto as $f)
                            @php($slide->push(['src' => $f->url, 'unduh' => route('perumahan.foto.gambar', [$f, 'unduh' => 1]), 'ket' => $f->keterangan ?: 'Foto '.$loop->iteration]))
                        @endforeach
                        @foreach($slide as $i => $s)
                        <div class="carousel-item @if($i === 0) active @endif" data-unduh="{{ $s['unduh'] }}" data-ket="{{ $s['ket'] }}">
                            <img data-src="{{ $s['src'] }}" alt="{{ $s['ket'] }}" class="d-block mx-auto" style="max-width: 100%; max-height: 78vh; object-fit: contain">
                        </div>
                        @endforeach
                    </div>
                    @if($slide->count() > 1)
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselGaleri" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Sebelumnya</span></button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselGaleri" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Berikutnya</span></button>
                    @endif
                </div>
            </div>
            <div class="modal-footer border-0 py-2 justify-content-center small text-white-50" id="ketGaleri"></div>
        </div>
    </div>
</div>
@endif

@if($admin)
<div class="modal fade" id="modalKeterangan" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" class="modal-content">
            @csrf @method('PUT')
            <div class="modal-header"><h6 class="modal-title">Ubah Keterangan Foto</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body"><input type="text" name="keterangan" maxlength="150" class="form-control" placeholder="Keterangan foto"></div>
            <div class="modal-footer"><button class="btn btn-primary">Simpan</button></div>
        </form>
    </div>
</div>
@endif

@push('styles')
<style>
    .landscape-banner { max-height: 380px; object-fit: cover; cursor: zoom-in; }
    .foto-item .foto-aksi { opacity: 0; transition: opacity .15s; }
    .foto-item:hover .foto-aksi, .foto-item:focus-within .foto-aksi { opacity: 1; }
    @media (hover: none) { .foto-item .foto-aksi { opacity: 1; } }
    #carouselGaleri .carousel-item { min-height: 40vh; }
</style>
@endpush

@push('scripts')
<script>
(() => {
    const modal = document.getElementById('modalGaleri');
    if (modal) {
        const el = document.getElementById('carouselGaleri');
        const carousel = bootstrap.Carousel.getOrCreateInstance(el, { interval: false, ride: false });
        const tampil = (item) => {
            const img = item.querySelector('img[data-src]');
            if (img) { img.src = img.dataset.src; img.removeAttribute('data-src'); }   // muat penuh saat dibuka saja
            document.getElementById('unduhGaleri').href = item.dataset.unduh;
            document.getElementById('ketGaleri').textContent = item.dataset.ket;
        };
        modal.addEventListener('show.bs.modal', (e) => {
            const i = parseInt(e.relatedTarget?.dataset.index ?? '0', 10);
            carousel.to(Math.min(i, el.querySelectorAll('.carousel-item').length - 1));
            tampil(el.querySelectorAll('.carousel-item')[i] ?? el.querySelector('.carousel-item'));
        });
        el.addEventListener('slide.bs.carousel', (e) => tampil(e.relatedTarget));
        modal.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') carousel.prev();
            if (e.key === 'ArrowRight') carousel.next();
        });
    }

    const ket = document.getElementById('modalKeterangan');
    ket?.addEventListener('show.bs.modal', (e) => {
        ket.querySelector('form').action = e.relatedTarget.dataset.action;
        ket.querySelector('[name=keterangan]').value = e.relatedTarget.dataset.keterangan ?? '';
    });
})();
</script>
@endpush