@extends('layouts.app')

@section('title', 'Taller - Órdenes de Servicio — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn">
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-wrench" style="color: var(--primary);"></i>
                Taller (Órdenes de Servicio)
                <span class="count">({{ $workOrders->count() }} activas)</span>
            </h1>
            <div class="d-flex gap-sm" style="flex-wrap: wrap; justify-content: flex-end;">
                <a href="{{ route('work_orders.history') }}" class="btn btn-outline">
                    <i class="ph ph-archive"></i> Historial
                </a>
                @if(!auth()->user()->isClient())
                <a href="{{ route('work_orders.create') }}" class="btn btn-primary">
                    <i class="ph ph-plus"></i> Nueva Orden
                </a>
                @endif
            </div>
        </div>
        <form method="GET" action="{{ route('work_orders.index') }}" class="header-search">
            <div class="search-box">
                <i class="ph ph-magnifying-glass"></i>
                <input type="text" name="search" class="form-control" placeholder="Buscar por número, cliente, serial..." value="{{ request('search') }}">
                @if(request('search'))
                    <a href="{{ route('work_orders.index') }}" class="btn btn-ghost text-muted">Limpiar</a>
                @endif
            </div>
        </form>
    </div>

    <style>
        .kanban-board {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            padding-bottom: 1rem;
            min-height: calc(100vh - 250px);
            align-items: flex-start;
            scroll-snap-type: x mandatory;
            scroll-padding: 0 1rem;
        }
        .kanban-board::-webkit-scrollbar {
            height: 8px;
        }
        .kanban-board::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.02);
            border-radius: 4px;
        }
        .kanban-board::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }
        .kanban-column {
            background: rgba(0,0,0,0.02);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            min-width: 280px;
            flex: 1 0 280px;
            display: flex;
            flex-direction: column;
            padding: 1rem;
            scroll-snap-align: start;
        }
        @media (max-width: 768px) {
            .kanban-column {
                flex: 0 0 85vw;
            }
            .kanban-board {
                padding-bottom: 2rem;
            }
        }
        .kanban-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            font-weight: 700;
            font-size: 1.05rem;
            color: var(--text-secondary);
        }
        .kanban-header .count {
            background: var(--bg-card);
            color: var(--text-muted);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            border: 1px solid var(--border-color);
            flex-shrink: 0;
            min-width: 24px;
            text-align: center;
        }
        .kanban-cards {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 50px;
        }
        .kanban-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 1rem;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            cursor: pointer;
            transition: var(--transition-fast);
        }
        .kanban-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
            border-color: var(--primary-light);
        }
        .kanban-card .order-number {
            font-weight: 700;
            color: var(--primary);
            font-size: 0.9rem;
            margin-bottom: 4px;
        }
        .kanban-card .client-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
            font-size: 0.95rem;
        }
        .kanban-card .device-info {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 8px;
        }
        .kanban-card .priority-badge {
            display: inline-block;
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
        }
        .priority-Baja { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .priority-Media { background: rgba(16, 185, 129, 0.1); color: #10b981; }
        .priority-Alta { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .priority-Urgente { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
    </style>

    <div class="kanban-board">
        @foreach(['Ingresado', 'En Revisión', 'Esperando Repuesto', 'Reparado', 'Irreparable'] as $status)
        <div class="kanban-column" x-data="{
            dropZoneActive: false,
            onDrop(event) {
                this.dropZoneActive = false;
                const orderId = event.dataTransfer.getData('text/plain');
                if (orderId) {
                    this.updateStatus(orderId, '{{ $status }}');
                }
            },
            async updateStatus(id, newStatus) {
                try {
                    const response = await fetch(`/work-orders/${id}/status`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ status: newStatus })
                    });
                    if(response.ok) {
                        const data = await response.json();
                        if (data.require_signature) {
                            window.location.href = data.redirect_url;
                            return;
                        }
                        window.location.reload();
                    } else {
                        const data = await response.json();
                        Swal.fire({icon: 'error', title: 'Error', text: data.message || 'Error al actualizar el estado.'});
                        window.location.reload(); // Para que la tarjeta vuelva a su lugar
                    }
                } catch(e) {
                    console.error(e);
                    Swal.fire({icon: 'error', title: 'Error', text: 'Hubo un error de conexión.'});
                }
            }
        }" 
        @if(!auth()->user()->isClient())
        @dragover.prevent="dropZoneActive = true" @dragleave.prevent="dropZoneActive = false" @drop.prevent="onDrop($event)"
        :style="dropZoneActive ? 'border-color: var(--primary); background: var(--primary-light);' : ''"
        @endif>
            
            <div class="kanban-header">
                {{ $status }}
                <span class="count">{{ $kanbanBoard[$status]->count() }}</span>
            </div>
            
            <div class="kanban-cards">
                @foreach($kanbanBoard[$status] as $order)
                <div class="kanban-card" 
                     @if(!auth()->user()->isClient()) draggable="true" @dragstart="$event.dataTransfer.setData('text/plain', '{{ $order->id }}')" @endif
                     onclick="window.location.href='{{ route('work_orders.show', $order) }}'">
                    
                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div class="order-number">{{ $order->order_number }}</div>
                        <span class="priority-badge priority-{{ $order->priority }}">{{ $order->priority }}</span>
                    </div>
                    
                    <div class="client-name">
                        @if($order->inventory_item_id)
                            <i class="ph ph-buildings"></i> {{ optional($order->inventoryItem->branch->company)->name ?? 'Empresa' }}
                        @else
                            <i class="ph ph-user"></i> {{ $order->client_name }}
                        @endif
                    </div>
                    
                    <div class="device-info">
                        @if($order->inventory_item_id)
                            {{ $order->inventoryItem->name }} ({{ $order->inventoryItem->serial_number }})
                        @else
                            {{ $order->device_type }} {{ $order->device_brand }} - {{ $order->device_model }}
                        @endif
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); font-size: 0.8rem;">
                        <span style="color: var(--text-muted);"><i class="ph ph-clock"></i> {{ $order->created_at->diffForHumans() }}</span>
                        @if($order->technician)
                            <div title="Técnico: {{ $order->technician->name }}" style="width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.7rem;">
                                {{ substr($order->technician->name, 0, 1) }}
                            </div>
                        @else
                            <span style="color: var(--warning);"><i class="ph ph-warning-circle"></i> Sin asignar</span>
                        @endif
                    </div>

                    @if(in_array($order->status, ['Reparado', 'Irreparable']) && !auth()->user()->isClient())
                    <div style="margin-top: 12px;">
                        <a href="{{ route('work_orders.edit', $order) }}" class="btn btn-sm btn-primary" style="display: block; text-align: center; width: 100%; font-weight: 600;" onclick="event.stopPropagation();">
                            <i class="ph ph-hand-coins"></i> Entregar Equipo
                        </a>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection