@extends('admin.layouts.app')
@section('title', 'Tambah Warga')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.warga.index') }}">Data Warga</a></li>
            <li class="breadcrumb-item active">Tambah Warga</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1"><i class="bi bi-person-plus-fill me-2"></i>Tambah Data Warga</h2>
            <p class="text-muted mb-0">Input data warga baru untuk calon penerima BLT-DD</p>
        </div>
        <a href="{{ route('admin.warga.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Kembali
        </a>
    </div>

    <!-- Alert Error -->
    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <strong>Terdapat kesalahan:</strong>
        <ul class="mb-0 mt-2">
            @foreach($errors->all() as $e)
            <li>{{ $e }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- Form Card -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="bi bi-file-earmark-plus me-2"></i>Form Data Warga</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.warga.store') }}">
                @csrf

                <div class="row g-4">
                    <!-- NIK -->
                    <div class="col-md-6">
                        <label class="form-label fw-bold">
                            NIK <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="nik" class="form-control form-control-lg @error('nik') is-invalid @enderror" maxlength="16" placeholder="16 digit NIK" value="{{ old('nik') }}" required>
                        @error('nik')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Nomor Induk Kependudukan (16 digit)</small>
                    </div>

                    <!-- Nama -->
                    <div class="col-md-6">
                        <label class="form-label fw-bold">
                            Nama Lengkap <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="nama" class="form-control form-control-lg @error('nama') is-invalid @enderror" placeholder="Nama lengkap sesuai KTP" value="{{ old('nama') }}" required>
                        @error('nama')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Alamat -->
                    <div class="col-12">
                        <label class="form-label fw-bold">
                            Alamat <span class="text-danger">*</span>
                        </label>
                        <textarea name="alamat" class="form-control @error('alamat') is-invalid @enderror" rows="3" placeholder="Contoh: Jl. Mawar No. 15" required>{{ old('alamat') }}</textarea>
                        @error('alamat')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Dropdown Wilayah -->
                    <div class="col-md-8">
                        <label class="form-label fw-bold">
                            Dusun / RW <span class="text-danger">*</span>
                        </label>
                        <select name="wilayah_id" id="wilayah_id" class="form-select form-select-lg @error('wilayah_id') is-invalid @enderror" required>
                            <option value="">-- Pilih Dusun & RW --</option>
                            @foreach($wilayah as $w)
                            <option value="{{ $w->id }}" data-dusun="{{ $w->dusun }}" data-rw="{{ $w->rw }}" data-lat="{{ $w->latitude }}" data-lng="{{ $w->longitude }}" {{ old('wilayah_id') == $w->id ? 'selected' : '' }}>
                                Dusun {{ $w->dusun }} — RW {{ $w->rw }}
                            </option>
                            @endforeach
                        </select>
                        @error('wilayah_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Pilih dusun dan RW tempat tinggal</small>
                    </div>

                    <!-- RT -->
                    <div class="col-md-4">
                        <label class="form-label fw-bold">RT</label>
                        <input type="text" name="rt" class="form-control form-control-lg @error('rt') is-invalid @enderror" placeholder="001" maxlength="5" value="{{ old('rt') }}">
                        @error('rt')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Nomor RT (opsional)</small>
                    </div>

                    <!-- Info koordinat otomatis -->
                    <div class="col-12">
                        <div class="alert alert-info py-3 px-4 mb-0" id="info-koordinat" style="display:none;">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-geo-alt-fill fs-4 me-3"></i>
                                <div>
                                    <strong>Koordinat otomatis:</strong>
                                    <span class="font-monospace" id="txt-koordinat"></span>
                                    <br>
                                    <small class="text-muted">Titik koordinat pusat RW yang dipilih (bukan lokasi rumah spesifik)</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- No Telp -->
                    <div class="col-md-6">
                        <label class="form-label fw-bold">No. Telepon</label>
                        <input type="text" name="no_telp" class="form-control form-control-lg @error('no_telp') is-invalid @enderror" placeholder="08xxxxxxxxxx" value="{{ old('no_telp') }}">
                        @error('no_telp')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Nomor telepon yang bisa dihubungi (opsional)</small>
                    </div>

                    <!-- KOLOM is_aktif DIHAPUS -->
                    <!-- Warga baru pasti aktif, tidak perlu checkbox -->
                </div>

                <!-- Buttons -->
                <div class="d-flex justify-content-between mt-5 pt-4 border-top">
                    <a href="{{ route('admin.warga.index') }}" class="btn btn-lg btn-outline-secondary">
                        <i class="bi bi-x-circle me-2"></i>Batal
                    </a>
                    <button type="submit" class="btn btn-lg btn-success px-5">
                        <i class="bi bi-check-circle me-2"></i>Simpan Data Warga
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
    .form-control-lg,
    .form-select-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
</style>
@endpush

@push('scripts')
<script>
    // Tampilkan info koordinat saat dropdown dipilih
    document.getElementById('wilayah_id').addEventListener('change', function() {
        const opt = this.options[this.selectedIndex];
        const lat = opt.dataset.lat;
        const lng = opt.dataset.lng;
        const info = document.getElementById('info-koordinat');
        const teks = document.getElementById('txt-koordinat');

        if (this.value) {
            teks.textContent = lat + ', ' + lng;
            info.style.display = 'block';
        } else {
            info.style.display = 'none';
        }
    });
</script>
@endpush
@endsection