@extends('admin.layouts.app')

@section('title', 'Tambah Data Penduduk')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Tambah Data Penduduk Baru</h2>
            <a href="{{ route('admin.data-penduduk.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Kembali
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('admin.data-penduduk.store') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="tahun" class="form-label">Tahun <span class="text-danger">*</span></label>
                                <input type="number" name="tahun" id="tahun" value="{{ old('tahun', date('Y')) }}" class="form-control @error('tahun') is-invalid @enderror" min="1900" max="{{ date('Y') + 10 }}" placeholder="2025">
                                @error('tahun')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="is_active" class="form-label">Status</label>
                                <select name="is_active" id="is_active" class="form-select @error('is_active') is-invalid @enderror">
                                    <option value="1" {{ old('is_active', '1') == '1' ? 'selected' : '' }}>Aktif</option>
                                    <option value="0" {{ old('is_active') == '0' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Hanya boleh ada satu data aktif per tahun</div>
                            </div>
                            <div class="col-md-6">
                                <label for="laki_laki" class="form-label">Jumlah Laki-Laki <span class="text-danger">*</span></label>
                                <input type="number" name="laki_laki" id="laki_laki" value="{{ old('laki_laki') }}" class="form-control @error('laki_laki') is-invalid @enderror" min="0" placeholder="0">
                                @error('laki_laki')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="perempuan" class="form-label">Jumlah Perempuan <span class="text-danger">*</span></label>
                                <input type="number" name="perempuan" id="perempuan" value="{{ old('perempuan') }}" class="form-control @error('perempuan') is-invalid @enderror" min="0" placeholder="0">
                                @error('perempuan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12">
                                <label for="total_preview" class="form-label">Total Penduduk</label>
                                <input type="text" id="total_preview" class="form-control bg-light" readonly placeholder="Total akan dihitung otomatis">
                                <div class="form-text">Total dihitung otomatis dari jumlah laki-laki + perempuan</div>
                            </div>
                            <div class="col-12">
                                <label for="keterangan" class="form-label">Keterangan</label>
                                <textarea name="keterangan" id="keterangan" rows="4" class="form-control @error('keterangan') is-invalid @enderror" placeholder="Keterangan tambahan tentang data penduduk...">{{ old('keterangan') }}</textarea>
                                @error('keterangan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="d-flex justify-content-end gap-2 mt-4">
                            <a href="{{ route('admin.data-penduduk.index') }}" class="btn btn-outline-secondary">Batal</a>
                            <button type="submit" class="btn btn-success"><i class="fas fa-save me-2"></i>Simpan Data</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const lakiLakiInput = document.getElementById('laki_laki');
    const perempuanInput = document.getElementById('perempuan');
    const totalPreview = document.getElementById('total_preview');

    function updateTotal() {
        const lakiLaki = parseInt(lakiLakiInput.value) || 0;
        const perempuan = parseInt(perempuanInput.value) || 0;
        const total = lakiLaki + perempuan;
        totalPreview.value = total.toLocaleString('id-ID') + ' jiwa';
    }

    lakiLakiInput.addEventListener('input', updateTotal);
    perempuanInput.addEventListener('input', updateTotal);
    
    // Initial calculation
    updateTotal();
});
</script>
@endsection