@extends('layouts.panel')

@section('title', 'Ordenes de Trabajo')

@section('content')

    <div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div class="page-header-title">
            <h1>Ordenes de Trabajo</h1>
            <p class="page-header-subtitle">Órdenes de servicio de lavado industrial</p>
        </div>
        <a href="{{ route('orders.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i> Nueva Orden
        </a>
    </div>

    {{-- FILTRO INTERACTIVO DE CICLO OPERATIVO (STEPPER FILTRABLE) --}}
    @php
        $workflowSteps = [
            'pendiente'  => ['label' => 'Pendiente',  'icon' => 'bi-hourglass-split', 'color' => 'danger'],
            'received'   => ['label' => 'Recibido',   'icon' => 'bi-box-seam',        'color' => 'secondary'],
            'washing'    => ['label' => 'Lavado',     'icon' => 'bi-water',           'color' => 'info'],
            'drying'     => ['label' => 'Secado',     'icon' => 'bi-wind',            'color' => 'info'],
            'folding'    => ['label' => 'Doblado',    'icon' => 'bi-layers',          'color' => 'warning'],
            'bagging'    => ['label' => 'Embolsado',  'icon' => 'bi-bag-check',       'color' => 'warning'],
            'ready'      => ['label' => 'Listo',      'icon' => 'bi-check-circle',    'color' => 'success'],
            'dispatched' => ['label' => 'Entregado',  'icon' => 'bi-truck',           'color' => 'primary'],
        ];
        $currentStatus = request('status');
    @endphp

    <div class="card mb-4">
        <div class="card-body py-3">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="text-muted small fw-bold text-uppercase"><i class="bi bi-funnel me-1"></i> Filtrar por Ciclo de Trabajo</span>
                @if($currentStatus)
                    <a href="{{ route('orders.index', request()->except('status')) }}" class="btn btn-sm btn-link text-decoration-none p-0">
                        <i class="bi bi-x-circle me-1"></i>Limpiar filtro de ciclo
                    </a>
                @endif
            </div>

            <div class="order-cycle-filter-wrapper">
                <div class="order-cycle-filter">
                    {{-- Botón "Todos" --}}
                    <a href="{{ route('orders.index', request()->except('status')) }}" 
                       class="cycle-step-btn {{ empty($currentStatus) ? 'active' : '' }}">
                        <div class="cycle-step-icon">
                            <i class="bi bi-grid-fill"></i>
                        </div>
                        <span class="cycle-step-label">Todos</span>
                    </a>

                    {{-- Etapas del Ciclo --}}
                    @foreach ($workflowSteps as $key => $step)
                        @php $isSelected = $currentStatus === $key; @endphp
                        <a href="{{ route('orders.index', array_merge(request()->query(), ['status' => $key])) }}" 
                           class="cycle-step-btn {{ $isSelected ? 'active status-' . $step['color'] : '' }}">
                            <div class="cycle-step-icon">
                                <i class="bi {{ $step['icon'] }}"></i>
                            </div>
                            <span class="cycle-step-label">{{ $step['label'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">

            {{-- Formulario Secundario de Búsqueda --}}
            <form method="GET" action="{{ route('orders.index') }}" class="row g-3 mb-4">
                {{-- Mantener el filtro de ciclo activo si existe --}}
                @if(request('status'))
                    <input type="hidden" name="status" value="{{ request('status') }}">
                @endif

                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" name="search" class="form-control" placeholder="Buscar por código o cliente..."
                               value="{{ request('search') }}">
                    </div>
                </div>
                
                

                <div class="col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-filter me-1"></i> Filtrar
                    </button>
                    @if(request()->hasAny(['search', 'service_line', 'status']))
                        <a href="{{ route('orders.index') }}" class="btn btn-outline-danger" title="Limpiar todos los filtros">
                            <i class="bi bi-arrow-counterclockwise"></i>
                        </a>
                    @endif
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Cliente</th>

                            <th>Peso</th>
                            <th>Neto</th>
                            <th>IVA</th>
                            <th>Total</th>
                            <th>Estado Trabajo</th>
                            <th>Estado Pago</th>
                            <th>Retiro</th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($orders as $order)
                            <tr>
                                <td><strong>{{ $order->order_code }}</strong></td>
                                <td>{{ $order->client->business_name ?? $order->contact_name }}</td>

                                <td>{{ $order->weight_kg ? number_format($order->weight_kg, 2) . ' kg' : '—' }}</td>

                                {{-- Neto --}}
                                <td>
                                    {{ $order->net_amount ? '$' . number_format($order->net_amount, 0, ',', '.') : '—' }}
                                </td>

                                {{-- IVA --}}
                                <td>
                                    {{ $order->tax_amount ? '$' . number_format($order->tax_amount, 0, ',', '.') : '—' }}
                                </td>

                                {{-- Total --}}
                                <td>
                                    <strong class="text-dark">
                                        {{ $order->total_amount ? '$' . number_format($order->total_amount, 0, ',', '.') : '—' }}
                                    </strong>
                                </td>

                                {{-- Estado Operativo / Trabajo --}}
                                <td>
                                    @php
                                        $statusColors = [
                                            'pendiente'  => 'danger',
                                            'received'   => 'secondary',
                                            'washing'    => 'info',
                                            'drying'     => 'info',
                                            'folding'    => 'warning',
                                            'bagging'    => 'warning',
                                            'ready'      => 'success',
                                            'dispatched' => 'primary',
                                        ];
                                        $color = $statusColors[$order->status] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $color }}-subtle text-{{ $color }}">{{ $order->statusLabel() }}</span>
                                </td>

                                {{-- Estado Financiero / Pago (0: Pendiente, 1: Pagado, 2: Rechazado) --}}
                                <td>
                                    @php
                                        $paymentConfig = [
                                            0 => ['color' => 'warning', 'label' => 'Pendiente', 'icon' => 'bi-hourglass-split'],
                                            1 => ['color' => 'success', 'label' => 'Pagado', 'icon' => 'bi-check-circle-fill'],
                                            2 => ['color' => 'danger',  'label' => 'Rechazado', 'icon' => 'bi-x-circle-fill'],
                                        ];
                                        $pState = $paymentConfig[(int) $order->payment_status] ?? $paymentConfig[0];
                                    @endphp
                                    <span class="badge bg-{{ $pState['color'] }}-subtle text-{{ $pState['color'] }} d-inline-flex align-items-center gap-1">
                                        <i class="bi {{ $pState['icon'] }}"></i>
                                        {{ $pState['label'] }}
                                    </span>
                                </td>

                                <td>{{ $order->pickup_date?->format('d-m-Y') ?? '—' }}</td>
                                <td class="text-end">
                                    <a href="{{ route('orders.show', $order) }}" class="btn btn-sm btn-outline-secondary" title="Ver detalle">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('orders.edit', $order) }}" class="btn btn-sm btn-outline-primary" title="Editar">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form action="{{ route('orders.destroy', $order) }}" method="POST" class="d-inline"
                                          onsubmit="return confirm('¿Eliminar este pedido? Esta acción no se puede deshacer.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center text-muted py-4">
                                    No hay pedidos registrados para este filtro.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-3 d-flex justify-content-center">
                {{ $orders->links('pagination::bootstrap-5') }}
            </div>

        </div>
    </div>

    {{-- ESTILOS CSS DEL STEPPER FILTRABLE EN PANEL --}}
    <style>
        .order-cycle-filter-wrapper {
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .order-cycle-filter {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 680px;
        }
        .cycle-step-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 10px;
            border-radius: 10px;
            background-color: var(--bs-tertiary-bg, #f8f9fa);
            border: 1px solid var(--bs-border-color, #dee2e6);
            color: #6c757d;
            text-decoration: none;
            transition: all 0.2s ease-in-out;
        }
        .cycle-step-btn:hover {
            border-color: #0d6efd;
            color: #0d6efd;
            background-color: rgba(13, 110, 253, 0.04);
        }
        .cycle-step-icon {
            font-size: 16px;
            margin-bottom: 2px;
        }
        .cycle-step-label {
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
        }
        
        /* Estado Activo Genérico */
        .cycle-step-btn.active {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #ffffff !important;
            box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
        }

        /* Variantes de Color cuando el Estado está seleccionado */
        .cycle-step-btn.active.status-danger {
            background-color: #dc3545;
            border-color: #dc3545;
            box-shadow: 0 4px 10px rgba(220, 53, 69, 0.25);
        }
        .cycle-step-btn.active.status-warning {
            background-color: #ffc107;
            border-color: #ffc107;
            color: #000000 !important;
            box-shadow: 0 4px 10px rgba(255, 193, 7, 0.25);
        }
        .cycle-step-btn.active.status-info {
            background-color: #0dcaf0;
            border-color: #0dcaf0;
            color: #000000 !important;
            box-shadow: 0 4px 10px rgba(13, 202, 240, 0.25);
        }
        .cycle-step-btn.active.status-success {
            background-color: #198754;
            border-color: #198754;
            box-shadow: 0 4px 10px rgba(25, 135, 84, 0.25);
        }
        .cycle-step-btn.active.status-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
            box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
        }
        .cycle-step-btn.active.status-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            box-shadow: 0 4px 10px rgba(108, 117, 125, 0.25);
        }
    </style>

@endsection