@extends('layouts.petugas')
@section('title','Tambah Data Perumahan')
@section('page-title','Tambah Data Perumahan')
@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb"><a href="{{ route('petugas.dashboard') }}">Dashboard</a><span class="breadcrumb-sep">›</span><a href="{{ route('petugas.data-perumahans.index') }}">Data Perumahan</a><span class="breadcrumb-sep">›</span><span>Tambah</span></div>
        <h1 class="page-header-title">Tambah Data Perumahan</h1>
        <p class="page-header-sub">Tahun Rekapan: <strong>{{ $tahun->tahun }}</strong></p>
    </div>
</div>
<div class="card" style="max-width:700px;"><div class="card-body">
    <form method="POST" action="{{ route('petugas.data-perumahans.store') }}">
        @csrf
        <div class="form-section">
            <div class="form-section-title">Lokasi</div>
            <div class="form-row form-row-2">
                <div class="form-group mb-0">
                    <label class="form-label">Kecamatan</label>
                    <select id="kecamatanFilter" class="form-select" onchange="filterDesa()">
                        <option value="">— Pilih Kecamatan —</option>
                        @foreach($kecamatans as $kec)
                        <option value="{{ $kec->id }}">{{ $kec->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Desa / Kelurahan <span class="required">*</span></label>
                    <select name="desa_id" id="desaSelect" class="form-select @error('desa_id') is-invalid @enderror">
                        <option value="">— Pilih Desa —</option>
                        @foreach($desas as $d)
                        <option value="{{ $d->id }}" data-kecamatan="{{ $d->kecamatan_id }}" {{ old('desa_id')==$d->id ? 'selected' : '' }}>{{ $d->nama }}</option>
                        @endforeach
                    </select>
                    @error('desa_id')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
            </div>
        </div>
        <div class="form-section">
            <div class="form-section-title">Data Kependudukan</div>
            <div class="form-row form-row-3">
                <div class="form-group mb-0">
                    <label class="form-label">Jumlah Penduduk <span class="required">*</span></label>
                    <input type="number" name="jumlah_penduduk" class="form-control @error('jumlah_penduduk') is-invalid @enderror" value="{{ old('jumlah_penduduk') }}" min="0" placeholder="0">
                    @error('jumlah_penduduk')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Jumlah KK <span class="required">*</span></label>
                    <input type="number" name="jumlah_kk" id="jKK" class="form-control @error('jumlah_kk') is-invalid @enderror" value="{{ old('jumlah_kk') }}" min="0" placeholder="0" oninput="hitung()">
                    @error('jumlah_kk')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Jumlah Rumah <span class="required">*</span></label>
                    <input type="number" name="jumlah_rumah" id="jRumah" class="form-control @error('jumlah_rumah') is-invalid @enderror" value="{{ old('jumlah_rumah') }}" min="0" placeholder="0" oninput="hitung()">
                    @error('jumlah_rumah')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
            </div>
        </div>
        <div class="form-section">
            <div class="form-section-title">Data Perumahan</div>
            <div class="form-row form-row-2">
                <div class="form-group mb-0">
                    <label class="form-label">RLH <span class="required">*</span></label>
                    <input type="number" name="rlh" id="rlh" class="form-control @error('rlh') is-invalid @enderror" value="{{ old('rlh') }}" min="0" placeholder="0" oninput="hitung()">
                    @error('rlh')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Luas Permukiman (m²) <span class="required">*</span></label>
                    <input type="number" name="luas_permukiman" class="form-control @error('luas_permukiman') is-invalid @enderror" value="{{ old('luas_permukiman') }}" min="0" step="0.01" placeholder="0.00">
                    @error('luas_permukiman')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
            </div>
        </div>
        <div class="form-section" style="background:var(--primary-soft);border-color:var(--primary);">
            <div class="form-section-title" style="color:var(--primary-dark);">Hasil Perhitungan Otomatis</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
                <div>
                    <div style="font-size:.74rem;text-transform:uppercase;font-weight:700;color:var(--gray-500);margin-bottom:4px;">RTLH</div>
                    <div id="rtlhVal" style="font-size:1.8rem;font-weight:900;color:var(--danger);">0</div>
                    <div style="font-size:.76rem;color:var(--gray-500);">= Jumlah Rumah − RLH</div>
                </div>
                <div>
                    <div style="font-size:.74rem;text-transform:uppercase;font-weight:700;color:var(--gray-500);margin-bottom:4px;">Backlog</div>
                    <div id="backlogVal" style="font-size:1.8rem;font-weight:900;color:#b45309;">0</div>
                    <div style="font-size:.76rem;color:var(--gray-500);">= Jumlah KK − Jumlah Rumah</div>
                </div>
            </div>
        </div>
        <div class="form-section">
            <div class="form-section-title">Keterangan</div>
            <textarea name="keterangan" class="form-control" rows="3" placeholder="Opsional...">{{ old('keterangan') }}</textarea>
        </div>
        <div style="display:flex;gap:8px;">
            <button type="submit" class="btn btn-primary">Simpan Data</button>
            <a href="{{ route('petugas.data-perumahans.index') }}" class="btn btn-outline">Batal</a>
        </div>
    </form>
</div></div>
@push('scripts')
<script>
function hitung(){
    const r=parseInt(document.getElementById('jRumah').value)||0;
    const l=parseInt(document.getElementById('rlh').value)||0;
    const k=parseInt(document.getElementById('jKK').value)||0;
    document.getElementById('rtlhVal').textContent=Math.max(0,r-l).toLocaleString('id-ID');
    document.getElementById('backlogVal').textContent=Math.max(0,k-r).toLocaleString('id-ID');
}
function filterDesa(){
    const id=document.getElementById('kecamatanFilter').value;
    document.querySelectorAll('#desaSelect option').forEach(o=>{
        if(!o.value)return;
        o.style.display=(!id||o.dataset.kecamatan===id)?'':'none';
    });
    document.getElementById('desaSelect').value='';
}
hitung();
</script>
@endpush
@endsection