{{-- ====================================================================================================
FILE        : resources/views/anggota/uploadfoto.blade.php
PEMBUAT     : Joudie Posumah
MODUL       : Anggota - Upload Pas Foto
TAHUN       : 2026

FUNGSI FILE :
- Menampilkan halaman upload pas foto anggota.
- Menampilkan foto saat ini menggunakan route pasfoto.show (serve via Storage::disk('public')->response),
  untuk menghindari masalah akses langsung /storage/... yang bisa 403 Forbidden.
- Menampilkan preview foto baru sebelum disimpan.
- Menggunakan Bootstrap validation pattern (needs-validation + novalidate + was-validated).

TERHUBUNG :
- Route halaman: anggota.foto.edit
- Route submit:  anggota.foto.update
- Route foto:    pasfoto.show  (GET /pasfoto/{filename})
==================================================================================================== --}}

@extends('layouts.dashboard')

@section('title', 'Upload Foto Anggota')
@section('page-title', 'Upload Foto Anggota')

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">

            {{-- Header --}}
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                <div>
                    <h1 class="h4 mb-1 fw-bold text-dark">Upload Foto Anggota</h1>
                    <div class="text-muted small">Silakan upload pas foto terbaru untuk kartu anggota.</div>
                </div>

                <a href="{{ route('anggota.index') }}" class="btn btn-outline-secondary btn-sm fw-semibold">
                    <i class="bi bi-arrow-left me-1"></i> Kembali
                </a>
            </div>

            {{-- Notifikasi --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show border-start border-4 border-success" role="alert">
                    <div class="fw-semibold">
                        <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show border-start border-4 border-danger" role="alert">
                    <div class="fw-semibold">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger border-start border-4 border-danger" role="alert">
                    <div class="fw-semibold">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        Upload gagal. Periksa file foto dan coba lagi.
                    </div>
                    <hr class="my-2">
                    <ul class="mb-0 small">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Card utama --}}
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light border-bottom">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div class="fw-bold text-dark">
                            <i class="bi bi-person-badge me-2"></i>
                            {{ $anggota->nama_lengkap }}
                        </div>
                        <div class="text-muted small">
                            NIK: <code class="text-muted">{{ $anggota->nik }}</code>
                        </div>
                    </div>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('anggota.foto.update', $anggota->anggota_id) }}"
                          method="POST"
                          enctype="multipart/form-data"
                          class="needs-validation"
                          novalidate>
                        @csrf

                        {{-- Info readonly --}}
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label small text-muted fw-semibold mb-1">NIK</label>
                                <input type="text"
                                       class="form-control form-control-sm bg-light"
                                       value="{{ $anggota->nik }}"
                                       readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small text-muted fw-semibold mb-1">Nama Lengkap</label>
                                <input type="text"
                                       class="form-control form-control-sm bg-light"
                                       value="{{ $anggota->nama_lengkap }}"
                                       readonly>
                            </div>
                        </div>

                        {{-- Foto saat ini + preview --}}
                        <div class="row g-3 mb-4">

                            {{-- Foto saat ini --}}
                            <div class="col-md-6">
                                <div class="border rounded-3 p-3 bg-light h-100">
                                    <div class="fw-semibold mb-2">
                                        <i class="bi bi-image me-1"></i> Foto saat ini
                                    </div>

                                    <div class="text-center">
                                        @php
                                            // Bikin URL foto yang konsisten:
                                            // 1) foto_render (kalau ada)
                                            // 2) route pasfoto.show dari basename($anggota->foto)
                                            $fotoSrc = null;

                                            if (!empty($anggota->foto_render)) {
                                                $fotoSrc = $anggota->foto_render;
                                            } elseif (!empty($anggota->foto)) {
                                                // kalau DB berisi "pasfoto/xxx.jpg" atau "xxx.jpg" atau pernah dobel, basename tetap ambil yang terakhir
                                                $filename = basename((string) $anggota->foto);
                                                $fotoSrc  = route('pasfoto.show', ['filename' => $filename]);
                                            }
                                        @endphp

                                        @if(!empty($fotoSrc))
                                            <img src="{{ $fotoSrc }}"
                                                 alt="Foto {{ $anggota->nama_lengkap }}"
                                                 class="img-thumbnail rounded-circle shadow-sm"
                                                 style="width: 170px; height: 170px; object-fit: cover;"
                                                 crossorigin="anonymous"
                                                 onerror="this.onerror=null; this.style.display='none'; document.getElementById('foto-current-fallback').classList.remove('d-none');">

                                            <div id="foto-current-fallback" class="py-4 text-muted d-none">
                                                <div class="mb-2"><i class="bi bi-person-circle fs-1"></i></div>
                                                <div class="small">Foto tidak dapat ditampilkan.</div>
                                                <div class="small text-muted mt-2" style="word-break: break-all;">
                                                    {{ $anggota->foto }}
                                                </div>
                                            </div>

                                            <div class="small text-muted mt-2" style="word-break: break-all;">
                                                {{ $anggota->foto }}
                                            </div>
                                        @else
                                            <div class="py-4 text-muted">
                                                <div class="mb-2"><i class="bi bi-person-circle fs-1"></i></div>
                                                <div class="small">Belum ada foto.</div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- Preview foto baru --}}
                            <div class="col-md-6">
                                <div class="border rounded-3 p-3 bg-white h-100">
                                    <div class="fw-semibold mb-2 text-primary">
                                        <i class="bi bi-eye me-1"></i> Preview foto baru
                                    </div>

                                    <div id="preview-wrapper" class="text-center">
                                        <div id="preview-empty" class="py-4 text-muted">
                                            <div class="mb-2"><i class="bi bi-card-image fs-1"></i></div>
                                            <div class="small">Pilih file untuk melihat preview.</div>
                                        </div>

                                        <img id="preview-img"
                                             src=""
                                             alt="Preview foto baru"
                                             class="img-thumbnail rounded-circle shadow-sm d-none"
                                             style="width: 170px; height: 170px; object-fit: cover;">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Input file --}}
                        <div class="mb-2">
                            <label for="foto" class="form-label fw-bold text-dark">
                                <i class="bi bi-upload me-1"></i> Pilih foto baru
                            </label>

                            <input type="file"
                                   name="foto"
                                   id="foto"
                                   class="form-control form-control-lg @error('foto') is-invalid @enderror"
                                   accept="image/jpeg,image/jpg,image/png"
                                   required>

                            <div class="invalid-feedback">
                                Foto wajib dipilih (JPG/PNG, maksimal 2MB).
                            </div>

                            @error('foto')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror

                            <div class="form-text small text-muted mt-2">
                                <div><strong>Format:</strong> JPG/PNG</div>
                                <div><strong>Maksimal:</strong> 2MB</div>
                                <div><strong>Ukuran ideal:</strong> 400×400px (persegi)</div>
                                <div><strong>Catatan:</strong> Foto harus pas sebagai pas foto pada kartu anggota.</div>
                            </div>
                        </div>

                        {{-- Tombol --}}
                        <div class="d-flex justify-content-end gap-2 pt-3 border-top mt-4">
                            <a href="{{ route('anggota.index') }}"
                               class="btn btn-outline-secondary px-4 fw-semibold">
                                <i class="bi bi-x-circle me-1"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-primary px-4 fw-semibold shadow-sm">
                                <i class="bi bi-cloud-arrow-up me-1"></i> Simpan
                            </button>
                        </div>

                    </form>
                </div>
            </div>

            {{-- Footer note kecil --}}
            <div class="text-muted small mt-3">
                Jika upload gagal, cek ukuran file dan pastikan format JPG/PNG.
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const inputFoto    = document.getElementById('foto');
    const previewImg   = document.getElementById('preview-img');
    const previewEmpty = document.getElementById('preview-empty');

    // Bootstrap custom validation UI
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach((form) => {
        form.addEventListener('submit', (event) => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });

    if (!inputFoto) return;

    inputFoto.addEventListener('change', function (e) {
        const file = e.target.files && e.target.files[0] ? e.target.files[0] : null;

        if (!file) {
            previewImg.classList.add('d-none');
            previewImg.src = '';
            previewEmpty.classList.remove('d-none');
            return;
        }

        if (file.size > 2 * 1024 * 1024) {
            alert('Ukuran file maksimal 2MB!');
            inputFoto.value = '';
            previewImg.classList.add('d-none');
            previewImg.src = '';
            previewEmpty.classList.remove('d-none');
            return;
        }

        const reader = new FileReader();
        reader.onload = function (event) {
            previewImg.src = event.target.result;
            previewImg.classList.remove('d-none');
            previewEmpty.classList.add('d-none');
        };
        reader.readAsDataURL(file);
    });
});
</script>
@endpush