@extends('layouts.main')


@php
    $hasNotification = true;
@endphp

@section('content')
    <div class="flex flex-col gap-4 bg-white rounded p-10 min-h-screen">

        <div class="flex justify-between items-center">
            <p class="flex items-center text-xs">
                <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
                <span>Dashboard <i class="fa-solid fa-chevron-right"></i> Senarai Agensi</span>
            </p>
            <div class="relative cursor-pointer">
                @if ($hasNotification)
                    <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
                @endif

                <i class="fa-regular fa-bell text-md hover:text-[#BD8736]"></i>
            </div>
        </div>

        <div class="flex" style="gap:10px">
            <div class="relative w-fit">
                <input type="text" placeholder="Carian"
                    class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
                <div class="pointer-events-none absolute text-gray-500 text-xs" style="top: 50%; transform: translateY(-50%); right:10px">
                    <i class="fas fa-search"></i>
                </div>
            </div>

            <div class="relative w-fit">
                <select
                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="all" selected>Agensi</option>
                    <option value="pknp">PKNP</option>
                    <option value="pkpp">PKPP</option>
                </select>
            </div>

            <div class="relative w-fit">
                <select
                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="all" selected>Status Prestasi</option>
                    <option value="1">Lemah</option>
                    <option value="2">Sederhana</option>
                    <option value="3">Baik</option>
                </select>
            </div>

        </div>

        <div class="border rounded">
            <h5 class="font-semibold m-5">Senarai Agensi</h5>
            <div class="overflow-x-auto overflow-hidden rounded-[10px]">
                <table class="w-full text-sm text-left text-gray-700 border-collapse">
                    <thead>
                        <tr>
                            <th class="text-xs px-4 py-2">Bil</th>
                            <th class="text-xs px-4 py-2">S-GLC to Agensi</th>
                            <th class="text-xs px-4 py-2 text-center">Jumlah Peojek Aktif</th>
                            <th class="text-xs px-4 py-2 text-center">Status Prestasi</th>
                            <th class="text-xs px-4 py-2 text-center">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($agencys as $index => $agency)
                            <tr>
                                <td class="px-4 py-2">{{ $index + 1 }}</td>
                                <td class="px-4 py-2">{{ $agency['name'] }}</td>
                                <td class="px-4 py-2 text-center">{{ $agency['active_count'] }}
                                </td>
                                <td class="px-4 py-2 text-center">
                                    @switch($agency['status'])
                                        @case(1)
                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                                style="color:#CE4C4A; background-color:#FFF5F4; border-color:#ef4444;width:100%">
                                                Lemah
                                            </div>
                                        @break

                                        @case(2)
                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
                                                Sederhana
                                            </div>
                                        @break

                                        @case(3)
                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452; width:100%">
                                                Baik
                                            </div>
                                        @break

                                        @default
                                    @endswitch
                                </td>
                                <td class="px-4 py-2 text-center">
                                    <a href="#" class="text-blue-800 underline">Lihat Projek</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
@endsection