@extends('layouts.app')
@section('title', 'Sertifikat Tanah — 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:680px">
    <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-map" style="color:var(--accent)"></i> Regulasi Sertifikat Tanah</h1>

    <div class="card">
        <form method="POST" action="{{ route('gov.land_certificate.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-building"></i> Detail Properti
            </div>
            
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                <div class="form-group">
                    <label class="form-label">Lokasi Kantor (@)</label>
                    <input type="text" name="at_kantor" class="form-control" value="{{ old('at_kantor') }}">
                </div>
                <div class="form-group">
                    <label class="form-label">Kategori Rumah *</label>
                    <select name="kategori_rumah" class="form-select" required>
                        <option value="">— Pilih Kategori —</option>
                        <option value="HIGH END HOUSE" {{ old('kategori_rumah') == 'HIGH END HOUSE' ? 'selected' : '' }}>HIGH END HOUSE</option>
                        <option value="MID END HOUSE" {{ old('kategori_rumah') == 'MID END HOUSE' ? 'selected' : '' }}>MID END HOUSE</option>
                        <option value="LOW END HOUSE" {{ old('kategori_rumah') == 'LOW END HOUSE' ? 'selected' : '' }}>LOW END HOUSE</option>
                    </select>
                    @error('kategori_rumah')<div class="form-error">{{ $message }}</div>@enderror
                </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-file-earmark-text"></i> Lampiran Dokumen
            </div>

            <div class="form-group">
                <label class="form-label">Scan KTP Pemohon *</label>
                <div class="photo-upload-area" id="uploadArea" onclick="document.getElementById('photoInput').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="photoInput" name="foto_ktp" accept="image/jpeg,image/png,image/webp" style="display:none" required onchange="previewImg(this, 'previewDiv', 'uploadArea', 'imgKtp')">
                <div id="previewDiv" style="display:none; margin-top:10px;">
                    <img id="imgKtp" src="" style="max-width:200px; border-radius:8px; border:1px solid var(--border);">
                    <button type="button" class="btn btn-secondary btn-sm mt-2" onclick="clearImg('photoInput', 'previewDiv', 'uploadArea', 'imgKtp')" style="display:block;">Hapus</button>
                </div>
                @error('foto_ktp')<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>
    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