@extends('layouts.app')

@section('title', 'Completar envío ' . $envio->numero_envio . ' | Veltrix v2')

@section('content')

{{-- Header --}}
<div class="d-flex align-items-center gap-2 mb-4 flex-wrap">
    <a href="{{ route('envios.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bx bx-arrow-back"></i>
    </a>
    <h1 class="h5 mb-0 fw-bold">Completar envío</h1>
    <span class="badge bg-secondary-subtle text-secondary border rounded-pill px-3 font-monospace">{{ $envio->numero_envio }}</span>
    <span class="badge bg-{{ $envio->estadoColor() }}-subtle text-{{ $envio->estadoColor() }} rounded-pill px-3">{{ $envio->estadoLabel() }}</span>
    @if ($envio->venta_id)
        <span class="badge bg-info-subtle text-info rounded-pill px-3">
            <i class="bx bx-receipt me-1"></i>Venta POS #{{ $envio->venta_id }}
        </span>
    @endif
</div>

@if ($errors->any())
    <div class="alert alert-danger py-2 mb-3 border-0 rounded-3">{{ $errors->first() }}</div>
@endif

<form method="POST" action="{{ route('envios.update', $envio) }}">
    @csrf
    @method('PUT')

    <div class="row g-3">

        {{-- ── Datos de despacho (PRIMERO, prominente) ──────────── --}}
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="border-left:4px solid #4f46e5!important;border-radius:12px">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <div class="rounded-2 d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:36px;height:36px;background:#eef2ff">
                            <i class="bx bxs-truck" style="color:#4f46e5;font-size:1.1rem"></i>
                        </div>
                        <div>
                            <h2 class="h6 mb-0 fw-bold">Datos de despacho</h2>
                            <div class="text-muted" style="font-size:.75rem">Transportadora y número de guía para el envío</div>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label form-label-sm fw-semibold">Transportadora</label>
                            <input class="form-control {{ !$envio->transportadora ? 'border-warning' : '' }}"
                                   name="transportadora"
                                   value="{{ old('transportadora', $envio->transportadora) }}"
                                   placeholder="Ej: Servientrega, DHL, Coordinadora…"
                                   autocomplete="off">
                            @if (!$envio->transportadora)
                                <div class="form-text text-warning"><i class="bx bx-error-circle me-1"></i>Pendiente por asignar</div>
                            @endif
                        </div>
                        <div class="col-md-4">
                            <label class="form-label form-label-sm fw-semibold">N° de guía</label>
                            <input class="form-control {{ !$envio->numero_guia ? 'border-warning' : '' }}"
                                   name="numero_guia"
                                   value="{{ old('numero_guia', $envio->numero_guia) }}"
                                   placeholder="Número de guía de la transportadora"
                                   autocomplete="off">
                            @if (!$envio->numero_guia)
                                <div class="form-text text-warning"><i class="bx bx-error-circle me-1"></i>Pendiente por asignar</div>
                            @endif
                        </div>
                        <div class="col-md-4">
                            <label class="form-label form-label-sm fw-semibold">Observaciones</label>
                            <textarea class="form-control" name="observaciones" rows="2"
                                      placeholder="Instrucciones especiales, notas de entrega…">{{ old('observaciones', $envio->observaciones) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Destinatario ──────────────────────────────────────── --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100" style="border-radius:12px">
                <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4 d-flex align-items-center justify-content-between">
                    <h2 class="h6 mb-0 fw-bold"><i class="bx bxs-map-pin me-2 text-primary"></i>Destinatario</h2>
                    @if ($envio->cliente)
                        <span class="text-muted" style="font-size:.75rem">
                            <i class="bx bx-user me-1"></i>{{ $envio->cliente->nombre }}
                        </span>
                    @endif
                </div>
                <div class="card-body px-4 pb-4">
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Nombre *</label>
                        <input class="form-control form-control-sm" name="destinatario_nombre"
                               value="{{ old('destinatario_nombre', $envio->destinatario_nombre) }}" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Teléfono</label>
                        <input class="form-control form-control-sm" name="destinatario_telefono"
                               value="{{ old('destinatario_telefono', $envio->destinatario_telefono) }}">
                    </div>
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Dirección *</label>
                        <input class="form-control form-control-sm" name="destinatario_direccion"
                               value="{{ old('destinatario_direccion', $envio->destinatario_direccion) }}" required>
                    </div>
                    <div class="row g-2 mb-2">
                        <div class="col-6">
                            <label class="form-label form-label-sm">Ciudad *</label>
                            <input class="form-control form-control-sm" name="destinatario_ciudad"
                                   value="{{ old('destinatario_ciudad', $envio->destinatario_ciudad) }}" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label form-label-sm">Departamento</label>
                            <input class="form-control form-control-sm" name="destinatario_departamento"
                                   value="{{ old('destinatario_departamento', $envio->destinatario_departamento) }}">
                        </div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label form-label-sm">País</label>
                        <input class="form-control form-control-sm" name="destinatario_pais"
                               value="{{ old('destinatario_pais', $envio->destinatario_pais ?: 'Colombia') }}">
                    </div>

                    @if ($envio->cliente_id)
                        <div class="form-check mt-3 p-3 rounded-3" style="background:#f0fdf4;border:1px solid #bbf7d0">
                            <input class="form-check-input" type="checkbox" id="actualizarCliente"
                                   name="actualizar_cliente" value="1">
                            <label class="form-check-label" for="actualizarCliente" style="font-size:.82rem">
                                <strong>Actualizar datos del cliente</strong>
                                <div class="text-muted" style="font-size:.75rem">
                                    Guardará dirección, ciudad, departamento y país en el perfil del cliente.
                                </div>
                            </label>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- ── Contenido + Estado + Rótulo ──────────────────────── --}}
        <div class="col-lg-6 d-flex flex-column gap-3">

            {{-- Contenido --}}
            <div class="card border-0 shadow-sm" style="border-radius:12px">
                <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                    <h2 class="h6 mb-0 fw-bold"><i class="bx bxs-package me-2 text-warning"></i>Contenido del paquete</h2>
                </div>
                <div class="card-body px-4 pb-4">
                    <div class="mb-2">
                        <label class="form-label form-label-sm d-flex align-items-center gap-2">
                            Descripción *
                            @if ($envio->venta_id)
                                <span class="badge bg-info-subtle text-info" style="font-size:.65rem">
                                    <i class="bx bx-receipt me-1"></i>auto desde venta
                                </span>
                            @endif
                        </label>
                        <input class="form-control form-control-sm" name="descripcion_contenido"
                               value="{{ old('descripcion_contenido', $envio->descripcion_contenido) }}" required>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label form-label-sm d-flex align-items-center gap-1">
                                Peso (kg)
                                @if ($envio->venta_id)
                                    <span class="badge bg-info-subtle text-info" style="font-size:.65rem">auto</span>
                                @endif
                            </label>
                            <input type="number" step="0.001" min="0" class="form-control form-control-sm"
                                   name="peso_kg"
                                   value="{{ old('peso_kg', number_format((float)$envio->peso_kg, 3, '.', '')) }}">
                        </div>
                        <div class="col-6">
                            <label class="form-label form-label-sm">Valor declarado</label>
                            <input type="number" step="0.01" min="0" class="form-control form-control-sm"
                                   name="valor_declarado"
                                   value="{{ old('valor_declarado', $envio->valor_declarado) }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Estado --}}
            <div class="card border-0 shadow-sm" style="border-radius:12px">
                <div class="card-body p-4">
                    <h2 class="h6 mb-3 fw-bold"><i class="bx bx-transfer me-2 text-primary"></i>Actualizar estado</h2>
                    <div class="row g-2">
                        <div class="col-12">
                            <select name="estado" class="form-select form-select-sm">
                                @foreach ($estados as $key => $meta)
                                    <option value="{{ $key }}" @selected(old('estado', $envio->estado) === $key)>
                                        {{ $meta['label'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <input class="form-control form-control-sm" name="nota_estado"
                                   placeholder="Nota del cambio de estado (opcional)">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Rótulo --}}
            @if (has_permission('rotulos.generar') && $envio->rotulos()->count() === 0)
                <div class="card border-0 shadow-sm" style="border-radius:12px">
                    <div class="card-body p-4">
                        <h2 class="h6 mb-3 fw-bold"><i class="bx bx-qr me-2 text-info"></i>Generar rótulo al guardar</h2>
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="genRotuloEdit"
                                   name="generar_rotulo" value="1">
                            <label class="form-check-label" for="genRotuloEdit" style="font-size:.85rem">
                                Generar rótulo automáticamente
                            </label>
                        </div>
                        <div id="fmtSectionEdit">
                            <label class="form-label form-label-sm">Formato</label>
                            <select name="formato_rotulo" class="form-select form-select-sm">
                                @foreach ($formatos as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            @endif

        </div>

    </div>

    {{-- Productos de la venta (solo lectura) --}}
    @if ($envio->venta && $envio->venta->detalles->count())
        <div class="card border-0 shadow-sm mt-3" style="border-radius:12px">
            <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                <h2 class="h6 mb-0 fw-bold"><i class="bx bx-receipt me-2 text-success"></i>Productos de la venta</h2>
            </div>
            <div class="card-body px-4 pt-2">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Producto</th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($envio->venta->detalles as $d)
                                <tr>
                                    <td>{{ $d->producto?->nombre ?? 'Producto eliminado' }}</td>
                                    <td class="text-center">{{ number_format((float)$d->cantidad, 0) }}</td>
                                    <td class="text-end">${{ number_format((float)$d->total_linea, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="table-light fw-semibold">
                                <td colspan="2" class="text-end">Total venta</td>
                                <td class="text-end">${{ number_format((float)$envio->venta->total, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    @endif

    <div class="d-flex gap-2 justify-content-end mt-4">
        <a href="{{ route('envios.show', $envio) }}" class="btn btn-outline-secondary">Cancelar</a>
        <button type="submit" class="btn btn-primary px-4">
            <i class="bx bx-save me-1"></i>Guardar cambios
        </button>
    </div>

</form>

@endsection

@push('scripts')
<script>
(function () {
    const toggle = document.getElementById('genRotuloEdit');
    const section = document.getElementById('fmtSectionEdit');
    if (toggle && section) {
        const update = () => {
            section.style.opacity = toggle.checked ? '1' : '.4';
            section.style.pointerEvents = toggle.checked ? 'auto' : 'none';
        };
        toggle.addEventListener('change', update);
        update();
    }
})();
</script>
@endpush