@extends('layouts.app')

@section('title', 'Tablero Kanban')

@section('content')
<!-- Inicialización Robusta de Alpine.js -->
@include('pedidos.partials.scripts')

<div x-data="orderManager" 
     @order-saved.window="location.reload()"
     class="h-full flex flex-col space-y-6">

    <!-- Encabezado y Fila de Acciones -->
    <div class="flex flex-col lg:flex-row justify-between items-end gap-6 mb-2">
        <div class="animate-fade-in-left">
            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">Tablero de <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine">Pedidos</span></h1>
            <p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mt-1">JoinTrust Business Logic Pipeline</p>
            
            <!-- Reloj Digital en Tiempo Real -->
            <div x-data="{ 
                time: '',
                date: '',
                updateTime() {
                    const now = new Date();
                    this.time = now.toLocaleTimeString('es-CO', { hour12: true, hour: '2-digit', minute: '2-digit', second: '2-digit' });
                    this.date = now.toLocaleDateString('es-CO', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
                }
            }" x-init="updateTime(); setInterval(() => updateTime(), 1000)" class="mt-4 flex items-center gap-4 group">
                <div class="flex items-center gap-3 px-4 py-2 bg-white dark:bg-slate-800 rounded-2xl border border-slate-100 dark:border-slate-700 shadow-sm transition-all hover:shadow-md hover:border-indigo-200">
                    <div class="flex h-2.5 w-2.5 relative">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-indigo-600"></span>
                    </div>
                    <span class="text-xl font-black text-slate-800 dark:text-white font-mono tracking-tighter" x-text="time"></span>
                </div>
                <div class="flex flex-col">
                    <span class="text-[8px] font-black text-indigo-600 uppercase tracking-widest leading-none mb-1">Hora Local Bogotá D.C.</span>
                    <span class="text-[10px] font-bold text-slate-500 dark:text-slate-400 capitalize tracking-tight" x-text="date"></span>
                </div>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <button @click="showKanban = !showKanban" 
                    class="px-5 py-3 rounded-2xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center gap-2 border shadow-sm"
                    :class="showKanban ? 'bg-slate-800 text-white border-slate-800 shadow-slate-200' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path></svg>
                <span x-text="showKanban ? 'Ocultar Flujo' : 'Ver Flujo Kanban'"></span>
            </button>

            <!-- Botón Revalidar Borradores WhatsApp (Mediodía) -->
            <button @click="revalidarBorradoresWhatsApp()" 
                    :disabled="revalidando"
                    class="px-5 py-3 rounded-2xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center gap-2 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800/50 hover:bg-emerald-100 shadow-sm"
                    title="Cruza los borradores de WhatsApp con el nuevo stock de mediodía y los activa">
                <svg class="w-4 h-4 text-emerald-600" :class="revalidando ? 'animate-spin' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                <span x-text="revalidando ? 'Revalidando...' : 'Revalidar WhatsApp'"></span>
            </button>

            <button @click="openQuickInventory()" 
                    class="px-5 py-3 rounded-2xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center gap-2 bg-indigo-50 text-indigo-600 border border-indigo-100 hover:bg-indigo-100 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                Stock
            </button>

            <button @click="openColdClientsModal()" 
                    class="px-5 py-3 rounded-2xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center gap-2 bg-slate-50 text-slate-600 border border-slate-200 hover:bg-slate-100 shadow-sm">
                <svg class="w-4 h-4 text-brand-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                Potenciales
            </button>

            <button @click="openCreateModal()" 
                    class="bg-brand-orange text-white px-8 py-3 rounded-2xl font-black uppercase tracking-widest text-[10px] shadow-lg shadow-brand-orange/20 hover:shadow-brand-orange/40 hover:-translate-y-1 transition-all flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg>
                Nuevo Pedido
            </button>
        </div>
    </div>

    <!-- Sección de KPIs: Diseño Colapsable (Acordeón) -->
    <div x-data="{ showKpis: false }" class="space-y-4">
        <div class="flex justify-between items-center px-2">
            <button @click="showKpis = !showKpis" 
                    class="group flex items-center gap-3 px-4 py-2 bg-slate-100 dark:bg-slate-800 rounded-xl hover:bg-slate-200 dark:hover:bg-slate-700 transition-all border border-slate-200 dark:border-slate-700">
                <div class="w-6 h-6 rounded-lg bg-indigo-500 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
                    <svg class="w-4 h-4 transition-transform duration-300" :class="showKpis ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
                </div>
                <span class="text-[10px] font-black text-slate-600 dark:text-slate-300 uppercase tracking-[0.2em]" x-text="showKpis ? 'Ocultar Estadísticas' : 'Ver Estadísticas y Resumen'"></span>
            </button>
            <div class="h-px flex-1 bg-gradient-to-r from-slate-200 to-transparent dark:from-slate-700 ml-4"></div>
        </div>

        <div x-show="showKpis" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 -translate-y-4"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-4"
             class="animate-fade-in">
            @include('pedidos.partials.kpi-cards')
        </div>
    </div>

    <!-- Tablero Kanban (Drag & Drop) -->
    @include('pedidos.partials.kanban-board')

    <!-- Sección de Tabla Dinámica -->
    @include('pedidos.partials.table-view')

<!-- Modales del Tablero -->
@include('pedidos.modals.quick-inventory')
@include('pedidos.modals.create-order')
@include('pedidos.modals.confirm-manual')
@include('pedidos.modals.bulk-reschedule')
@include('pedidos.modals.bulk-payment')
@include('pedidos.modals.recurrence-hub')
@include('pedidos.modals.cold-clients')
@include('pedidos.modals.view-evidence')
@include('pedidos.modals.gestion-devolucion')

    <!-- Botón Flotante de Acción Rápida (Floating Action Button) -->
    <div class="fixed right-0 bottom-32 z-[100] group">
        <button @click="openCreateModal()" 
                type="button"
                class="flex items-center bg-brand-orange hover:bg-brand-wine text-white p-4 rounded-l-2xl shadow-2xl shadow-brand-orange/40 transition-all duration-500 hover:-translate-x-2 group-hover:shadow-brand-wine/40"
                title="Crear Nuevo Pedido">
            <div class="flex items-center gap-3">
                <span class="text-[10px] font-black uppercase tracking-widest overflow-hidden max-w-0 group-hover:max-w-[120px] transition-all duration-500 whitespace-nowrap opacity-0 group-hover:opacity-100 hidden md:block">
                    Nuevo Pedido
                </span>
                <svg class="w-6 h-6 transform group-hover:rotate-90 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path>
                </svg>
            </div>
        </button>
    </div>
</div>

@endsection

@push('scripts')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}&libraries=places,geometry&loading=async" async defer></script>
    <style>
        .pac-container {
            z-index: 9999 !important;
            border-radius: 1rem;
            border: none;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            margin-top: 5px;
            font-family: 'Instrument Sans', sans-serif;
        }
        .pac-item {
            padding: 10px 15px;
            cursor: pointer;
            border-top: 1px solid #f1f5f9;
        }
        .pac-item:hover {
            background-color: #f8fafc;
        }
        .pac-item-query {
            font-size: 14px;
            color: #1e293b;
        }
    </style>
@endpush