@extends('layouts.operator')
@section('title','Input Data Perumahan')
@section('page-title','Input Data Perumahan')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb">
            <a href="{{ route('operator.dashboard') }}">Dashboard</a>
            <span class="breadcrumb-sep">›</span>
            <a href="{{ route('operator.data-perumahans.index') }}">Data Perumahan</a>
            <span class="breadcrumb-sep">›</span>
            <span>Input Data</span>
        </div>
        <h1 class="page-header-title">Input Data Perumahan</h1>
        <p class="page-header-sub">
            {{ auth()->user()->desa?->nama }} — Tahun Rekapan: <strong>{{ $tahunRekapan->tahun }}</strong>
        </p>
    </div>
</div>

<div class="card" style="max-width:700px;">
    <div class="card-body">
        <form method="POST" action="{{ route('operator.data-perumahans.store') }}" id="formPerumahan">
            @csrf

            <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" id="jPenduduk"
                            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 (Rumah Layak Huni) <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>

            {{-- Hasil Otomatis --}}
            <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:.75rem;text-transform:uppercase;font-weight:700;color:var(--gray-500);margin-bottom:6px;">RTLH (Rumah Tidak Layak Huni)</div>
                        <div id="rtlhVal" style="font-size:2rem;font-weight:900;color:var(--danger);">0</div>
                        <div style="font-size:.77rem;color:var(--gray-500);margin-top:2px;">= Jumlah Rumah − RLH</div>
                    </div>
                    <div>
                        <div style="font-size:.75rem;text-transform:uppercase;font-weight:700;color:var(--gray-500);margin-bottom:6px;">Backlog</div>
                        <div id="backlogVal" style="font-size:2rem;font-weight:900;color:#b45309;">0</div>
                        <div style="font-size:.77rem;color:var(--gray-500);margin-top:2px;">= Jumlah KK − Jumlah Rumah</div>
                    </div>
                </div>
            </div>

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

            <div style="display:flex;gap:8px;flex-wrap:wrap;">
                <button type="submit" name="action" value="save" class="btn btn-outline">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="15" height="15"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
                    Simpan Draft
                </button>
                <button type="submit" name="action" value="submit" class="btn btn-primary"
                    onclick="return confirm('Ajukan data ini untuk diverifikasi?')">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="15" height="15"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
                    Ajukan untuk Verifikasi
                </button>
                <a href="{{ route('operator.data-perumahans.index') }}" class="btn btn-secondary">Batal</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function hitung() {
    const rumah = parseInt(document.getElementById('jRumah').value) || 0;
    const rlh   = parseInt(document.getElementById('rlh').value)    || 0;
    const kk    = parseInt(document.getElementById('jKK').value)    || 0;
    document.getElementById('rtlhVal').textContent   = Math.max(0, rumah - rlh).toLocaleString('id-ID');
    document.getElementById('backlogVal').textContent = Math.max(0, kk - rumah).toLocaleString('id-ID');
}
hitung();
</script>
@endpush
@endsection