@extends('layouts.app')

@section('content')
<div class="p-6">

    {{-- HEADER --}}
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-[#1c1d56]">
            Arsip Pemanggilan Anak
        </h1>

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

    {{-- LOOP TAHUN --}}
    @forelse($grouped as $tahun => $months)

        <div class="mb-8">

            {{-- TAHUN --}}
            <h2 class="text-xl font-semibold mb-3 text-gray-800 border-b pb-2">
                Tahun {{ $tahun }}
            </h2>

            {{-- LOOP BULAN --}}
            @foreach($months as $bulan => $items)

                <div class="mb-6">

                    <h3 class="text-md font-semibold text-gray-600 mb-2 pl-1">
                        {{ $bulan }}
                    </h3>

                    {{-- CARD TABEL: Diubah mengikuti cetakan Profil Anak Binaan (rounded-2xl, border-slate-200, overflow-hidden) --}}
                    <div class="bg-white rounded-2xl shadow border border-slate-200 overflow-hidden">

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

                            {{-- HEADER: Navy gelap, text-white, padding p-4 --}}
                            <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 Anak</th>
                                    <th class="p-4 text-center">Status</th>
                                    <th class="p-4 text-center w-[180px]">Aksi</th>
                                </tr>
                            </thead>

                            {{-- BODY: border-b, hover:bg-slate-50, padding p-4 --}}
                            <tbody>
                                @foreach($items as $item)
                                    <tr class="border-b hover:bg-slate-50 transition">

                                        <td class="p-4 text-slate-700">
                                            {{ \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">
                                            @php
                                                $jumlahAnak = is_array($item->anak_ids)
                                                    ? count($item->anak_ids)
                                                    : count(json_decode($item->anak_ids, true) ?? []);
                                            @endphp

                                            <span class="font-medium text-slate-700">
                                                {{ $jumlahAnak }} Anak
                                            </span>
                                        </td>

                                        <td class="p-4 text-center">
                                            @if($item->status == 'menunggu')
                                                <span class="text-xs px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full font-semibold">
                                                    Menunggu
                                                </span>
                                            @elseif($item->status == 'disetujui')
                                                <span class="text-xs px-3 py-1 bg-green-100 text-green-700 rounded-full font-semibold">
                                                    Disetujui
                                                </span>
                                            @elseif($item->status == 'hadir')
                                                <span class="text-xs px-3 py-1 bg-blue-100 text-blue-700 rounded-full font-semibold">
                                                    Hadir
                                                </span>
                                            @else
                                                <span class="text-xs px-3 py-1 bg-red-100 text-red-700 rounded-full font-semibold">
                                                    Batal
                                                </span>
                                            @endif
                                        </td>

                                        <td class="p-4">
                                            <div class="flex items-center justify-center gap-2">
                                                <a href="{{ route('staff.pemanggilan.show', $item->id) }}"
                                                class="px-3 py-2 bg-[#1c1d56] text-white text-xs rounded-lg font-semibold hover:opacity-90 transition shadow-sm">
                                                    Detail
                                                </a>
                                            </div>
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>

                        </table>

                    </div>
                </div>

            @endforeach

        </div>

    @empty

        <div class="text-center text-gray-500 py-10">
            Belum ada data pemanggilan
        </div>

    @endforelse

</div>
@endsection