@extends('layouts.admin')
@section('title', 'Potensi Desa')
@section('page-title', 'Potensi Desa')

@section('content')
<div class="flex items-center justify-between mb-6">
    <p class="text-gray-500 text-sm">{{ $potentials->total() }} potensi terdaftar</p>
    <a href="{{ route('admin.potensi.create') }}" class="btn-primary">+ Tambah Potensi</a>
</div>

<div class="card-admin overflow-x-auto p-0">
    <table class="w-full">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="table-header">Foto</th>
                <th class="table-header">Nama</th>
                <th class="table-header">Kategori</th>
                <th class="table-header">Lokasi</th>
                <th class="table-header">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($potentials as $pot)
            <tr class="hover:bg-gray-50 transition-colors">
                <td class="table-cell">
                    @if($pot->foto_url)<img src="{{ $pot->foto_url }}" class="w-14 h-10 rounded object-cover">
                    @else<div class="w-14 h-10 bg-blue-50 rounded flex items-center justify-center text-xl">🌾</div>@endif
                </td>
                <td class="table-cell font-medium">{{ $pot->nama }}</td>
                <td class="table-cell"><span class="badge badge-blue">{{ $pot->kategori_label }}</span></td>
                <td class="table-cell text-gray-400 text-xs">{{ $pot->lokasi ?: '—' }}</td>
                <td class="table-cell">
                    <div class="flex items-center gap-2">
                        <a href="{{ route('admin.potensi.edit', $pot->id) }}" class="text-secondary hover:text-primary text-sm font-medium">Edit</a>
                        <form method="POST" action="{{ route('admin.potensi.destroy', $pot->id) }}" data-confirm-delete>
                            @csrf @method('DELETE')
                            <button class="text-red-500 hover:text-red-700 text-sm">Hapus</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="5" class="table-cell text-center text-gray-400 py-8">Belum ada data potensi.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $potentials->links() }}</div>
@endsection
