@php
    $admin = auth()->user()->isAdmin();
    $foto = $unit->foto;
    $maks = \App\Http\Controllers\GaleriUnitController::MAKS_FOTO;
@endphp

{{-- ================= FOTO UNIT ================= --}}
<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> Foto Rumah
            <span class="badge text-bg-light border">{{ $foto->count() }}/{{ $maks }}</span></span>
        @if($admin && $foto->count() < $maks)
            <button class="btn btn-sm btn-primary" data-bs-toggle="collapse" data-bs-target="#formFotoUnit"><i class="bi bi-upload"></i> Unggah Foto</button>
        @endif
    </div>

    @if($admin)
    <div class="collapse @if($errors->has('foto') || $errors->has('foto.*')) show @endif" id="formFotoUnit">
        <form method="POST" action="{{ route('unit.foto.simpan', $unit) }}" enctype="multipart/form-data" class="card-body border-bottom bg-light">
            @csrf
            <div class="mb-2">
                <label class="form-label small mb-1">Foto (bisa pilih beberapa, maks. 10 per unggahan, @ 8 MB)</label>
                <input type="file" name="foto[]" id="inputFotoUnit" 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 id="pratinjauFotoUnit" class="d-flex flex-wrap gap-2 mt-2"></div>
            </div>
            <div class="row g-2 align-items-end">
                <div class="col-md-9">
                    <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. Tampak depan, Ruang tamu, Dapur, Progres atap">
                </div>
                <div class="col-md-3"><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. Foto pertama menjadi sampul unit.</div>
        </form>
    </div>
    @endif

    <div class="card-body">
        @if($foto->isEmpty())
            <p class="text-muted text-center my-3">Belum ada foto unit ini.
                @if($admin) Unggah foto tampak depan, interior, atau progres pembangunan rumah.@endif</p>
        @else
            <div class="row g-2">
                @foreach($foto as $i => $f)
                <div class="{{ $loop->first ? 'col-12 col-md-8' : 'col-6 col-md-4' }}">
                    <div class="foto-item position-relative rounded overflow-hidden border h-100">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#modalFotoUnit" data-index="{{ $i }}" class="d-block ratio ratio-4x3 bg-light">
                            <img src="{{ $loop->first ? $f->url : $f->thumb_url }}" alt="{{ $f->keterangan ?: 'Foto '.$unit->label }}" loading="lazy" class="object-fit-cover">
                        </a>
                        @if($loop->first)<span class="position-absolute top-0 start-0 m-1 badge text-bg-dark bg-opacity-75"><i class="bi bi-star-fill text-warning"></i> Sampul</span>@endif
                        @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('unit.foto.ubah', $f) }}">@csrf @method('PUT')
                                <button name="geser" value="sampul" class="btn btn-sm btn-light py-0 px-1" title="Jadikan sampul"><i class="bi bi-star"></i></button></form>
                            <form method="POST" action="{{ route('unit.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('unit.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="#modalKetFotoUnit"
                                    data-action="{{ route('unit.foto.ubah', $f) }}" data-keterangan="{{ $f->keterangan }}"><i class="bi bi-pencil"></i></button>
                            <form method="POST" action="{{ route('unit.foto.hapus', $f) }}" data-confirm="Hapus foto ini?">@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 ================= --}}
@if($foto->isNotEmpty())
<div class="modal fade" id="modalFotoUnit" tabindex="-1" aria-label="Foto {{ $unit->label }}">
    <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">{{ $unit->perumahan->nama }} — {{ $unit->label }}</h6>
                <div class="ms-auto d-flex gap-2 align-items-center">
                    <a href="#" id="unduhFotoUnit" 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="carouselFotoUnit" class="carousel slide" data-bs-ride="false" data-bs-interval="false">
                    <div class="carousel-inner">
                        @foreach($foto as $i => $f)
                        <div class="carousel-item @if($i === 0) active @endif" data-unduh="{{ route('unit.foto.gambar', [$f, 'unduh' => 1]) }}"
                             data-ket="{{ ($f->keterangan ?: 'Foto '.$loop->iteration).' · '.$loop->iteration.'/'.$loop->count }}">
                            <img data-src="{{ $f->url }}" alt="{{ $f->keterangan ?: 'Foto '.$loop->iteration }}" class="d-block mx-auto" style="max-width: 100%; max-height: 78vh; object-fit: contain">
                        </div>
                        @endforeach
                    </div>
                    @if($foto->count() > 1)
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselFotoUnit" 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="#carouselFotoUnit" 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="ketFotoUnit"></div>
        </div>
    </div>
</div>
@endif

@if($admin)
<div class="modal fade" id="modalKetFotoUnit" 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>
    .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; } }
    #carouselFotoUnit .carousel-item { min-height: 40vh; }
    #pratinjauFotoUnit img { width: 72px; height: 54px; object-fit: cover; }
</style>
@endpush

@push('scripts')
<script>
(() => {
    const modal = document.getElementById('modalFotoUnit');
    if (modal) {
        const el = document.getElementById('carouselFotoUnit');
        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 ukuran penuh saat dibuka saja
            document.getElementById('unduhFotoUnit').href = item.dataset.unduh;
            document.getElementById('ketFotoUnit').textContent = item.dataset.ket;
        };
        modal.addEventListener('show.bs.modal', (e) => {
            const items = el.querySelectorAll('.carousel-item');
            const i = Math.min(parseInt(e.relatedTarget?.dataset.index ?? '0', 10), items.length - 1);
            carousel.to(i);
            tampil(items[i]);
        });
        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('modalKetFotoUnit');
    ket?.addEventListener('show.bs.modal', (e) => {
        ket.querySelector('form').action = e.relatedTarget.dataset.action;
        ket.querySelector('[name=keterangan]').value = e.relatedTarget.dataset.keterangan ?? '';
    });

    // Pratinjau foto sebelum diunggah
    const input = document.getElementById('inputFotoUnit');
    input?.addEventListener('change', () => {
        const wadah = document.getElementById('pratinjauFotoUnit');
        wadah.querySelectorAll('img').forEach((img) => URL.revokeObjectURL(img.src));
        wadah.innerHTML = '';
        [...input.files].slice(0, 10).forEach((file) => {
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            img.className = 'rounded border';
            img.title = file.name;
            wadah.appendChild(img);
        });
        if (input.files.length > 10) wadah.insertAdjacentHTML('beforeend', '<span class="small text-danger align-self-center">Maksimal 10 foto per unggahan</span>');
    });
})();
</script>
@endpush