@extends('layouts.admin')
@section('title', 'Desa / Kelurahan')
@section('page-title', 'Data Desa / Kelurahan')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a><span class="breadcrumb-sep">›</span><span>Desa / Kelurahan</span></div>
        <h1 class="page-header-title">Data Desa / Kelurahan</h1>
    </div>
    <div class="page-header-actions">
        <a href="{{ route('admin.desas.create') }}" class="btn btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
            Tambah Desa
        </a>
    </div>
</div>

<form method="GET">
<div class="filter-bar">
    <div class="filter-group" style="flex:1;">
        <label class="filter-label">Cari</label>
        <input type="text" name="search" class="filter-control" placeholder="Nama desa..." value="{{ request('search') }}">
    </div>
    <div class="filter-group">
        <label class="filter-label">Kecamatan</label>
        <select name="kecamatan" class="filter-control">
            <option value="">Semua Kecamatan</option>
            @foreach($kecamatans as $kec)
            <option value="{{ $kec->id }}" {{ request('kecamatan')==$kec->id ? 'selected' : '' }}>{{ $kec->nama }}</option>
            @endforeach
        </select>
    </div>
    <div class="filter-actions">
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        <a href="{{ route('admin.desas.index') }}" class="btn btn-outline btn-sm">Reset</a>
    </div>
</div>
</form>

<div class="card">
    <div class="table-wrapper" style="border:none;">
        <table>
            <thead>
                <tr><th>#</th><th>Kode</th><th>Nama Desa / Kelurahan</th><th>Kecamatan</th><th>Jenis</th><th>Aksi</th></tr>
            </thead>
            <tbody>
                @forelse($desas as $desa)
                <tr>
                    <td class="text-muted">{{ $desas->firstItem() + $loop->index }}</td>
                    <td><span class="badge badge-gray">{{ $desa->kode }}</span></td>
                    <td class="fw-bold">{{ $desa->nama }}</td>
                    <td class="text-muted">{{ $desa->kecamatan?->nama }}</td>
                    <td>
                        <span class="badge {{ $desa->jenis === 'kelurahan' ? 'badge-primary' : 'badge-info' }}">
                            {{ ucfirst($desa->jenis) }}
                        </span>
                    </td>
                    <td>
                        <div class="td-actions">
                            <a href="{{ route('admin.desas.edit', $desa) }}" class="btn btn-outline btn-sm">Edit</a>
                            <form method="POST" action="{{ route('admin.desas.destroy', $desa) }}" onsubmit="return confirm('Hapus desa ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6">
                    <div class="empty-state"><div class="empty-state-icon">🏘️</div><div class="empty-state-title">Belum ada data desa</div></div>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($desas->hasPages())
    <div class="pagination-wrapper">
        <span class="pagination-info">{{ $desas->firstItem() }}–{{ $desas->lastItem() }} dari {{ $desas->total() }}</span>
        {{ $desas->links('components.pagination') }}
    </div>
    @endif
</div>
@endsection