pasca/resources/views/agency_performance.blade.php

@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 hidden md:block">
                @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">Nama Syarikat</th>
                            <th class="text-xs px-4 py-2 text-center">Siap / Lambat (%)</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['company_name'] }}
                                </td>
                                <td class="px-4 py-2 text-center">
                                    <div class="flex items-center gap-2">
                                        <span class="font-bold text-xs">{{ $agency['percent'] }}</span>

                                        @php
                                            $percent = $agency['percent'];
                                            $barColor = match (true) {
                                                $percent < 30 => 'bg-[#CE4C4A]', // Red
                                                $percent < 66 => 'bg-[#E5A20A]', // Yellow
                                                default => 'bg-[#49B452]', // Green
                                            };
                                        @endphp

                                        <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                            <div class="{{ $barColor }} h-full rounded-full transition-all duration-500"
                                                style="width: {{ $percent }}%">
                                            </div>
                                        </div>
                                    </div>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
@endsection