<x-layout title="Tablero de Taller">

    <x-section-header subtitle="Gestión" title="Tablero de " highlight="Taller" />


    
    <div class="flex w-full justify-end items-end mb-4 gap-x-2">
        <a href="{{ route('agenda') }}" 
           class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
            Ver Agenda
        </a>
        
        <a href="{{ route('taller.create') }}" class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
            + Ingresar Bici
        </a>
    </div>

    <!-- Contenedor -->
    <div class="flex flex-col lg:flex-row w-full gap-8 overflow-x-auto pb-4 h-[calc(100vh-250px)]">
        
        <!-- COLUMNA 1 -->
        <div class="flex-1 min-w-[300px] bg-gray-50 dark:bg-neutral-900/50 border border-gray-300 dark:border-neutral-800 rounded-xl flex flex-col">
            <div class="p-4 border-b border-gray-300 dark:border-neutral-800 bg-gray-200 dark:bg-neutral-800/50 rounded-t-xl flex justify-between items-center">
                <h3 class="font-bold text-gray-800 dark:text-gray-300 uppercase tracking-widest text-xs">🔴 Pendientes / A Revisar</h3>
                <span class="bg-gray-300 dark:bg-neutral-900 text-gray-700 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{ $pending->count() }}</span>
            </div>
            <div class="p-4 space-y-4 overflow-y-auto flex-1 custom-scrollbar">
                @foreach($pending as $job)
                    <x-taller-card :job="$job" color="red" />
                @endforeach
            </div>
        </div>

        <!-- COLUMNA 2 -->
        <div class="flex-1 min-w-[300px] bg-gray-50 dark:bg-neutral-900/50 border border-gray-300 dark:border-neutral-800 rounded-xl flex flex-col">
            <div class="p-4 border-b border-gray-300 dark:border-neutral-800 bg-gray-200 dark:bg-neutral-800/50 rounded-t-xl flex justify-between items-center">
                <h3 class="font-bold text-yellow-600 dark:text-yellow-500 uppercase tracking-widest text-xs">🟡 En Reparación</h3>
                <span class="bg-gray-300 dark:bg-neutral-900 text-gray-700 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{ $inProgress->count() }}</span>
            </div>
            <div class="p-4 space-y-4 overflow-y-auto flex-1 custom-scrollbar">
                @foreach($inProgress as $job)
                    <x-taller-card :job="$job" color="yellow" />
                @endforeach
            </div>
        </div>

        <!-- COLUMNA 3 -->
        <div class="flex-1 min-w-[300px] bg-gray-50 dark:bg-neutral-900/50 border border-gray-300 dark:border-neutral-800 rounded-xl flex flex-col">
            <div class="p-4 border-b border-gray-300 dark:border-neutral-800 bg-gray-200 dark:bg-neutral-800/50 rounded-t-xl flex justify-between items-center">
                <h3 class="font-bold text-green-600 dark:text-neon-lime uppercase tracking-widest text-xs">🟢 Listas para Retirar</h3>
                <span class="bg-gray-300 dark:bg-neutral-900 text-gray-700 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{ $ready->count() }}</span>
            </div>
            <div class="p-4 space-y-4 overflow-y-auto flex-1 custom-scrollbar">
                @foreach($ready as $job)
                    <x-taller-card :job="$job" color="neon" />
                @endforeach
            </div>
        </div>

    </div>

</x-layout>