@extends('layouts.app')
@section('title', 'Pendaftaran Pernikahan — Satu Mimpi Loket')

@push('styles')
<style>
    .photo-upload-area { border: 2px dashed var(--border); border-radius: 8px; padding: 24px; text-align: center; background: var(--bg-primary); cursor: pointer; transition: all .2s ease; position: relative; overflow: hidden; }
    .photo-upload-area:hover, .photo-upload-area.dragover { border-color: var(--accent); background: rgba(88, 101, 242, .05); }
    .photo-upload-area i { font-size: 2rem; color: var(--text-muted); margin-bottom: 8px; display: block; }
    .photo-upload-area:hover i { color: var(--accent); }
    .preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .preview-item { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
    .preview-item img { width: 100%; height: 100%; object-fit: cover; }
    .nik-check-result { font-size: .8rem; margin-top: 6px; min-height: 18px; color: var(--text-muted); }
    .nik-check-result.success { color: #22c55e; }
    .nik-check-result.error { color: #ef4444; }
</style>
@endpush

@section('content')
<div style="max-width:720px">
    <a href="{{ route('gov.dashboard') }}" class="btn btn-secondary" style="margin-bottom:20px"><i class="bi bi-arrow-left"></i> Kembali</a>
    <h1 class="page-title"><i class="bi bi-arrow-through-heart" style="color:var(--accent)"></i> Pendaftaran Pernikahan</h1>

    <div class="card">
        <form method="POST" action="{{ route('gov.marriage.store') }}" enctype="multipart/form-data">
            @csrf
            
            <div style="font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px">
                <i class="bi bi-calendar-event"></i> Jadwal & Lokasi
            </div>
            
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                <div class="form-group">
                    <label class="form-label">Tanggal Pernikahan *</label>
                    <input type="date" name="tanggal_pernikahan" class="form-control" value="{{ old('tanggal_pernikahan') }}" required>
                    @error('tanggal_pernikahan')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label">Lokasi Saat Ini (@)</label>
                    <input type="text" name="at_saat_ini" class="form-control" value="{{ old('at_saat_ini') }}">
                </div>
            </div>

            <hr class="divider">

            <div style="font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px">
                <i class="bi bi-people-fill"></i> Data Mempelai & Saksi
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                <div class="form-group">
                    <label class="form-label">NIK Suami *</label>
                    <input type="text" name="suami_nik" id="suamiNik" class="form-control" value="{{ old('suami_nik') }}" required>
                    <div id="suamiNikResult" class="nik-check-result"></div>
                    @error('suami_nik')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div class="form-group">
                    <label class="form-label">NIK Istri *</label>
                    <input type="text" name="istri_nik" id="istriNik" class="form-control" value="{{ old('istri_nik') }}" required>
                    <div id="istriNikResult" class="nik-check-result"></div>
                    @error('istri_nik')<div class="form-error">{{ $message }}</div>@enderror
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                <div class="form-group">
                    <label class="form-label">Nama Saksi</label>
                    <input type="text" name="saksi_nama" class="form-control" value="{{ old('saksi_nama') }}">
                </div>
                <div class="form-group">
                    <label class="form-label">Hubungan Saksi</label>
                    <input type="text" name="saksi_hubungan" class="form-control" value="{{ old('saksi_hubungan') }}">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Dinikahkan Oleh</label>
                <input type="text" name="dinikahkan_oleh" class="form-control" value="{{ old('dinikahkan_oleh') }}">
            </div>

            <hr class="divider">

            <div style="font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px">
                <i class="bi bi-images"></i> Lampiran (Bisa lebih dari satu)
            </div>

            <div class="form-group">
                <div class="photo-upload-area" id="uploadArea" onclick="document.getElementById('photoInput').click()">
                    <i class="bi bi-images"></i>
                    <div style="font-size:.85rem;font-weight:500;">Pilih Beberapa Foto (Opsional)</div>
                    <div style="font-size:.75rem;color:var(--text-muted);margin-top:4px;">KTP Mempelai / Bukti lainnya</div>
                </div>
                <input type="file" id="photoInput" name="lampiran[]" accept="image/jpeg,image/png,image/webp" style="display:none" multiple onchange="previewMultipleImgs(this)">
                
                <div class="preview-container" id="previewContainer"></div>
                <button type="button" id="clearBtn" class="btn btn-secondary btn-sm mt-2" style="display:none" onclick="clearMultipleImgs()">Hapus Semua Foto</button>
                @error('lampiran.*')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            <hr class="divider">
            <div style="display:flex;justify-content:flex-end">
                <button type="submit" class="btn btn-primary"><i class="bi bi-send-fill"></i> Kirim Permohonan</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const lookupNikUrl = @json(route('gov.marriage.lookup-nik'));

    function debounce(callback, wait = 350) {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => callback(...args), wait);
        };
    }

    async function lookupNik(input, resultEl) {
        const nik = input.value.trim();
        resultEl.className = 'nik-check-result';

        if (!nik) {
            resultEl.textContent = '';
            return;
        }

        resultEl.textContent = 'Mengecek NIK...';

        try {
            const response = await fetch(`${lookupNikUrl}?nik=${encodeURIComponent(nik)}`, {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            });
            const data = await response.json();

            if (!response.ok || !data.found) {
                resultEl.className = 'nik-check-result error';
                resultEl.textContent = 'NIK tidak ditemukan.';
                return;
            }

            resultEl.className = 'nik-check-result success';
            resultEl.textContent = `Nama: ${data.name}`;
        } catch (error) {
            resultEl.className = 'nik-check-result error';
            resultEl.textContent = 'Gagal mengecek NIK.';
        }
    }

    const bindNikLookup = (inputId, resultId) => {
        const input = document.getElementById(inputId);
        const result = document.getElementById(resultId);
        const check = debounce(() => lookupNik(input, result));

        input.addEventListener('input', check);
        if (input.value.trim()) {
            lookupNik(input, result);
        }
    };

    bindNikLookup('suamiNik', 'suamiNikResult');
    bindNikLookup('istriNik', 'istriNikResult');

    function previewMultipleImgs(input) {
        const container = document.getElementById('previewContainer');
        const clearBtn = document.getElementById('clearBtn');
        container.innerHTML = '';
        
        if (input.files && input.files.length > 0) {
            clearBtn.style.display = 'inline-block';
            Array.from(input.files).forEach(file => {
                if (file.size > 2 * 1024 * 1024) { alert('File ' + file.name + ' lebih dari 2MB! Akan diabaikan.'); return; }
                const reader = new FileReader();
                reader.onload = function(e) {
                    const div = document.createElement('div');
                    div.className = 'preview-item';
                    div.innerHTML = `<img src="${e.target.result}">`;
                    container.appendChild(div);
                }
                reader.readAsDataURL(file);
            });
        } else {
            clearBtn.style.display = 'none';
        }
    }
    function clearMultipleImgs() {
        document.getElementById('photoInput').value = '';
        document.getElementById('previewContainer').innerHTML = '';
        document.getElementById('clearBtn').style.display = 'none';
    }
</script>
@endpush