@extends('layouts.app')

@section('title', 'Nuevo Envío | Veltrix v2')

@section('content')

<div class="d-flex align-items-center gap-2 mb-3">
    <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">Nuevo envío</h1>
    <span class="badge bg-light text-secondary border">{{ $nextNumero }}</span>
</div>

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

<form method="POST" action="{{ route('envios.store') }}">
    @csrf
    <div class="row g-3">

        {{-- Destinatario --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                    <h2 class="h6 mb-0"><i class="bx bxs-map-pin me-2 text-primary"></i>Destinatario</h2>
                </div>
                <div class="card-body px-4">
                    {{-- Pre-fill from cliente --}}
                    @if ($clientes->count())
                        <div class="mb-3">
                            <label class="form-label form-label-sm">Cargar desde cliente (opcional)</label>
                            <select id="selectCliente" name="cliente_id" class="form-select form-select-sm">
                                <option value="">— Seleccionar cliente —</option>
                                @foreach ($clientes as $c)
                                    <option value="{{ $c->id }}"
                                        data-nombre="{{ $c->nombre }}"
                                        data-telefono="{{ $c->telefono }}"
                                        data-direccion="{{ $c->direccion }}"
                                        @selected(old('cliente_id') == $c->id)
                                    >{{ $c->nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                        <hr class="my-2">
                    @endif

                    <div class="mb-2">
                        <label class="form-label form-label-sm">Nombre *</label>
                        <input class="form-control form-control-sm" id="destNombre" name="destinatario_nombre" value="{{ old('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" id="destTelefono" name="destinatario_telefono" value="{{ old('destinatario_telefono') }}">
                    </div>
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Dirección *</label>
                        <input class="form-control form-control-sm" id="destDireccion" name="destinatario_direccion" value="{{ old('destinatario_direccion') }}" required>
                    </div>
                    <div class="row g-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') }}" 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') }}">
                        </div>
                    </div>
                    <div class="mt-2">
                        <label class="form-label form-label-sm">País</label>
                        <input class="form-control form-control-sm" name="destinatario_pais" value="{{ old('destinatario_pais', 'Colombia') }}">
                    </div>
                </div>
            </div>
        </div>

        {{-- Remitente --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                    <h2 class="h6 mb-0"><i class="bx bxs-store me-2 text-success"></i>Remitente</h2>
                </div>
                <div class="card-body px-4">
                    @if ($empresa)
                        <div class="alert alert-info py-2 d-flex align-items-center gap-2 mb-3" style="font-size:.8rem">
                            <i class="bx bx-info-circle fs-5"></i>
                            <span>Datos pre-llenados desde tu empresa. Puedes editarlos.</span>
                        </div>
                    @endif
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Nombre *</label>
                        <input class="form-control form-control-sm" name="remitente_nombre"
                               value="{{ old('remitente_nombre', $empresa?->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="remitente_telefono"
                               value="{{ old('remitente_telefono', $empresa?->telefono ?? '') }}">
                    </div>
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Dirección</label>
                        <input class="form-control form-control-sm" name="remitente_direccion"
                               value="{{ old('remitente_direccion', $empresa?->direccion ?? '') }}">
                    </div>
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Ciudad</label>
                        <input class="form-control form-control-sm" name="remitente_ciudad"
                               value="{{ old('remitente_ciudad', '') }}">
                    </div>
                </div>
            </div>
        </div>

        {{-- Contenido y logística --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                    <h2 class="h6 mb-0"><i class="bx bxs-package me-2 text-warning"></i>Contenido y logística</h2>
                </div>
                <div class="card-body px-4">
                    <div class="mb-2">
                        <label class="form-label form-label-sm">Descripción del contenido *</label>
                        <input class="form-control form-control-sm" name="descripcion_contenido"
                               value="{{ old('descripcion_contenido') }}" placeholder="Ej: Ropa, Electrónico, Documentos…" required>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label form-label-sm">Peso (kg)</label>
                            <input type="number" step="0.001" min="0" class="form-control form-control-sm" name="peso_kg" value="{{ old('peso_kg', '0') }}">
                        </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') }}" placeholder="Opcional">
                        </div>
                    </div>
                    <div class="row g-2 mt-1">
                        <div class="col-6">
                            <label class="form-label form-label-sm">Transportadora</label>
                            <input class="form-control form-control-sm" name="transportadora" value="{{ old('transportadora') }}" placeholder="Ej: Servientrega, DHL…">
                        </div>
                        <div class="col-6">
                            <label class="form-label form-label-sm">N° de guía</label>
                            <input class="form-control form-control-sm" name="numero_guia" value="{{ old('numero_guia') }}">
                        </div>
                    </div>
                    <div class="mt-2">
                        <label class="form-label form-label-sm">Observaciones</label>
                        <textarea class="form-control form-control-sm" name="observaciones" rows="2">{{ old('observaciones') }}</textarea>
                    </div>
                    @if ($pedidos->count())
                        <div class="mt-2">
                            <label class="form-label form-label-sm">Vincular pedido WhatsApp (opcional)</label>
                            <select name="pedido_manychat_id" class="form-select form-select-sm">
                                <option value="">— Ninguno —</option>
                                @foreach ($pedidos as $p)
                                    <option value="{{ $p->id }}" @selected(old('pedido_manychat_id') == $p->id)>#{{ $p->id }} — {{ $p->cliente_nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Generar rótulo --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pb-0 pt-3 px-4">
                    <h2 class="h6 mb-0"><i class="bx bx-qr me-2 text-info"></i>Rótulo de envío</h2>
                </div>
                <div class="card-body px-4">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="genRotulo" name="generar_rotulo" value="1" @checked(old('generar_rotulo', true))>
                        <label class="form-check-label fw-semibold" for="genRotulo">Generar rótulo al crear</label>
                    </div>
                    <div id="formatoSection">
                        <label class="form-label form-label-sm">Formato del rótulo</label>
                        <div class="row g-2">
                            @foreach ($formatos as $key => $label)
                                <div class="col-6">
                                    <label class="d-block border rounded p-2 text-center cursor-pointer {{ old('formato_rotulo', '10x15') === $key ? 'border-primary bg-primary bg-opacity-10' : '' }}"
                                           style="cursor:pointer;transition:all .15s" id="fmt-label-{{ $key }}">
                                        <input type="radio" name="formato_rotulo" value="{{ $key }}"
                                               class="d-none vx-fmt-radio"
                                               @checked(old('formato_rotulo', '10x15') === $key)>
                                        <i class="bx bx-receipt d-block fs-4 mb-1 {{ old('formato_rotulo', '10x15') === $key ? 'text-primary' : 'text-muted' }}"></i>
                                        <span class="fw-semibold" style="font-size:.78rem">{{ $label }}</span>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="d-flex gap-2 justify-content-end mt-3">
        <a href="{{ route('envios.index') }}" class="btn btn-outline-secondary">Cancelar</a>
        <button type="submit" class="btn btn-primary px-4"><i class="bx bx-save me-1"></i>Crear envío</button>
    </div>
</form>

@endsection

@push('scripts')
<script>
(function () {
    // Pre-fill from cliente selector
    const sel = document.getElementById('selectCliente');
    if (sel) {
        sel.addEventListener('change', function () {
            const opt = this.options[this.selectedIndex];
            if (opt.value) {
                const d = opt.dataset;
                document.getElementById('destNombre').value    = d.nombre || '';
                document.getElementById('destTelefono').value  = d.telefono || '';
                document.getElementById('destDireccion').value = d.direccion || '';
            }
        });
    }

    // Toggle formato section
    const toggle = document.getElementById('genRotulo');
    const section = document.getElementById('formatoSection');
    if (toggle && section) {
        const update = () => { section.style.opacity = toggle.checked ? '1' : '.4'; section.style.pointerEvents = toggle.checked ? 'auto' : 'none'; };
        toggle.addEventListener('change', update);
        update();
    }

    // Format radio UI
    document.querySelectorAll('.vx-fmt-radio').forEach(radio => {
        radio.addEventListener('change', function () {
            document.querySelectorAll('.vx-fmt-radio').forEach(r => {
                const lbl = document.getElementById('fmt-label-' + r.value);
                if (lbl) {
                    lbl.classList.toggle('border-primary', r.checked);
                    lbl.classList.toggle('bg-primary', r.checked);
                    lbl.classList.toggle('bg-opacity-10', r.checked);
                    const icon = lbl.querySelector('i');
                    if (icon) { icon.classList.toggle('text-primary', r.checked); icon.classList.toggle('text-muted', !r.checked); }
                }
            });
        });
    });
})();
</script>
@endpush