@extends('layouts.panel')

@section('title', 'Detalle de Orden 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>{{ $order->order_code }}</h1>
            <p class="page-header-subtitle">Creado el {{ $order->created_at->format('d-m-Y H:i') }}</p>
        </div>
        <a href="{{ route('orders.edit', $order) }}" class="btn btn-primary">
            <i class="bi bi-pencil me-1"></i> Editar pedido
        </a>
    </div>

    <div class="row g-4">

        {{-- Columna Izquierda: Ciclo Operativo e Información Principal --}}
        <div class="col-lg-8">

            {{-- 1. CICLO DE TRABAJO (PASOS DE LA ORDEN) --}}
            <div class="card mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0 fw-bold text-dark">
                        <i class="bi bi-gear-wide-connected me-2 text-primary"></i>Ciclo de la Orden de Trabajo
                    </h5>
                </div>
                <div class="card-body">
                    @php
                        $workflowSteps = [
                            'pendiente'  => ['label' => 'Pendiente',  'icon' => 'bi-hourglass-split'],
                            'received'   => ['label' => 'Recibido',   'icon' => 'bi-box-seam'],
                            'washing'    => ['label' => 'Lavado',     'icon' => 'bi-water'],
                            'drying'     => ['label' => 'Secado',     'icon' => 'bi-wind'],
                            'folding'    => ['label' => 'Doblado',    'icon' => 'bi-layers'],
                            'bagging'    => ['label' => 'Embolsado',  'icon' => 'bi-bag-check'],
                            'ready'      => ['label' => 'Listo',      'icon' => 'bi-check-circle'],
                            'dispatched' => ['label' => 'Entregado',  'icon' => 'bi-truck']
                        ];
                        $stepKeys = array_keys($workflowSteps);
                        $currentIndex = array_search($order->status, $stepKeys);
                        if ($currentIndex === false) { $currentIndex = 0; }

                        $statusColors = [
                            'pendiente'  => 'danger',
                            'received'   => 'secondary',
                            'washing'    => 'info',
                            'drying'     => 'info',
                            'folding'    => 'warning',
                            'bagging'    => 'warning',
                            'ready'      => 'success',
                            'dispatched' => 'primary',
                        ];
                        $currentColor = $statusColors[$order->status] ?? 'secondary';
                    @endphp

                    {{-- Componente Stepper de Pasos --}}
                    <div class="order-stepper-wrapper mb-3">
                        <div class="order-stepper">
                            @foreach ($workflowSteps as $key => $step)
                                @php
                                    $stepIdx = array_search($key, $stepKeys);
                                    $isCompleted = $stepIdx < $currentIndex;
                                    $isCurrent = $stepIdx === $currentIndex;
                                @endphp
                                <div class="stepper-item {{ $isCompleted ? 'is-completed' : '' }} {{ $isCurrent ? 'is-current' : '' }}">
                                    <div class="stepper-node">
                                        <i class="bi {{ $isCompleted ? 'bi-check-lg' : $step['icon'] }}"></i>
                                    </div>
                                    <span class="stepper-text">{{ $step['label'] }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Resumen del Estado Operativo con Acción SweetAlert2 --}}
                    <div class="text-center pt-3 border-top d-flex align-items-center justify-content-center gap-2 flex-wrap">
                        <span class="text-muted small">Etapa Operativa Actual:</span>
                        <span class="badge bg-{{ $currentColor }}-subtle text-{{ $currentColor }} fs-6 px-3 py-2">
                            <i class="bi bi-gear-wide-connected me-1"></i> {{ $order->statusLabel() }}
                        </span>
                        <button type="button" class="btn btn-sm btn-outline-primary ms-2" onclick="changeOrderStatus()">
                            <i class="bi bi-arrow-repeat me-1"></i> Cambiar estado
                        </button>
                    </div>
                </div>
            </div>

            {{-- 2. INFORMACIÓN DEL PEDIDO (DETALLE DE ORDEN DE TRABAJO) --}}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Detalle de Orden de trabajo</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Cliente</span>
                            <strong>{{ $order->client->business_name ?? $order->contact_name ?? '—' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small d-block">RUT</span>
                            <strong>{{ $order->client->rut ?? '—' }}</strong>
                        </div>

                        @if($order->branch)
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Sucursal cliente</span>
                            <strong>{{ $order->branch->name }}</strong>
                        </div>
                        @endif

                        <div class="col-md-6">
                            <span class="text-muted small d-block">Nombre de contacto</span>
                            <strong>{{ $order->contact_name ?? '—' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Email de contacto</span>
                            <strong>{{ $order->contact_email ?? '—' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Teléfono de contacto</span>
                            <strong>{{ $order->contact_phone ?? '—' }}</strong>
                        </div>

                        <div class="col-md-6">
                            <span class="text-muted small d-block">Peso total</span>
                            <strong>{{ $order->weight_kg ? number_format($order->weight_kg, 2) . ' kg' : '—' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Tarifa aplicada</span>
                            <strong>
                                @if($order->tariff)
                                    ${{ number_format($order->tariff->price_per_kg, 0, ',', '.') }}/kg
                                    <span class="badge bg-secondary-subtle text-secondary ms-1">
                                        {{ $order->tariff->client_id ? 'específica' : 'general' }}
                                    </span>
                                @else
                                    <span class="text-muted">Sin tarifa asignada</span>
                                @endif
                            </strong>
                        </div>

                        <div class="col-md-6">
                            <span class="text-muted small d-block">Fecha de retiro</span>
                            <strong>{{ $order->pickup_date?->format('d-m-Y') ?? '—' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Fecha de despacho</span>
                            <strong>{{ $order->delivery_date?->format('d-m-Y') ?? '—' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Dirección de retiro</span>
                            <strong>{{ $order->pickup_address ?? '—' }}</strong>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small d-block">Dirección de despacho</span>
                            <strong>{{ $order->delivery_address ?? '—' }}</strong>
                        </div>

                        <div class="col-md-6">
                            <span class="text-muted small d-block">Registrado por</span>
                            <strong>{{ $order->createdBy->name ?? 'Sistema' }}</strong>
                        </div>

                        @if($order->notes)
                        <div class="col-12">
                            <span class="text-muted small d-block">Notas especiales</span>
                            <p class="mb-0 text-secondary">{{ $order->notes }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- 3. HISTORIAL DE ESTADOS --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Historial de estados</h5>
                </div>
                <div class="card-body">
                    @forelse ($order->statusHistories as $history)
                        <div class="d-flex align-items-start gap-3 mb-3 pb-3 border-bottom">
                            <span class="badge bg-secondary-subtle text-secondary">{{ \App\Models\Order::STATUSES[$history->status] ?? $history->status }}</span>
                            <div>
                                <div class="small text-muted">{{ $history->created_at->format('d-m-Y H:i') }} — {{ $history->changedBy?->name ?? 'Sistema' }}</div>
                                @if($history->notes)
                                    <div class="small">{{ $history->notes }}</div>
                                @endif
                            </div>
                        </div>
                    @empty
                        <p class="text-muted mb-0">Sin historial registrado.</p>
                    @endforelse
                </div>
            </div>

            {{-- 4. PRENDAS --}}
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Prendas</h5>
                </div>
                <div class="card-body">
                    @forelse ($order->items as $item)
                        <div class="d-flex justify-content-between align-items-start py-2 border-bottom flex-wrap gap-2">
                            <div>
                                <strong>{{ $item->garment_type }}</strong>
                                @if($item->service)
                                    <span class="badge bg-info-subtle text-info ms-1">{{ $item->service->name }}</span>
                                @endif
                                @if($item->notes)
                                    <div class="small text-muted">{{ $item->notes }}</div>
                                @endif
                            </div>
                            <div class="text-end">
                                <span class="badge bg-secondary-subtle text-secondary d-block mb-1">
                                    {{ $item->quantity }} {{ $item->unit }}
                                </span>
                                @if($item->unit_price)
                                    <div class="small text-muted">
                                        P. unit: ${{ number_format($item->unit_price, 0, ',', '.') }}
                                    </div>
                                    <div class="small text-muted">
                                        Neto: ${{ number_format($item->net_price, 0, ',', '.') }}
                                        · IVA: ${{ number_format($item->tax_amount, 0, ',', '.') }}
                                    </div>
                                    <div class="small fw-bold text-dark">
                                        Total: ${{ number_format($item->total_price, 0, ',', '.') }}
                                    </div>
                                @else
                                    <div class="small text-muted">Sin precio propio (cobrado por kg)</div>
                                @endif
                            </div>
                        </div>
                    @empty
                        <p class="text-muted mb-0">Sin prendas registradas para este pedido.</p>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Columna Derecha: Estado Financiero y Facturación --}}
        <div class="col-lg-4">

            {{-- ESTADO DEL PAGO (incluye resumen financiero Neto/IVA/Total) --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Estado del pago</h5>
                </div>
                <div class="card-body">

                    {{-- Resumen financiero: Neto / IVA / Total --}}
                    <div class="row g-2 text-center order-financial-row mb-3 pb-3 border-bottom">
                        <div class="col-4 order-financial-item">
                            <span class="text-muted small d-block mb-1">Neto</span>
                            <strong class="order-financial-value">
                                {{ $order->net_amount ? '$' . number_format($order->net_amount, 0, ',', '.') : '—' }}
                            </strong>
                        </div>
                        <div class="col-4 order-financial-item order-financial-item-divider">
                            <span class="text-muted small d-block mb-1">IVA</span>
                            <strong class="order-financial-value">
                                {{ $order->tax_amount ? '$' . number_format($order->tax_amount, 0, ',', '.') : '—' }}
                            </strong>
                        </div>
                        <div class="col-4 order-financial-item order-financial-item-divider">
                            <span class="text-muted small d-block mb-1">Total</span>
                            <strong class="order-financial-value order-financial-value-total">
                                {{ $order->total_amount ? '$' . number_format($order->total_amount, 0, ',', '.') : '—' }}
                            </strong>
                        </div>
                    </div>

                    <div class="text-center mb-3">
                        @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' => 'Fallido/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'] }} fs-6 px-3 py-2">
                            <i class="bi {{ $pState['icon'] }} me-1"></i> {{ $order->paymentStatusLabel() }}
                        </span>
                    </div>

                    @if($order->payment_method_id)
                    <div class="mb-2">
                        <span class="text-muted small d-block">Método de pago ID</span>
                        <strong>#{{ $order->payment_method_id }}</strong>
                    </div>
                    @endif

                    @if($order->payment_detail)
                    <div class="mb-0">
                        <span class="text-muted small d-block">Detalle de pago</span>
                        <div class="small bg-light p-2 rounded border mt-1" style="white-space: pre-wrap;">{{ $order->payment_detail }}</div>
                    </div>
                    @endif
                </div>
            </div>

            {{-- MÓDULO DE FACTURACIÓN ELECTRÓNICA (BSALE) --}}
            <div class="card mt-4 border-primary-subtle">
                <div class="card-header bg-primary-subtle text-primary-emphasis d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0"><i class="bi bi-receipt me-2"></i>Facturación Bsale</h5>
                </div>
                <div class="card-body">

                    @if($order->invoices && $order->invoices->count() > 0)
                        <div class="mb-3">
                            <span class="text-muted small d-block mb-2">Documentos Emitidos:</span>
                            <div class="list-group list-group-flush border rounded">
                                @foreach($order->invoices as $inv)
                                    <div class="list-group-item p-2 d-flex align-items-center justify-content-between">
                                        <div>
                                            <strong class="d-block small text-dark">{{ $inv->dteType->name }}</strong>
                                            <span class="small text-muted">Folio N° {{ $inv->number ?? '—' }}</span>
                                        </div>
                                        <div>
                                            @if($inv->url_pdf)
                                                <a href="{{ $inv->url_pdf }}" target="_blank" class="btn btn-sm btn-outline-primary py-0 px-2" title="Descargar PDF">
                                                    <i class="bi bi-file-pdf"></i> PDF
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <hr>
                    @endif

                    <form action="{{ route('orders.generate-dte', $order) }}" method="POST">
                        @csrf
                        @php $dteTypes = \App\Models\DteType::where('is_active', 1)->get(); @endphp

                        <div class="mb-3">
                            <label class="form-label small font-weight-bold">Tipo de DTE a Emitir</label>
                            <select name="dte_type_id" id="dte_type_select" class="form-select form-select-sm" onchange="checkDteFields(this)" required>
                                <option value="">-- Seleccionar DTE --</option>
                                @foreach($dteTypes as $type)
                                    <option value="{{ $type->id }}" data-code="{{ $type->code }}">
                                        {{ $type->code }} - {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                            <input type="hidden" name="dte_type_code" id="dte_type_code">
                        </div>

                        <div id="client_dte_fields" style="display: none;" class="border rounded p-2 bg-light mb-3">
                            <span class="text-primary small font-weight-bold d-block mb-2">Datos del Cliente Receptor</span>
                            
                            <div class="mb-2">
                                <label class="form-label small mb-1">RUT Receptor *</label>
                                <input type="text" name="rut" class="form-control form-control-sm" value="{{ $order->client->rut ?? '' }}" placeholder="12345678-9">
                            </div>

                            <div class="mb-2">
                                <label class="form-label small mb-1">Razón Social *</label>
                                <input type="text" name="business_name" class="form-control form-control-sm" value="{{ $order->client->business_name ?? $order->contact_name ?? '' }}">
                            </div>

                            <div class="mb-2">
                                <label class="form-label small mb-1">Giro / Actividad *</label>
                                <input type="text" name="activity" class="form-control form-control-sm" value="{{ $order->client->activity ?? 'Servicios' }}">
                            </div>

                            <div class="mb-2">
                                <label class="form-label small mb-1">Dirección Tributaria *</label>
                                <input type="text" name="address" class="form-control form-control-sm" value="{{ $order->delivery_address ?? $order->pickup_address ?? '' }}">
                            </div>

                            <div class="mb-0">
                                <label class="form-label small mb-1">Email DTE</label>
                                <input type="email" name="email" class="form-control form-control-sm" value="{{ $order->contact_email ?? '' }}">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success btn-sm w-100">
                            <i class="bi bi-printer me-1"></i> Generar DTE en Bsale
                        </button>
                    </form>

                    <script>
                        function checkDteFields(selectEl) {
                            const selectedOption = selectEl.options[selectEl.selectedIndex];
                            const code = selectedOption.getAttribute('data-code');
                            document.getElementById('dte_type_code').value = code;

                            const requireDataCodes = ['33', '34', '52', '56', '61', '110', '111', '112'];
                            const clientFields = document.getElementById('client_dte_fields');

                            if (requireDataCodes.includes(code)) {
                                clientFields.style.display = 'block';
                            } else {
                                clientFields.style.display = 'none';
                            }
                        }
                    </script>
                </div>
            </div>

            @if($order->income)
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Ingreso asociado</h5>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <span class="text-muted small d-block">Código</span>
                        <a href="{{ route('income.show', $order->income) }}" class="fw-semibold text-decoration-none">
                            {{ $order->income->income_code }}
                        </a>
                    </div>
                    <div class="mb-2">
                        <span class="text-muted small d-block">Fecha de recepción</span>
                        <strong>{{ $order->income->received_at->format('d-m-Y H:i') }}</strong>
                    </div>
                    <div>
                        <span class="text-muted small d-block">Referencia</span>
                        <strong>{{ $order->income->reference_number ?? '—' }}</strong>
                    </div>
                </div>
            </div>
            @endif

            @if($order->tariff)
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Detalle de tarifa</h5>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <span class="text-muted small d-block">Tipo</span>
                        <strong>{{ $order->tariff->client_id ? 'Específica del cliente' : 'General' }}</strong>
                    </div>
                    @if($order->tariff->service)
                    <div class="mb-2">
                        <span class="text-muted small d-block">Servicio</span>
                        <strong>{{ $order->tariff->service->name }}</strong>
                    </div>
                    @endif
                    <div class="mb-2">
                        <span class="text-muted small d-block">Línea de servicio</span>
                        <strong>{{ $order->tariff->serviceLineLabel() }}</strong>
                    </div>
                    <div class="mb-2">
                        <span class="text-muted small d-block">Precio por kg</span>
                        <strong>${{ number_format($order->tariff->price_per_kg, 0, ',', '.') }}</strong>
                    </div>
                    <div>
                        <span class="text-muted small d-block">Vigencia de la tarifa</span>
                        <strong>
                            {{ $order->tariff->valid_from->format('d-m-Y') }}
                            —
                            {{ $order->tariff->valid_to?->format('d-m-Y') ?? 'indefinido' }}
                        </strong>
                    </div>
                </div>
            </div>
            @endif
        </div>

    </div>

    {{-- Estilos para el Resumen Financiero dentro de la card de Estado del pago --}}
    <style>
        .order-financial-item-divider {
            border-left: 1px solid #dee2e6;
        }
        .order-financial-value {
            display: block;
            font-size: 18px;
            font-weight: 700;
            color: #212529;
        }
        .order-financial-value-total {
            color: #198754;
            font-size: 20px;
        }
        @media (max-width: 480px) {
            .order-financial-value { font-size: 15px; }
            .order-financial-value-total { font-size: 17px; }
        }
    </style>

    {{-- Estilos para el Stepper del Ciclo Operativo --}}
    <style>
        .order-stepper-wrapper {
            overflow-x: auto;
            padding: 8px 0;
        }
        .order-stepper {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            position: relative;
            min-width: 580px;
        }
        .order-stepper::before {
            content: '';
            position: absolute;
            top: 16px;
            left: 15px;
            right: 15px;
            height: 2px;
            background-color: #e9ecef;
            z-index: 1;
        }
        .stepper-item {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            text-align: center;
        }
        .stepper-node {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: #fff;
            border: 2px solid #dee2e6;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all 0.2s ease;
        }
        .stepper-text {
            font-size: 11px;
            font-weight: 600;
            color: #6c757d;
            margin-top: 6px;
            white-space: nowrap;
        }
        .stepper-item.is-completed .stepper-node {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #fff;
        }
        .stepper-item.is-completed .stepper-text {
            color: #212529;
        }
        .stepper-item.is-current .stepper-node {
            background-color: #198754;
            border-color: #198754;
            color: #fff;
            box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25);
        }
        .stepper-item.is-current .stepper-text {
            color: #198754;
            font-weight: 700;
        }
    </style>

    {{-- Script de cambio de estado con SweetAlert2 --}}
    <script>
        function changeOrderStatus() {
            const statuses = @json(\App\Models\Order::STATUSES);
            const currentStatus = @json($order->status);

            let optionsHtml = '';
            for (const [key, label] of Object.entries(statuses)) {
                const selected = key === currentStatus ? 'selected' : '';
                optionsHtml += `<option value="${key}" ${selected}>${label}</option>`;
            }

            Swal.fire({
                title: 'Cambiar Estado del Pedido',
                html: `
                    <p class="text-muted small mb-3">Selecciona el nuevo estado para la orden <strong>#{{ $order->order_code }}</strong></p>
                    <div class="mb-3 text-start">
                        <label class="form-label small fw-bold">Nuevo Estado:</label>
                        <select id="swal_status_select" class="form-select form-select-sm">
                            ${optionsHtml}
                        </select>
                    </div>
                    <div class="text-start">
                        <label class="form-label small fw-bold">Notas del cambio:</label>
                        <textarea id="swal_status_notes" class="form-control form-control-sm" rows="2" placeholder="Observaciones opcionales..."></textarea>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: 'Guardar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#0d6efd',
                preConfirm: () => {
                    return {
                        status: document.getElementById('swal_status_select').value,
                        notes: document.getElementById('swal_status_notes').value
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Actualizando...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    fetch("{{ route('orders.update-status', $order) }}", {
                        method: 'PATCH',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            status: result.value.status,
                            notes: result.value.notes
                        })
                    })
                    .then(async response => {
                        const data = await response.json();
                        if (!response.ok) {
                            throw new Error(data.message || 'Error de validación (422)');
                        }
                        return data;
                    })
                    .then(data => {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Actualizado!',
                            text: 'El estado del pedido se ha modificado correctamente.',
                            timer: 1200,
                            showConfirmButton: false
                        }).then(() => location.reload());
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message || 'No se pudo actualizar el estado.'
                        });
                    });
                }
            });
        }
    </script>

@endsection