@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 Kunjungan
            </h1>
            <p class="text-slate-500 text-sm mt-1">
                Daftar monitoring pendaftaran kunjungan anak binaan LPKA
            </p>
        </div>
        
        <div class="flex items-center gap-2">
            <form action="{{ route('admin.kunjungan.index') }}" method="GET" class="flex items-center gap-2">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama..."
                    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.kunjungan.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">Anak Binaan</th>
                    <th class="p-4 text-left">Pengunjung</th>
                    <th class="p-4 text-center">Status</th>
                    <th class="p-4 text-center w-[220px]">Aksi</th>
                </tr>
            </thead>

            <tbody>
                @forelse($data as $k)
                <tr class="border-b hover:bg-slate-50 transition">
                    <td class="p-4 font-medium whitespace-nowrap">
                        {{ \Carbon\Carbon::parse($k->tanggal_kunjungan)->format('d-m-Y') }}
                    </td>

                    <td class="p-4 font-semibold text-slate-800">
                        {{ $k->nama_anak_binaan }}
                    </td>

                    <td class="p-4">
                        <div class="font-bold text-slate-800">{{ $k->nama_pengunjung }}</div>
                        <div class="text-slate-500 text-xs">{{ $k->no_id_pengunjung }}</div>
                        @if($k->pengikuts->count() > 0)
                            <div class="text-[10px] text-blue-600 font-semibold mt-1">
                                + {{ $k->pengikuts->count() }} Pengikut
                            </div>
                        @endif
                    </td>

                    <td class="p-4 text-center">
                        @php
                            $statusColors = [
                                'belum_hadir' => 'bg-yellow-100 text-yellow-800',
                                'hadir' => 'bg-blue-100 text-blue-800',
                                'batal' => 'bg-red-100 text-red-800'
                            ];
                        @endphp
                        <span class="{{ $statusColors[$k->status] ?? 'bg-gray-100' }} text-xs px-2.5 py-1 rounded-full font-semibold uppercase tracking-wider">
                            {{ ucfirst(str_replace('_', ' ', $k->status)) }}
                        </span>
                    </td>

                    <td class="p-4">
                        <div class="flex items-center justify-center gap-2">
                            <a href="{{ route('admin.kunjungan.show', $k->id) }}"
                               class="px-3 py-2 bg-slate-600 hover:bg-slate-700 text-white rounded-lg text-xs font-semibold transition">
                               Detail
                            </a>
                            
                            <form action="{{ route('admin.kunjungan.destroy', $k->id) }}" method="POST" onsubmit="return confirm('Yakin hapus data ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" 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 kunjungan yang terdaftar.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection