@extends('layouts.app')

@section('content')

<div class="flex justify-between items-start mb-6">

    <div>
        <h1 class="text-2xl font-bold text-[#1c1d56]">
            Monitoring Tracking
        </h1>

        <p class="text-sm text-gray-500 mt-1">
            Pantau dan kelola data tracking anak binaan.
        </p>
    </div>

    <form action="{{ route('admin.tracking.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 w-64"
        >

        <button
            type="submit"
            class="bg-[#1c1d56] text-white px-4 py-2 rounded-xl">
            Cari
        </button>

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

    </form>

</div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">

        <div class="bg-white border border-slate-200 rounded-xl p-3 text-center shadow-sm">
            <div class="text-xs text-slate-500">
                Total
            </div>

            <div class="text-2xl font-bold text-slate-800">
                {{ $dashboard['total'] }}
            </div>
        </div>

        <div class="bg-green-50 border border-green-200 rounded-xl p-3 text-center shadow-sm">
            <div class="text-xs text-green-700">
                Aktif
            </div>

            <div class="text-2xl font-bold text-green-700">
                {{ $dashboard['aktif'] }}
            </div>
        </div>

        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-3 text-center shadow-sm">
            <div class="text-xs text-yellow-700">
                Hampir Bebas
            </div>

            <div class="text-2xl font-bold text-yellow-700">
                {{ $dashboard['hampir'] }}
            </div>
        </div>

        <div class="bg-red-50 border border-red-200 rounded-xl p-3 text-center shadow-sm">
            <div class="text-xs text-red-700">
                Bebas
            </div>

            <div class="text-2xl font-bold text-red-700">
                {{ $dashboard['bebas'] }}
            </div>
        </div>

    </div>

    <div class="bg-white rounded-xl shadow overflow-hidden">

        <table class="w-full">

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

                <tr>

                    <th class="p-3 text-left">
                        Nama
                    </th>

                    <th class="p-3 text-left">
                        Kode
                    </th>

                    <th class="p-3 text-left">
                        Status
                    </th>

                    <th class="p-3 text-left">
                        Total Remisi
                    </th>

                    <th class="p-3 text-left">
                        Sisa Masa Tahanan
                    </th>

                    <th class="p-3 text-left">
                        Aksi
                    </th>

                </tr>

            </thead>

            <tbody>

                @foreach($data as $item)

                <tr class="border-b">

                    <td class="p-3">
                        {{ $item->nama_anak }}
                    </td>

                    <td class="p-3">
                        {{ $item->kode }}
                    </td>

                    <td class="p-3">
                        {{ $item->status_akhir }}
                    </td>

                    <td class="p-3">
                        {{ $item->total_remisi }} Hari
                    </td>

                    <td class="p-3">
                    @php
                        $sisaHari = max(0, $item->sisa_hari);

                        $tahun = floor($sisaHari / 365);
                        $bulan = floor(($sisaHari % 365) / 30);
                        $hari = ($sisaHari % 365) % 30;
                    @endphp

                    @if($tahun > 0)
                        {{ $tahun }} Thn
                    @endif

                    @if($bulan > 0)
                        {{ $bulan }} Bln
                    @endif

                    @if($hari > 0 || $sisaHari == 0)
                        {{ $hari }} Hari
                    @endif                    
                    </td>

            <td class="p-3">

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

                    <!-- DETAIL -->
                    <a href="{{ route('admin.tracking.detail', $item->id) }}"
                    class="bg-[#1c1d56] text-white px-3 py-2 rounded-lg text-sm">
                        Detail
                    </a>

                    <!-- HAPUS -->
                    <form action="{{ route('admin.tracking.destroy', $item->id) }}"
                        method="POST"
                        onsubmit="return confirm('Yakin mau hapus data ini?')">

                        @csrf
                        @method('DELETE')

                        <button type="submit"
                                class="bg-red-600 text-white px-3 py-2 rounded-lg text-sm">
                            Hapus
                        </button>

                    </form>

                </div>

            </td>

                </tr>

                @endforeach

            </tbody>

        </table>

    </div>

</div>

@endsection