@extends('admin.layout.tamplate')

@section('content')
<div class="p-6 md:p-10 space-y-8">
    @include('admin.layout.breadcumb')

      @include('admin.layout.alert')


    {{-- Toolbar --}}
    <div class="flex flex-col md:flex-row gap-4 justify-between items-center bg-white p-6 rounded-[2rem] shadow-sm border border-sky-50">
        <form action="{{ route('dashboard.program.kategori') }}" method="GET" class="flex flex-col md:flex-row gap-4 w-full md:w-auto items-center">
            <div class="relative w-full md:w-80">
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-sky-400 text-sm"></i>
                <input type="text" name="s" value="{{ request('s') }}" placeholder="Cari nama kategori..."
                    class="w-full pl-12 pr-4 py-3 rounded-xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
            </div>
            <button type="submit" class="w-full md:w-auto px-6 py-3 bg-sky-100 hover:bg-sky-200 text-sky-600 rounded-xl text-sm font-bold transition flex items-center justify-center gap-2">
                <i class="fas fa-magnifying-glass"></i> Cari
            </button>
        </form>

        <button onclick="toggleModal('modal-tambah')" class="w-full md:w-auto bg-sky-600 hover:bg-sky-700 text-white px-6 py-3 rounded-xl text-sm font-bold transition flex items-center justify-center gap-2 shadow-lg shadow-sky-100 transform active:scale-95">
            <i class="fas fa-plus"></i> Tambah Kategori
        </button>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-[2.5rem] overflow-hidden shadow-sm border border-sky-50">
        <table class="w-full text-left">
            <thead class="bg-sky-50/50 text-sky-900/40 text-[10px] uppercase font-bold tracking-widest">
                <tr>
                    <th class="px-8 py-5">Nama Kategori</th>
                    <th class="px-8 py-5">Slug</th>
                    <th class="px-8 py-5">Jumlah Program</th>
                    <th class="px-8 py-5 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-sky-50">
                @forelse($datas as $item)
                <tr class="hover:bg-sky-50/20 transition group">
                    <td class="px-8 py-6 font-bold text-sky-950 text-sm">{{ $item->name }}</td>
                    <td class="px-8 py-6 text-xs text-slate-400 font-mono">{{ $item->slug }}</td>
                    <td class="px-8 py-6">
                        <span class="px-3 py-1 bg-sky-50 text-sky-600 text-[10px] font-bold rounded-lg border border-sky-100">
                            {{ $item->programs_count ?? $item->programs()->count() }} Program
                        </span>
                    </td>
                    <td class="px-8 py-6">
                        <div class="flex justify-center gap-2">
                            <button onclick="editCategory({{ $item->id }}, '{{ $item->name }}')" class="w-9 h-9 flex items-center justify-center rounded-xl bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white transition shadow-sm"><i class="fas fa-edit text-xs"></i></button>
                            <form action="{{ route('dashboard.program.kategori.hapus', $item->id) }}" method="POST" onsubmit="return confirm('Hapus kategori ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="w-9 h-9 flex items-center justify-center rounded-xl bg-red-50 text-red-500 hover:bg-red-600 hover:text-white transition shadow-sm"><i class="fas fa-trash text-xs"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="4" class="px-8 py-20 text-center text-slate-400 text-xs font-bold uppercase tracking-widest">Tidak ada kategori</td></tr>
                @endforelse
            </tbody>
        </table>
        <div class="pagination-sky mt-6">
                    {{ $datas->links('pagination::tailwind') }}
                </div>
    </div>
</div>

{{-- Modal Tambah --}}
<div id="modal-tambah" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-sky-950/20 backdrop-blur-sm p-4">
    <div class="bg-white w-full max-w-md rounded-[2.5rem] shadow-2xl p-8 border border-sky-50">
        <h3 class="text-xl font-bold text-sky-950 mb-6">Tambah Kategori</h3>
        <form action="{{ route('dashboard.program.kategori.store') }}" method="POST" class="space-y-6">
            @csrf
            <div class="space-y-2">
                <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest">Nama Kategori</label>
                <input type="text" name="name" required placeholder="Misal: Pemberdayaan" class="w-full px-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
            </div>
            <div class="flex gap-3">
                <button type="button" onclick="toggleModal('modal-tambah')" class="flex-1 py-4 rounded-2xl bg-slate-100 text-slate-500 font-bold text-sm">Batal</button>
                <button type="submit" class="flex-[2] py-4 rounded-2xl bg-sky-600 text-white font-bold text-sm shadow-lg shadow-sky-100">Simpan</button>
            </div>
        </form>
    </div>
</div>

{{-- Modal Edit --}}
<div id="modal-edit" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-sky-950/20 backdrop-blur-sm p-4">
    <div class="bg-white w-full max-w-md rounded-[2.5rem] shadow-2xl p-8 border border-sky-50">
        <h3 class="text-xl font-bold text-sky-950 mb-6">Ubah Kategori</h3>
        <form id="form-edit" method="POST" class="space-y-6">
            @csrf @method('PUT')
            <div class="space-y-2">
                <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest">Nama Kategori</label>
                <input type="text" name="name" id="edit-name" required class="w-full px-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
            </div>
            <div class="flex gap-3">
                <button type="button" onclick="toggleModal('modal-edit')" class="flex-1 py-4 rounded-2xl bg-slate-100 text-slate-500 font-bold text-sm">Batal</button>
                <button type="submit" class="flex-[2] py-4 rounded-2xl bg-sky-600 text-white font-bold text-sm shadow-lg shadow-sky-100">Update</button>
            </div>
        </form>
    </div>
</div>

<script>
    function toggleModal(id) {
        const modal = document.getElementById(id);
        modal.classList.toggle('hidden');
    }

    function editCategory(id, name) {
        const form = document.getElementById('form-edit');
        const input = document.getElementById('edit-name');
        
        // Sesuaikan action form dengan ID
        form.action = `/dashboard/program-kategori/update/${id}`;
        input.value = name;
        
        toggleModal('modal-edit');
    }
</script>
@endsection