@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto space-y-6 relative">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-black text-gray-900">Fleet Management</h1>
            <p class="text-gray-500 font-bold mt-1">Approve KYC, activate IDs, and manage your technicians.</p>
        </div>
        <button class="bg-[#109E38] hover:bg-green-700 text-white px-6 py-3 rounded-xl font-black shadow-lg transition-transform hover:scale-105 flex items-center gap-2">
            <i data-lucide="user-plus" class="w-5 h-5"></i> Add New Tech
        </button>
    </div>

    <h2 class="text-xl font-black text-gray-900 mb-4 flex items-center gap-2"><i data-lucide="shield-alert" class="text-yellow-500"></i> KYC Pending Approvals</h2>
    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden mb-10">
        <table class="w-full text-left border-collapse">
            <thead class="bg-gray-50 border-b border-gray-100 text-xs font-black text-gray-400 uppercase tracking-wider">
                <tr>
                    <th class="px-6 py-4">Name & Phone</th>
                    <th class="px-6 py-4">Status</th>
                    <th class="px-6 py-4 text-right">Owner Action</th>
                </tr>
            </thead>
            <tbody class="text-sm font-bold divide-y divide-gray-50">
                @forelse($pendingTechs as $tech)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4">
                        <p class="text-gray-900 text-base font-black">{{ $tech->name }}</p>
                        <p class="text-xs text-gray-500">{{ $tech->phone }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <span class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded text-xs font-black border border-yellow-200">Pending Review</span>
                    </td>
                    <td class="px-6 py-4 text-right space-x-2">
                        <a href="/admin/approve-tech/{{ $tech->id }}" class="bg-[#109E38] text-white px-4 py-2 rounded-lg font-black text-xs shadow-md hover:bg-green-700 inline-block">Approve & Activate</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="px-6 py-8 text-center text-gray-400 font-bold">No pending approvals right now.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <h2 class="text-xl font-black text-gray-900 mb-4 flex items-center gap-2"><i data-lucide="check-circle-2" class="text-[#109E38]"></i> Your Fleet</h2>
    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead class="bg-gray-50 border-b border-gray-100 text-xs font-black text-gray-400 uppercase tracking-wider">
                <tr>
                    <th class="px-6 py-4">Technician Details</th>
                    <th class="px-6 py-4">Current Status</th>
                    <th class="px-6 py-4 text-right">Manage</th>
                </tr>
            </thead>
            <tbody class="text-sm font-bold divide-y divide-gray-50">
                @forelse($activeTechs as $tech)
                <tr class="hover:bg-gray-50 transition-colors {{ $tech->status === 'blocked' ? 'bg-red-50/30' : '' }}">
                    <td class="px-6 py-4 flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-gray-900 text-white flex items-center justify-center font-black">
                            {{ substr($tech->name, 0, 1) }}
                        </div>
                        <div>
                            <p class="text-gray-900 text-base font-black">{{ $tech->name }}</p>
                            <p class="text-xs text-gray-500">ID: IFX-{{ $tech->id }} | {{ $tech->phone }}</p>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        @if($tech->status === 'active')
                            <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-black">Active / Idle</span>
                        @else
                            <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-xs font-black flex items-center gap-1 w-fit"><i data-lucide="lock" class="w-3 h-3"></i> Blocked</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right">
                        <a href="/admin/toggle-block/{{ $tech->id }}" class="{{ $tech->status === 'active' ? 'text-red-600' : 'text-[#109E38]' }} hover:underline text-xs font-black">
                            {{ $tech->status === 'active' ? 'Block ID' : 'Unblock ID' }}
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="px-6 py-8 text-center text-gray-400 font-bold">No active technicians in the system.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection