@extends('layouts.app')

@section('title', 'Gestión de Pedidos')

@section('content')
    <div class="flex flex-col h-[calc(100vh-6rem)]">
        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-2 tracking-tight">
                    Tablero de <span
                        class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine dark:from-orange-400 dark:to-pink-500">Pedidos</span>
                </h2>
                <p class="text-slate-500 dark:text-slate-400 text-sm">Arrastra y suelta para cambiar estados</p>
            </div>
            <div class="flex gap-3">
                <input type="text" placeholder="Buscar pedido..."
                    class="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-brand-orange focus:ring-1 focus:ring-brand-orange transition-all dark:text-white shadow-sm">

                <button
                    class="bg-berry-red hover:bg-red-700 text-white px-5 py-2 rounded-xl text-sm font-medium shadow-lg shadow-berry-red/20 hover:shadow-berry-red/40 transition hover:-translate-y-0.5">
                    + Nuevo Pedido
                </button>
            </div>
        </div>

        <!-- Kanban Board -->
        <div class="flex-1 overflow-x-auto overflow-y-hidden pb-4">
            <div class="flex h-full gap-6 min-w-[1200px]">

                <!-- Col: Pendiente -->
                <div
                    class="w-80 bg-slate-100/50 dark:bg-slate-800/30 backdrop-blur-sm rounded-2xl flex flex-col max-h-full border border-slate-200/50 dark:border-slate-700/50">
                    <div
                        class="p-4 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center rounded-t-2xl bg-slate-100/80 dark:bg-slate-800/80">
                        <h3 class="font-bold text-slate-700 dark:text-slate-200">Pendiente</h3>
                        <span
                            class="bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-bold px-2.5 py-1 rounded-lg">3</span>
                    </div>
                    <div class="p-3 space-y-3 overflow-y-auto flex-1 custom-scrollbar">
                        <!-- Card -->
                        <div
                            class="glass-card p-4 rounded-xl border-l-4 border-l-slate-400 cursor-move border-y-0 border-r-0 dark:bg-slate-700">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-bold text-slate-800 dark:text-white">#ORD-005</span>
                                <span class="text-xs text-slate-400 dark:text-slate-500">10:30 AM</span>
                            </div>
                            <p class="text-sm text-slate-600 dark:text-slate-300 mb-1 font-medium">Marta Gomez</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mb-3">2x Fresas, 1x Moras</p>
                            <div
                                class="flex justify-between items-center pt-2 border-t border-slate-100 dark:border-slate-600/50">
                                <span class="font-bold text-slate-800 dark:text-slate-200 text-sm">$45.000</span>
                                <button
                                    class="text-xs text-berry-red hover:text-brand-orange transition-colors font-medium">Ver
                                    Detalles</button>
                            </div>
                        </div>

                        <!-- Card -->
                        <div
                            class="glass-card p-4 rounded-xl border-l-4 border-l-slate-400 cursor-move border-y-0 border-r-0 dark:bg-slate-700">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-bold text-slate-800 dark:text-white">#ORD-008</span>
                                <span class="text-xs text-slate-400 dark:text-slate-500">11:15 AM</span>
                            </div>
                            <p class="text-sm text-slate-600 dark:text-slate-300 mb-1 font-medium">Juan Perez</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mb-3">5kg Arándanos</p>
                            <div
                                class="flex justify-between items-center pt-2 border-t border-slate-100 dark:border-slate-600/50">
                                <span class="font-bold text-slate-800 dark:text-slate-200 text-sm">$120.000</span>
                                <button
                                    class="text-xs text-berry-red hover:text-brand-orange transition-colors font-medium">Ver
                                    Detalles</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Col: Confirmado -->
                <div
                    class="w-80 bg-blue-50/50 dark:bg-blue-900/10 backdrop-blur-sm rounded-2xl flex flex-col max-h-full border border-blue-100 dark:border-blue-900/30">
                    <div
                        class="p-4 border-b border-blue-100 dark:border-blue-800/30 flex justify-between items-center rounded-t-2xl bg-blue-50/80 dark:bg-blue-900/20">
                        <h3 class="font-bold text-blue-800 dark:text-blue-300">Confirmado</h3>
                        <span
                            class="bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-200 text-xs font-bold px-2.5 py-1 rounded-lg">2</span>
                    </div>
                    <div class="p-3 space-y-3 overflow-y-auto flex-1 custom-scrollbar">
                        <!-- Card -->
                        <div
                            class="glass-card p-4 rounded-xl border-l-4 border-l-blue-500 cursor-move border-y-0 border-r-0 dark:bg-slate-700">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-bold text-slate-800 dark:text-white">#ORD-003</span>
                                <span class="text-xs text-slate-400 dark:text-slate-500">09:00 AM</span>
                            </div>
                            <p class="text-sm text-slate-600 dark:text-slate-300 mb-1 font-medium">Luisa Torres</p>
                            <div
                                class="mt-2 inline-flex items-center px-2 py-1 rounded-md bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-300 text-xs font-medium border border-blue-100 dark:border-blue-500/20">
                                ⭐ Stock Reservado
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Col: En Ruta -->
                <div
                    class="w-80 bg-amber-50/50 dark:bg-amber-900/10 backdrop-blur-sm rounded-2xl flex flex-col max-h-full border border-amber-100 dark:border-amber-900/30">
                    <div
                        class="p-4 border-b border-amber-100 dark:border-amber-800/30 flex justify-between items-center rounded-t-2xl bg-amber-50/80 dark:bg-amber-900/20">
                        <h3 class="font-bold text-amber-800 dark:text-amber-300">En Ruta</h3>
                        <span
                            class="bg-amber-100 dark:bg-amber-800 text-amber-700 dark:text-amber-200 text-xs font-bold px-2.5 py-1 rounded-lg">4</span>
                    </div>
                    <div class="p-3 space-y-3 overflow-y-auto flex-1 custom-scrollbar">
                        <!-- Card -->
                        <div
                            class="glass-card p-4 rounded-xl border-l-4 border-l-amber-500 cursor-move border-y-0 border-r-0 dark:bg-slate-700">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-bold text-slate-800 dark:text-white">#ORD-001</span>
                                <div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-600 text-xs flex items-center justify-center font-bold text-slate-600 dark:text-slate-300"
                                    title="Repartidor: Carlos">CR</div>
                            </div>
                            <p class="text-sm text-slate-600 dark:text-slate-300 mb-1 font-medium">Maria Jose</p>
                            <p class="text-xs text-slate-400 italic mb-2">Barrio El Peñon</p>
                            <div class="flex items-center gap-1.5 text-xs font-bold text-amber-600 dark:text-amber-400">
                                <span class="relative flex h-2 w-2">
                                    <span
                                        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                                    <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
                                </span>
                                En camino
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Col: Entregado -->
                <div
                    class="w-80 bg-green-50/50 dark:bg-green-900/10 backdrop-blur-sm rounded-2xl flex flex-col max-h-full border border-green-100 dark:border-green-900/30">
                    <div
                        class="p-4 border-b border-green-100 dark:border-green-800/30 flex justify-between items-center rounded-t-2xl bg-green-50/80 dark:bg-green-900/20">
                        <h3 class="font-bold text-green-800 dark:text-green-300">Entregado</h3>
                        <span
                            class="bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-200 text-xs font-bold px-2.5 py-1 rounded-lg">12</span>
                    </div>
                    <div class="p-3 space-y-3 overflow-y-auto flex-1 custom-scrollbar">
                        <!-- Card -->
                        <div
                            class="glass-card p-4 rounded-xl border-l-4 border-l-green-500 border-y-0 border-r-0 opacity-80 hover:opacity-100 transition-opacity dark:bg-slate-700">
                            <div class="flex justify-between items-start mb-2">
                                <span class="font-bold text-slate-800 dark:text-white decoration-slate-400">#ORD-002</span>
                                <span class="text-xs text-green-600 dark:text-green-400 font-bold">✓ 11:30 AM</span>
                            </div>
                            <p class="text-sm text-slate-600 dark:text-slate-300 mb-2 font-medium">Carlos Ruiz</p>
                            <div class="flex gap-2">
                                <span
                                    class="text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 px-2 py-1 rounded-md font-bold border border-green-200 dark:border-green-800/30">Pagado</span>
                                <span
                                    class="text-xs bg-slate-100 dark:bg-slate-600 text-slate-600 dark:text-slate-300 px-2 py-1 rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-500 transition-colors">Ver
                                    Foto</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection