@extends('layouts.app')
@section('title', 'Kelola Data Wilayah')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-1"><i class="bi bi-geo-alt-fill text-primary"></i> Kelola Data Wilayah</h4>
        <p class="text-muted mb-0">Manajemen data provinsi, kota, kecamatan, dan kelurahan</p>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show">
    <i class="bi bi-check-circle"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Search --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="d-flex gap-2">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <input type="text" name="search" class="form-control form-control-sm"
                placeholder="Cari nama wilayah..." value="{{ $search }}">
            <button class="btn btn-primary btn-sm"><i class="bi bi-search"></i> Cari</button>
            <a href="{{ route('wilayah.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-x-lg"></i></a>
        </form>
    </div>
</div>

{{-- Tabs --}}
<ul class="nav nav-tabs mb-3">
    <li class="nav-item">
        <a class="nav-link {{ $tab === 'province' ? 'active' : '' }}"
            href="{{ route('wilayah.index', ['tab' => 'province', 'search' => $search]) }}">
            <i class="bi bi-map"></i> Provinsi
            <span class="badge bg-primary ms-1">{{ $provinces->total() }}</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link {{ $tab === 'regency' ? 'active' : '' }}"
            href="{{ route('wilayah.index', ['tab' => 'regency', 'search' => $search]) }}">
            <i class="bi bi-building"></i> Kota/Kabupaten
            <span class="badge bg-success ms-1">{{ $regencies->total() }}</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link {{ $tab === 'district' ? 'active' : '' }}"
            href="{{ route('wilayah.index', ['tab' => 'district', 'search' => $search]) }}">
            <i class="bi bi-signpost"></i> Kecamatan
            <span class="badge bg-warning text-dark ms-1">{{ $districts->total() }}</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link {{ $tab === 'village' ? 'active' : '' }}"
            href="{{ route('wilayah.index', ['tab' => 'village', 'search' => $search]) }}">
            <i class="bi bi-house"></i> Kelurahan/Desa
            <span class="badge bg-info text-dark ms-1">{{ $villages->total() }}</span>
        </a>
    </li>
</ul>

{{-- ===== TAB PROVINSI ===== --}}
@if($tab === 'province')
<div class="card">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h6 class="fw-semibold mb-0"><i class="bi bi-map text-primary"></i> Data Provinsi</h6>
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addProvinceModal">
            <i class="bi bi-plus-lg"></i> Tambah Provinsi
        </button>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr><th width="120">Kode</th><th>Nama Provinsi</th><th width="120">Aksi</th></tr>
            </thead>
            <tbody>
                @forelse($provinces as $p)
                <tr>
                    <td><code>{{ $p->id }}</code></td>
                    <td>{{ $p->name }}</td>
                    <td>
                        <div class="d-flex gap-1">
                            <button class="btn btn-sm btn-outline-warning"
                                onclick="editProvince('{{ $p->id }}', '{{ $p->name }}')">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form method="POST" action="{{ route('wilayah.province.destroy', $p) }}"
                                onsubmit="return confirm('Hapus provinsi ini? Semua kota/kecamatan/kelurahan di bawahnya ikut terhapus!')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="3" class="text-center text-muted py-4">Tidak ada data</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-white">{{ $provinces->appends(request()->query())->links() }}</div>
</div>

{{-- Modal Tambah Provinsi --}}
<div class="modal fade" id="addProvinceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Tambah Provinsi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('wilayah.province.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Kode Provinsi <span class="text-danger">*</span></label>
                        <input type="text" name="id" class="form-control" placeholder="Contoh: 99" maxlength="2" required>
                        <small class="text-muted">2 digit angka unik</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama Provinsi <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="Contoh: JAWA BARAT" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal Edit Provinsi --}}
<div class="modal fade" id="editProvinceModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Edit Provinsi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="editProvinceForm">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama Provinsi <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="editProvinceName" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

{{-- ===== TAB KOTA/KABUPATEN ===== --}}
@if($tab === 'regency')
<div class="card">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h6 class="fw-semibold mb-0"><i class="bi bi-building text-success"></i> Data Kota/Kabupaten</h6>
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addRegencyModal">
            <i class="bi bi-plus-lg"></i> Tambah Kota/Kabupaten
        </button>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr><th width="120">Kode</th><th>Nama</th><th>Provinsi</th><th width="120">Aksi</th></tr>
            </thead>
            <tbody>
                @forelse($regencies as $r)
                <tr>
                    <td><code>{{ $r->id }}</code></td>
                    <td>{{ $r->name }}</td>
                    <td><small class="text-muted">{{ $r->province->name ?? '-' }}</small></td>
                    <td>
                        <div class="d-flex gap-1">
                            <button class="btn btn-sm btn-outline-warning"
                                onclick="editRegency('{{ $r->id }}', '{{ $r->name }}')">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form method="POST" action="{{ route('wilayah.regency.destroy', $r) }}"
                                onsubmit="return confirm('Hapus kota ini?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="4" class="text-center text-muted py-4">Tidak ada data</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-white">{{ $regencies->appends(request()->query())->links() }}</div>
</div>

