@extends('layouts.app')

@section('content')

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

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

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

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

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

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

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

            </form>

        </div>
    </div>

    <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">Tanggal</th>
            <th class="p-4 text-left">Keperluan</th>
            <th class="p-4 text-center">Jumlah</th>
            <th class="p-4 text-center">Status</th>
            <th class="p-4 text-center">Update Status</th>
            <th class="p-4 text-center">Aksi</th>
        </tr>
    </thead>
<tbody>
    @forelse($data as $item)
    @php
        $totalAnak = is_array($item->anak_ids) ? count($item->anak_ids) : (json_decode($item->anak_ids) ? count(json_decode($item->anak_ids)) : 0);
    @endphp

    <tr class="border-b hover:bg-slate-50 transition">
        <td class="p-4 whitespace-nowrap">{{ \Carbon\Carbon::parse($item->tanggal)->format('d-m-Y') }}</td>
        <td class="p-4 font-semibold text-slate-800">{{ $item->keperluan }}</td>
        <td class="p-4 text-center font-bold text-blue-600">{{ $totalAnak }}</td>
        
        <td class="p-4 text-center">
            @if($item->status === 'menunggu')
                <span class="bg-yellow-100 text-yellow-800 text-xs px-2.5 py-1 rounded-full font-bold uppercase">Menunggu</span>
            @elseif($item->status === 'disetujui')
                <span class="bg-green-100 text-green-800 text-xs px-2.5 py-1 rounded-full font-bold uppercase">Disetujui</span>
            @elseif($item->status === 'hadir')
                <span class="bg-blue-100 text-blue-800 text-xs px-2.5 py-1 rounded-full font-bold uppercase">Hadir</span>
            @else
                <span class="bg-red-100 text-red-800 text-xs px-2.5 py-1 rounded-full font-bold uppercase">Batal</span>
            @endif
        </td>

        <td class="p-4">
            <div class="flex items-center justify-center gap-1.5">
                @if($item->status === 'menunggu')
                    <form action="{{ route('admin.pemanggilan.updateStatus', [$item->id, 'disetujui']) }}" method="POST">
                        @csrf
                        <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-lg text-xs font-semibold transition">Setuju</button>
                    </form>
                    <form action="{{ route('admin.pemanggilan.updateStatus', [$item->id, 'batal']) }}" method="POST">
                        @csrf
                        <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-xs font-semibold transition">Batal</button>
                    </form>
                @else
                    <form action="{{ route('admin.pemanggilan.updateStatus', [$item->id, 'menunggu']) }}" method="POST">
                        @csrf
                        <button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg text-xs font-semibold transition">Reset</button>
                    </form>
                @endif
            </div>
        </td>

        <td class="p-4">
            <div class="flex items-center justify-center gap-1.5">
                <a href="{{ route('admin.pemanggilan.show', $item->id) }}" 
                   class="bg-slate-600 hover:bg-slate-700 text-white px-3 py-1 rounded-lg text-xs font-semibold transition inline-block">Detail</a>
                
                <form action="{{ route('admin.pemanggilan.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Hapus data ini?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="bg-red-800 hover:bg-red-900 text-white px-3 py-1 rounded-lg text-xs font-semibold transition">Hapus</button>
                </form>
            </div>
        </td>
    </tr>
    @empty
    <tr><td colspan="6" class="text-center p-6 text-slate-500">Belum ada data.</td></tr>
    @endforelse
</tbody>


    </div>

</div>

@endsection