@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title title="Admin Performance"
                    description="Track assigned students, conversions, and performance ratios for each admin." />

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 ui-title" style="margin-right: auto;">Filters</h6>
                            <x-table-controls :action="route('admin_performance')" searchName="search" searchPlaceholder="Search admin..."
                                :export="true" :exportRoute="route('admin_performance.export')" :saveRoute="route('admin_performance.saveFilteredTable')" />
                        </div>
                    </div>

                    <x-table :headers="['#', 'Admin Name', 'Assigned Students', 'Enrolled Another Course', 'Conversion %']" :paginator="$admins" emptyMessage="No admins found.">
                        @foreach ($admins as $index => $admin)
                            <tr>
                                <td class="ui-id text-center">{{ $admins->firstItem() + $index }}</td>
                                <td class="ui-title text-center">
                                    <a href="{{ config('app.HR_URL') . 'staffs/' . ($admin->id ?? '#') }}"
                                        class="text-decoration-none">
                                        {{ $admin->first_name }} {{ $admin->last_name }}
                                    </a>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">{{ $admin->total_assigned }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--info">{{ $admin->converted }}</span>
                                </td>
                                <td class="text-center">
                                    <div class="d-flex align-items-center justify-content-center gap-2">
                                        <div class="progress w-50" style="height: 6px;">
                                            <div class="progress-bar {{ $admin->percentage >= 50 ? 'bg-success' : ($admin->percentage >= 20 ? 'bg-warning' : 'bg-danger') }}"
                                                role="progressbar" style="width: {{ $admin->percentage }}%"
                                                aria-valuenow="{{ $admin->percentage }}" aria-valuemin="0"
                                                aria-valuemax="100"></div>
                                        </div>
                                        <span class="ui-title">{{ $admin->percentage }}%</span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection