@extends('layouts.app')

@section('content')

<div class="max-w-7xl mx-auto p-6">

    <!-- HEADER -->
    <div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-3xl font-bold text-[#1c1d56]">
            Profil Anak Binaan
        </h1>

        <p class="text-slate-500 text-sm mt-1">
            Daftar data anak binaan LPKA
        </p>
    </div>
    <div class="flex items-center gap-2">

        <form action="{{ route('admin.anak-binaan.index') }}"
            method="GET"
            class="flex items-center gap-2">

            <input
                type="text"
                name="search"
                value="{{ request('search') }}"
                placeholder="Cari nama anak..."
                class="border border-slate-300 rounded-xl px-4 py-2"
            >

            <button
                type="submit"
                class="bg-slate-600 hover:bg-slate-700 text-white px-4 py-2 rounded-xl"
            >
                Cari
            </button>

            @if(request('search'))
                <a href="{{ route('admin.anak-binaan.index') }}"
                class="bg-slate-200 hover:bg-slate-300 text-slate-700 px-4 py-2 rounded-xl">
                    Reset
                </a>
            @endif

        </form>

        <a href="{{ route('admin.anak-binaan.create') }}"
        class="bg-[#1c1d56] hover:opacity-90 text-white px-5 py-3 rounded-xl font-semibold transition">
            + Tambah Anak
        </a>

    </div>

    </div>

    <!-- CARD -->
    <div class="bg-white rounded-2xl shadow border border-slate-200 overflow-hidden">

        <table class="w-full text-sm border-collapse">

            <thead class="bg-[#1c1d56] text-white">

                <tr>

                    <th class="p-4 text-left">Nama</th>
                    <th class="p-4 text-left">Tanggal Lahir</th>
                    <th class="p-4 text-left">Tanggal Masuk</th>
                    <th class="p-4 text-left">Alamat</th>
                    <th class="p-4 text-center w-[180px]">Aksi</th>

                </tr>

            </thead>

            <tbody>

                @forelse($data as $a)

                <tr class="border-b hover:bg-slate-50 transition">

                    <td class="p-4 font-semibold">
                        {{ $a->nama }}
                    </td>

                    <td class="p-4">
                        {{ $a->tanggal_lahir }}
                    </td>

                    <td class="p-4">
                        {{ $a->tanggal_masuk }}
                    </td>

                    <td class="p-4">
                        {{ $a->alamat }}
                    </td>

                    <!-- AKSI -->
                    <td class="p-4">

                        <div class="flex items-center justify-center gap-2">

                            <!-- EDIT -->
                            <a href="{{ route('admin.anak-binaan.edit', $a->id) }}"
                               class="px-3 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg text-xs font-semibold transition">

                                Edit

                            </a>

                            <!-- DELETE -->
                            <form action="{{ route('admin.anak-binaan.destroy', $a->id) }}"
                                  method="POST">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                    onclick="return confirm('Hapus data ini?')"
                                    class="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-xs font-semibold transition">

                                    Hapus

                                </button>

                            </form>

                        </div>

                    </td>

                </tr>

                @empty

                <tr>

                    <td colspan="5"
                        class="text-center p-6 text-slate-500">

                        Belum ada data anak binaan

                    </td>

                </tr>

                @endforelse

            </tbody>

        </table>

    </div>

</div>

@endsection