<div class="modal fade" id="addRegencyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Tambah Kota/Kabupaten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('wilayah.regency.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Kode <span class="text-danger">*</span></label>
                        <input type="text" name="id" class="form-control" placeholder="Contoh: 9901" maxlength="4" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Provinsi <span class="text-danger">*</span></label>
                        <select name="province_id" class="form-select" required>
                            <option value="">-- Pilih Provinsi --</option>
                            @foreach(App\Models\Province::orderBy('name')->get() as $prov)
                            <option value="{{ $prov->id }}">{{ $prov->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="Contoh: KABUPATEN BOGOR" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editRegencyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Edit Kota/Kabupaten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="editRegencyForm">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="editRegencyName" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

{{-- ===== TAB KECAMATAN ===== --}}
@if($tab === 'district')
<div class="card">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h6 class="fw-semibold mb-0"><i class="bi bi-signpost text-warning"></i> Data Kecamatan</h6>
        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#addDistrictModal">
            <i class="bi bi-plus-lg"></i> Tambah Kecamatan
        </button>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr><th width="120">Kode</th><th>Nama</th><th>Kota/Kabupaten</th><th width="120">Aksi</th></tr>
            </thead>
            <tbody>
                @forelse($districts as $d)
                <tr>
                    <td><code>{{ $d->id }}</code></td>
                    <td>{{ $d->name }}</td>
                    <td><small class="text-muted">{{ $d->regency->name ?? '-' }}</small></td>
                    <td>
                        <div class="d-flex gap-1">
                            <button class="btn btn-sm btn-outline-warning"
                                onclick="editDistrict('{{ $d->id }}', '{{ $d->name }}')">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form method="POST" action="{{ route('wilayah.district.destroy', $d) }}"
                                onsubmit="return confirm('Hapus kecamatan ini?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="4" class="text-center text-muted py-4">Tidak ada data</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-white">{{ $districts->appends(request()->query())->links() }}</div>
</div>

<div class="modal fade" id="addDistrictModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Tambah Kecamatan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('wilayah.district.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Kode <span class="text-danger">*</span></label>
                        <input type="text" name="id" class="form-control" placeholder="Contoh: 990101" maxlength="6" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Kota/Kabupaten <span class="text-danger">*</span></label>
                        <select name="regency_id" class="form-select" required>
                            <option value="">-- Pilih Kota/Kabupaten --</option>
                            @foreach(App\Models\Regency::with('province')->orderBy('name')->get() as $reg)
                            <option value="{{ $reg->id }}">{{ $reg->name }} ({{ $reg->province->name ?? '' }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="Contoh: BOGOR SELATAN" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editDistrictModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Edit Kecamatan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="editDistrictForm">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="editDistrictName" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

{{-- ===== TAB KELURAHAN ===== --}}
@if($tab === 'village')
<div class="card">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h6 class="fw-semibold mb-0"><i class="bi bi-house text-info"></i> Data Kelurahan/Desa</h6>
        <button class="btn btn-info btn-sm text-white" data-bs-toggle="modal" data-bs-target="#addVillageModal">
            <i class="bi bi-plus-lg"></i> Tambah Kelurahan
        </button>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr><th width="150">Kode</th><th>Nama</th><th>Kecamatan</th><th width="120">Aksi</th></tr>
            </thead>
            <tbody>
                @forelse($villages as $v)
                <tr>
                    <td><code>{{ $v->id }}</code></td>
                    <td>{{ $v->name }}</td>
                    <td><small class="text-muted">{{ $v->district->name ?? '-' }}</small></td>
                    <td>
                        <div class="d-flex gap-1">
                            <button class="btn btn-sm btn-outline-warning"
                                onclick="editVillage('{{ $v->id }}', '{{ $v->name }}')">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form method="POST" action="{{ route('wilayah.village.destroy', $v) }}"
                                onsubmit="return confirm('Hapus kelurahan ini?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="4" class="text-center text-muted py-4">Tidak ada data</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-white">{{ $villages->appends(request()->query())->links() }}</div>
</div>

<div class="modal fade" id="addVillageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Tambah Kelurahan/Desa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('wilayah.village.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Kode <span class="text-danger">*</span></label>
                        <input type="text" name="id" class="form-control" placeholder="Contoh: 9901010001" maxlength="10" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Kecamatan <span class="text-danger">*</span></label>
                        <select name="district_id" class="form-select" required>
                            <option value="">-- Pilih Kecamatan --</option>
                            @foreach(App\Models\District::with('regency')->orderBy('name')->get() as $dist)
                            <option value="{{ $dist->id }}">{{ $dist->name }} ({{ $dist->regency->name ?? '' }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="Contoh: BATUTULIS" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-info text-white">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editVillageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Edit Kelurahan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="editVillageForm">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="editVillageName" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
function editProvince(id, name) {
    document.getElementById('editProvinceName').value = name;
    document.getElementById('editProvinceForm').action = `/admin/wilayah/province/${id}`;
    new bootstrap.Modal(document.getElementById('editProvinceModal')).show();
}
function editRegency(id, name) {
    document.getElementById('editRegencyName').value = name;
    document.getElementById('editRegencyForm').action = `/admin/wilayah/regency/${id}`;
    new bootstrap.Modal(document.getElementById('editRegencyModal')).show();
}
function editDistrict(id, name) {
    document.getElementById('editDistrictName').value = name;
    document.getElementById('editDistrictForm').action = `/admin/wilayah/district/${id}`;
    new bootstrap.Modal(document.getElementById('editDistrictModal')).show();
}
function editVillage(id, name) {
    document.getElementById('editVillageName').value = name;
    document.getElementById('editVillageForm').action = `/admin/wilayah/village/${id}`;
    new bootstrap.Modal(document.getElementById('editVillageModal')).show();
}
</script>
@endpush