@extends('layouts.admin')
@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('admin.dashboard') }}">Dashboard</a><span class="breadcrumb-sep">›</span><a href="{{ route('admin.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('admin.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 $desa)
                            <option value="{{ $desa->id }}" data-kecamatan="{{ $desa->kecamatan_id }}"
                                {{ old('desa_id')==$desa->id ? 'selected' : '' }}>
                                {{ $desa->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 & Perumahan</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" class="form-control @error('jumlah_kk') is-invalid @enderror"
                            value="{{ old('jumlah_kk') }}" min="0" placeholder="0">
                        @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="jumlahRumah" class="form-control @error('jumlah_rumah') is-invalid @enderror"
                            value="{{ old('jumlah_rumah') }}" min="0" placeholder="0" oninput="hitungOtomatis()">
                        @error('jumlah_rumah')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="form-row form-row-2" style="margin-top:16px;">
                    <div class="form-group mb-0">
                        <label class="form-label">RLH (Rumah Layak Huni) <span class="required">*</span></label>
                        <input type="number" name="rlh" id="rlhInput" class="form-control @error('rlh') is-invalid @enderror"
                            value="{{ old('rlh') }}" min="0" placeholder="0" oninput="hitungOtomatis()">
                        @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>

            {{-- Auto-calculated --}}
            <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 class="form-row form-row-2">
                    <div>
                        <label class="form-label">RTLH (Rumah Tidak Layak Huni)</label>
                        <div id="rtlhDisplay" style="font-size:1.4rem;font-weight:800;color:var(--danger);">0</div>
                        <span class="form-hint">= Jumlah Rumah − RLH</span>
                    </div>
                    <div>
                        <label class="form-label">Backlog</label>
                        <div id="backlogDisplay" style="font-size:1.4rem;font-weight:800;color:#b45309;">0</div>
                        <span class="form-hint">= Jumlah KK − Jumlah Rumah</span>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="form-section-title">Keterangan</div>
                <div class="form-group mb-0">
                    <textarea name="keterangan" class="form-control" placeholder="Keterangan tambahan (opsional)...">{{ old('keterangan') }}</textarea>
                </div>
            </div>

            <div style="display:flex;gap:8px;">
                <button type="submit" class="btn btn-primary">Simpan Data</button>
                <a href="{{ route('admin.data-perumahans.index') }}" class="btn btn-outline">Batal</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function hitungOtomatis() {
    const rumah = parseInt(document.getElementById('jumlahRumah').value) || 0;
    const rlh   = parseInt(document.getElementById('rlhInput').value) || 0;
    const kk    = parseInt(document.querySelector('[name=jumlah_kk]').value) || 0;
    document.getElementById('rtlhDisplay').textContent   = Math.max(0, rumah - rlh).toLocaleString('id-ID');
    document.getElementById('backlogDisplay').textContent = Math.max(0, kk - rumah).toLocaleString('id-ID');
}

// Filter desa by kecamatan
function filterDesa() {
    const kecId = document.getElementById('kecamatanFilter').value;
    const opts  = document.querySelectorAll('#desaSelect option');
    opts.forEach(opt => {
        if (!opt.value) return;
        opt.style.display = (!kecId || opt.dataset.kecamatan === kecId) ? '' : 'none';
    });
    document.getElementById('desaSelect').value = '';
}

document.querySelector('[name=jumlah_kk]')?.addEventListener('input', hitungOtomatis);
hitungOtomatis();
</script>
@endpush
@endsection