@extends('admin.layouts.app')
@section('title', 'Edit 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">Edit 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-pencil-square me-2"></i>Edit Data Warga</h2>
            <p class="text-muted mb-0">Ubah data warga: <strong>{{ $warga->nama }}</strong></p>
        </div>
        <a href="{{ route('admin.warga.show', $warga) }}" 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-warning">
            <h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>Form Edit Data Warga</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.warga.update', $warga) }}">
                @csrf
                @method('PUT')

                <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', $warga->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', $warga->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', $warga->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-lat="{{ $w->latitude }}" data-lng="{{ $w->longitude }}" {{ old('wilayah_id', $warga->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', $warga->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 {{ $warga->wilayah_id ? '' : 'd-none' }}" id="info-koordinat">
                            <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">
                                        {{ $warga->latitude }}, {{ $warga->longitude }}
                                    </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', $warga->no_telp) }}">
                        @error('no_telp')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Nomor telepon yang bisa dihubungi (opsional)</small>
                    </div>

                    <!-- Status Aktif (HANYA ADA DI EDIT) -->
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Status Warga</label>
                        <div class="card border-warning">
                            <div class="card-body py-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" name="is_aktif" id="is_aktif" value="1" {{ old('is_aktif', $warga->is_aktif) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="is_aktif">
                                        Warga Aktif
                                    </label>
                                </div>
                                <small class="text-muted d-block mt-1">
                                    Nonaktifkan jika warga sudah meninggal atau pindah alamat
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Buttons -->
                <div class="d-flex justify-content-between mt-5 pt-4 border-top">
                    <a href="{{ route('admin.warga.show', $warga) }}" 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-warning px-5">
                        <i class="bi bi-check-circle me-2"></i>Update Data Warga
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

    .form-switch .form-check-input {
        width: 3em;
        height: 1.5em;
        cursor: pointer;
    }
</style>
@endpush

@push('scripts')
<script>
    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.classList.remove('d-none');
        } else {
            info.classList.add('d-none');
        }
    });
</script>
@endpush
@endsection