@extends('layouts.app')

@section('title', 'Configuración Envíos | Veltrix v2')

@section('content')

@php
    $autoPOS        = ($settings['envios.auto_pos'] ?? '0') === '1';
    $usarEmpresa    = ($settings['envios.remitente_usar_empresa'] ?? '1') !== '0';
    $remNombre      = $settings['envios.remitente_nombre'] ?? '';
    $remTelefono    = $settings['envios.remitente_telefono'] ?? '';
    $remDireccion   = $settings['envios.remitente_direccion'] ?? '';
    $remCiudad      = $settings['envios.remitente_ciudad'] ?? '';
@endphp

{{-- Hero --}}
<div class="rounded-4 mb-4 px-4 py-4 d-flex align-items-center gap-3"
     style="background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:#fff">
    <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
         style="width:52px;height:52px;background:rgba(255,255,255,.1)">
        <i class="bx bxs-truck fs-3"></i>
    </div>
    <div>
        <h1 class="h4 mb-1 fw-bold">Configuración de Envíos</h1>
        <p class="mb-0 opacity-75" style="font-size:.85rem">Controla la generación automática de envíos desde el POS y el remitente por defecto.</p>
    </div>
    <a href="{{ route('configuracion.index') }}" class="btn btn-sm ms-auto" style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2)">
        <i class="bx bx-arrow-back me-1"></i>Volver
    </a>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show mb-3" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

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

        {{-- POS Integration --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                             style="width:40px;height:40px;background:#ede9fe;flex-shrink:0">
                            <i class="bx bxs-cart-add" style="color:#7c3aed;font-size:1.2rem"></i>
                        </div>
                        <div>
                            <h2 class="h6 mb-0">Rótulo de envío en POS</h2>
                            <p class="text-muted mb-0" style="font-size:.78rem">Genera un envío automáticamente al completar una venta.</p>
                        </div>
                    </div>

                    <div class="d-flex align-items-center justify-content-between p-3 rounded-3 mb-3"
                         style="background:#f8fafc;border:1px solid #e2e8f0">
                        <div>
                            <div class="fw-semibold" style="font-size:.9rem">Activar generación automática</div>
                            <div class="text-muted" style="font-size:.75rem">Cada venta con cliente creará un envío pendiente.</div>
                        </div>
                        <div class="form-check form-switch mb-0 ms-3">
                            <input class="form-check-input" type="checkbox" role="switch"
                                   id="autoPOS" name="auto_pos" value="1" @checked($autoPOS)
                                   style="width:2.5rem;height:1.3rem">
                        </div>
                    </div>

                    <div class="p-3 rounded-3" style="background:#fef9c3;border:1px solid #fde68a;font-size:.78rem">
                        <i class="bx bx-info-circle me-1 text-warning"></i>
                        Solo se genera el envío si la venta tiene un cliente asociado. Los datos de contenido se llenan automáticamente desde los productos vendidos.
                    </div>
                </div>
            </div>
        </div>

        {{-- Remitente --}}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div class="rounded-circle d-flex align-items-center justify-content-center"
                             style="width:40px;height:40px;background:#dcfce7;flex-shrink:0">
                            <i class="bx bxs-store" style="color:#16a34a;font-size:1.2rem"></i>
                        </div>
                        <div>
                            <h2 class="h6 mb-0">Remitente</h2>
                            <p class="text-muted mb-0" style="font-size:.78rem">Datos del remitente que aparecen en el rótulo.</p>
                        </div>
                    </div>

                    {{-- Toggle --}}
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <label class="fw-semibold" style="font-size:.85rem">Usar datos de la empresa</label>
                        <div class="form-check form-switch ms-auto mb-0">
                            <input class="form-check-input" type="checkbox" role="switch"
                                   id="usarEmpresa" name="remitente_usar_empresa" value="1"
                                   @checked($usarEmpresa)
                                   style="width:2.5rem;height:1.3rem">
                        </div>
                    </div>

                    {{-- Empresa preview --}}
                    <div id="empresaPreview" class="{{ !$usarEmpresa ? 'd-none' : '' }}">
                        <div class="p-3 rounded-3 mb-3" style="background:#f0fdf4;border:1px solid #bbf7d0">
                            <div class="fw-semibold" style="font-size:.85rem">{{ $empresa?->nombre }}</div>
                            @if ($empresa?->telefono)
                                <div class="text-muted" style="font-size:.75rem"><i class="bx bx-phone me-1"></i>{{ $empresa->telefono }}</div>
                            @endif
                            @if ($empresa?->direccion)
                                <div class="text-muted" style="font-size:.75rem"><i class="bx bx-map me-1"></i>{{ $empresa->direccion }}</div>
                            @endif
                        </div>
                    </div>

                    {{-- Custom remitente --}}
                    <div id="customRemitente" class="{{ $usarEmpresa ? 'd-none' : '' }}">
                        <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', $remNombre) }}">
                        </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', $remTelefono) }}">
                        </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', $remDireccion) }}">
                        </div>
                        <div>
                            <label class="form-label form-label-sm">Ciudad</label>
                            <input class="form-control form-control-sm" name="remitente_ciudad" value="{{ old('remitente_ciudad', $remCiudad) }}">
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- Rótulo por defecto --}}
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h2 class="h6 mb-3"><i class="bx bx-qr me-2 text-info"></i>Información sobre el rótulo</h2>
                    <div class="row g-3">
                        <div class="col-md-3 text-center">
                            <div class="p-3 rounded-3 h-100" style="background:#f0f9ff;border:1px solid #bae6fd">
                                <i class="bx bx-qr fs-2 text-info d-block mb-2"></i>
                                <div class="fw-semibold" style="font-size:.82rem">Código QR</div>
                                <div class="text-muted" style="font-size:.72rem">Incluido automáticamente en cada rótulo</div>
                            </div>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="p-3 rounded-3 h-100" style="background:#f0f9ff;border:1px solid #bae6fd">
                                <i class="bx bx-barcode fs-2 text-info d-block mb-2"></i>
                                <div class="fw-semibold" style="font-size:.82rem">Código de barras</div>
                                <div class="text-muted" style="font-size:.72rem">Code-128, generado por rótulo</div>
                            </div>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="p-3 rounded-3 h-100" style="background:#f0f9ff;border:1px solid #bae6fd">
                                <i class="bx bx-printer fs-2 text-info d-block mb-2"></i>
                                <div class="fw-semibold" style="font-size:.82rem">4 formatos</div>
                                <div class="text-muted" style="font-size:.72rem">10×15 cm, media carta, carta, térmica</div>
                            </div>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="p-3 rounded-3 h-100" style="background:#f0f9ff;border:1px solid #bae6fd">
                                <i class="bxs-file-pdf fs-2 text-info d-block mb-2" style="font-family:'boxicons'!important"></i>
                                <div class="fw-semibold" style="font-size:.82rem">PDF descargable</div>
                                <div class="text-muted" style="font-size:.72rem">Descarga o imprime directamente</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="d-flex justify-content-end mt-3">
        <button type="submit" class="btn btn-primary px-5"><i class="bx bx-save me-1"></i>Guardar configuración</button>
    </div>
</form>

@endsection

@push('scripts')
<script>
(function () {
    const toggle = document.getElementById('usarEmpresa');
    const preview = document.getElementById('empresaPreview');
    const custom  = document.getElementById('customRemitente');
    if (toggle && preview && custom) {
        toggle.addEventListener('change', function () {
            preview.classList.toggle('d-none', !this.checked);
            custom.classList.toggle('d-none', this.checked);
        });
    }
})();
</script>
@endpush