@extends('layouts.app')
@section('title', 'Pergantian Nama — 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); }
</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-file-person" style="color:var(--accent)"></i> Formulir Pergantian Nama</h1>

    <div class="card">
        <form method="POST" action="{{ route('gov.name_change.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-person-lines-fill"></i> Identitas Baru
            </div>
            
            <div class="form-group">
                <label class="form-label">Nama Baru yang Diajukan *</label>
                <input type="text" name="nama_baru" class="form-control" value="{{ old('nama_baru') }}" required>
                @error('nama_baru')<div class="form-error">{{ $message }}</div>@enderror
            </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-file-earmark-text"></i> Lampiran Dokumen
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
                <div class="form-group">
                    <label class="form-label">Scan KTP Lama *</label>
                    <div class="photo-upload-area" id="uploadAreaKtp" onclick="document.getElementById('photoInputKtp').click()">
                        <i class="bi bi-cloud-arrow-up"></i>
                        <div style="font-size:.85rem;font-weight:500;">Unggah KTP</div>
                    </div>
                    <input type="file" id="photoInputKtp" name="lampiran_ktp" accept="image/jpeg,image/png,image/webp" style="display:none" required onchange="previewImg(this, 'previewKtp', 'uploadAreaKtp', 'imgKtp')">
                    <div id="previewKtp" style="display:none; margin-top:10px;">
                        <img id="imgKtp" src="" style="max-width:100%; border-radius:8px; border:1px solid var(--border);">
                        <button type="button" class="btn btn-secondary btn-sm mt-2" onclick="clearImg('photoInputKtp', 'previewKtp', 'uploadAreaKtp', 'imgKtp')">Hapus</button>
                    </div>
                    @error('lampiran_ktp')<div class="form-error">{{ $message }}</div>@enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Bukti Expungement (DOJ) *</label>
                    <div class="photo-upload-area" id="uploadAreaExp" onclick="document.getElementById('photoInputExp').click()">
                        <i class="bi bi-cloud-arrow-up"></i>
                        <div style="font-size:.85rem;font-weight:500;">Unggah Expungement</div>
                    </div>
                    <input type="file" id="photoInputExp" name="lampiran_expungement" accept="image/jpeg,image/png,image/webp" style="display:none" required onchange="previewImg(this, 'previewExp', 'uploadAreaExp', 'imgExp')">
                    <div id="previewExp" style="display:none; margin-top:10px;">
                        <img id="imgExp" src="" style="max-width:100%; border-radius:8px; border:1px solid var(--border);">
                        <button type="button" class="btn btn-secondary btn-sm mt-2" onclick="clearImg('photoInputExp', 'previewExp', 'uploadAreaExp', 'imgExp')">Hapus</button>
                    </div>
                    @error('lampiran_expungement')<div class="form-error">{{ $message }}</div>@enderror
                </div>
            </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>
    function previewImg(input, previewDivId, uploadAreaId, imgId) {
        if (input.files && input.files[0]) {
            if (input.files[0].size > 2 * 1024 * 1024) { alert('Maksimal 2MB!'); input.value = ''; return; }
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById(imgId).src = e.target.result;
                document.getElementById(previewDivId).style.display = 'block';
                document.getElementById(uploadAreaId).style.display = 'none';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    function clearImg(inputId, previewDivId, uploadAreaId, imgId) {
        document.getElementById(inputId).value = '';
        document.getElementById(imgId).src = '';
        document.getElementById(previewDivId).style.display = 'none';
        document.getElementById(uploadAreaId).style.display = 'block';
    }
</script>
@endpush