@extends('front.layouts.main')
@section('contenido')

<style>
    #perfil .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
        background: #FF5600;
        color: #fff;
    }
    #perfil .nav-link {
        color: #000;
        font-size: 13px;
    }
    #perfil .table tr th {
        font-size: 12px;
    }
    #perfil .table tr th, #perfil .table tr td {
        color: #000;
    }
    .col-20 {
        float: left;
        width: 20%;
    }
    .dir_casilla {
        display: none;
    }
    @media screen and (max-width: 991px) {
        .col-20 {
            width: 100%;
        }
        .direccion_casilla {
            display: none;
        }
        .dir_casilla {
            display: block;
            float: left; 
            margin-right: 10px;
        }
    }
</style>

<div class="col-12 fondo_subpagina">
    <div class="col-12 espacio_header">

    </div>
</div>

<div class="col-12 pt-lg-5 pt-3 pb-lg-5 pb-3" style="margin-bottom: 25px; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('{{ asset('img/bg/bg.png') }}'); background-size: cover; background-attachment: fixed; background-position: center;">
    <div class="container">
        <div class="col-12">
            <div class="row g-3">
                <div class="col-lg-4 text-white">
                    <h1>Portal</h1>
                    <p class="mb-2">
                        Bienvenido, {{ auth()->user()->name }} | 
                        @php
                            $casilla = DB::table('casilla')
                            ->where('usuario_id', '=', auth()->user()->usuario_id)
                            ->first(); 
                        @endphp
                        Casilla: {{ $casilla->casilla }}
                    </p>
                    <p class="mb-0"><a href="{{ route('principal') }}" class="a_naranja">Inicio</a> / Portal</p>
                    <button data-bs-toggle="modal" data-bs-target="#modalTracking" class="btn btn-secondary mt-3">Localiza tu paquete</button>
                    <button class="btn btn-secondary mt-3 dir_casilla" data-bs-toggle="modal" data-bs-target="#modalDireccionCasilla">Direcciones de casilla</button>
                </div>
                <div class="col-lg-8 direccion_casilla">
                    <div class="row g-3">
                        <div class="col-lg-4">
                            <div class="col-12">
                                <p class="text-white">MIAMI / USA</p>
                                <p style="color: #909090; font-size: 13px;">
                                    1350 NW 121 AVE A400.
                                    Miami, FL 33182
                                </p>
                                <p style="color: #909090; font-size: 13px;">
                                    +1 (305) 491-8550
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="col-12">
                                <p class="text-white">MÁLAGA / ESPAÑA</p>
                                <p style="color: #909090; font-size: 13px;">
                                    Calle de los Artistas N° 14, DENVER 75 SL. Madrid, Madrid 28020
                                </p>
                                <p style="color: #909090; font-size: 13px;">
                                    +1 (305) 491-8550
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="col-12">
                                <p class="text-white">MIAMI / USA (MARÍTIMO)</p>
                                <p style="color: #909090; font-size: 13px;">
                                    1325 nw 78th Ave
                                    Miami, FL 33126
                                </p>
                                <p style="color: #909090; font-size: 13px;">
                                    +1 (305) 951-5625
                                </p>
                                <p style="color: #909090; font-size: 13px;">
                                    Suite o Ref: Homebox
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="col-12 pt-lg-5 pb-lg-5 pt-3 pb-3" id="perfil">
    <div class="container">
        <div class="col-12">
            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Mis paquetes</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-entregado-tab" data-bs-toggle="pill" data-bs-target="#pills-entregado" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Paquetes Entregados</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Perfil</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Mis direcciones</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false">Facturación</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-autorizacion-tab" data-bs-toggle="pill" data-bs-target="#pills-autorizacion" type="button" role="tab" aria-controls="pills-autorizacion" aria-selected="false">Autorización</button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                {{-- MIS PAQUETES --}}
                @include('front.panel.mis-paquetes')
                {{-- ENTREGADOS --}}
                <div class="tab-pane fade" id="pills-entregado" role="tabpanel" aria-labelledby="pills-entregado-tab" tabindex="0">
                    <div class="col-12">
                        <div class="col-12 bg-white rounded p-4">
                            <div class="col-12">
                                <p>Paquetes entregados</p>
                            </div>

                            @if(($paquetesEntregados ?? collect())->isEmpty())
                                <div class="col-12">
                                    <div class="alert alert-light border mb-0">
                                        No tenés paquetes entregados todavía.
                                    </div>
                                </div>
                            @else
                                <div class="col-12">
                                    <div class="row g-3">

                                        @foreach($paquetesEntregados as $p)
                                            @php
                                                $fecha    = \Carbon\Carbon::parse($p->fecha_creacion)->format('d/m/Y');
                                                $valorF = (int) preg_replace('/\D+/', '', (string)($p->valor ?? '0'));
                                                $valorFmt = number_format((float)($valorF), 0, ',', '.'); // ← 2 decimales
                                                $pesoFmt  = number_format((float)($p->peso ?? 0), 3, ',', '.');  // ← 2 decimales
                                            @endphp


                                            <div class="col-12 border rounded bg-light p-0">
                                                <div class="col-12 p-3 border-bottom" style="background: rgba(255, 86, 0, .1); overflow: hidden;">
                                                    <div class="col-20 mb-lg-0 mb-2">
                                                        <p style="font-size: 13px;" class="mb-0">FECHA</p>
                                                        <p style="font-size: 13px;" class="mb-0">{{ $fecha }}</p>
                                                    </div>
                                                    <div class="col-20 mb-lg-0 mb-2">
                                                        <p style="font-size: 13px;" class="mb-0">TOTAL</p>
                                                        <p style="font-size: 13px;" class="mb-0">Gs. {{ $valorFmt }}</p>
                                                    </div>
                                                    <div class="col-20 mb-lg-0 mb-2">
                                                        <p style="font-size: 13px;" class="mb-0">ESTADO</p>
                                                        <p class="mb-0" style="font-size: 13px;">
                                                            <span class="badge bg-success">Entregado</span>
                                                        </p>
                                                    </div>
                                                    <div class="col-20 mb-lg-0 mb-2">
                                                        <p style="font-size: 13px;" class="mb-0">PAQUETE #</p>
                                                        <p style="font-size: 13px;" class="mb-0">{{ $p->paquete_id }}</p>
                                                    </div>
                                                    <div class="col-20 mb-lg-0 mb-2">
                                                        {{-- reservado por si querés poner un botón o link --}}
                                                    </div>
                                                </div>

                                                <div class="col-12 p-2">
                                                    <div class="row g-3">
                                                        <div class="col-lg-12">
                                                            <div class="col-12">
                                                                <div class="row g-3">
                                                                    <div class="col-lg-10">
                                                                        <div class="col-12 p-2">
                                                                            <h5 class="text-success">Entregado</h5>
                                                                        </div>
                                                                        <table class="table table-borderless">
                                                                            <tr>
                                                                                <td>
                                                                                    <p class="mb-0 activo">{{ $p->descripcion }}</p>
                                                                                    <p class="mb-0">{{ $p->proveedor_nombre }}</p>
                                                                                    <p class="mb-0">Vendido por: {{ $p->proveedor_nombre ?? '-' }}</p>
                                                                                    <p class="mb-0">Peso: {{ $pesoFmt }} gr.</p>
                                                                                    <p class="mb-0">Costo: Gs. {{ $valorFmt }}</p>
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                    </div>
                                                                    <div class="col-lg-2 pt-lg-4 pt-0 mt-lg-3 mt-0">
                                                                        <button class="btn btn-success w-100 mb-1" disabled>
                                                                            <i class="fa-solid fa-check"></i> Entregado
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>
                </div>
                {{-- PERFIL --}}
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                    <div class="col-12">
                        <div class="col-12 bg-white rounded p-4">
                            <div class="col-12">
                                <p>Perfil</p>
                            </div>
                            <form action="" id="editarPerfil">
                                <div class="col-12">
                                    <div class="row g-3">
                                        <div class="col-lg-6">
                                            <input type="hidden" name="usuario_id" id="id_usuario" value="{{ auth()->user()->usuario_id }}" class="form-control">
                                            <div class="form-floating">
                                                <input type="text" name="nombres" value="{{ auth()->user()->persona->nombres }}" class="form-control">
                                                <label for="">Nombre</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                <input type="text" name="apellidos" value="{{ auth()->user()->persona->apellidos }}" class="form-control">
                                                <label for="">Apellido</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                <input type="text" name="ruc" value="{{ auth()->user()->persona->valor_documento }}" class="form-control">
                                                <label for="">RUC</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                @php
                                                    $tipoDoc = auth()->user()->persona->tipo_documento ?? null;
                                                @endphp
                                                <select name="tipo_documento" id="tipo_documento" class="form-control">
                                                    <option value="" disabled {{ is_null($tipoDoc) ? 'selected' : '' }}>Seleccione una opción</option>
                                                    <option value="9" {{ $tipoDoc == 9 ? 'selected' : '' }}>Cédula de identidad</option>
                                                    {{-- <option value="10" {{ $tipoDoc == 10 ? 'selected' : '' }}>Pasaporte</option> --}}
                                                    <option value="12" {{ $tipoDoc == 12 ? 'selected' : '' }}>RUC</option>
                                                </select>
                                                <label for="">Tipo de documento</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                <input type="date" name="fecha_nacimiento" value="{{ auth()->user()->persona->fecha_nacimiento }}" class="form-control">
                                                <label for="">Fecha de nacimiento</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                <select name="sexo" id="" class="form-control">
                                                    <option value="20" {{ auth()->user()->persona->sexo == 20 ? 'selected' : '' }}>FEMENINO</option>
                                                    <option value="19" {{ auth()->user()->persona->sexo == 19 ? 'selected' : '' }}>MASCULINO</option>
                                                </select>
                                                <label for="">Género</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            @php
                                                $telefono = '';

                                                if( auth()->user()->persona->telefono == null ) {
                                                    $usuario = DB::table('solicitud_registro')
                                                    ->where('email', '=', auth()->user()->codigo_usuario)
                                                    ->first();
                                                    $telefono = $usuario->numero_telefono;
                                                } else {
                                                    $telefono = auth()->user()->persona->telefono;
                                                }
                                            @endphp
                                            <div class="form-floating">
                                                <input type="text" name="telefono" value="{{ $telefono }}" class="form-control">
                                                <label for="">Télefono</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                <input type="email" name="codigo_usuario" value="{{ auth()->user()->codigo_usuario }}" class="form-control">
                                                <label for="">Correo electrónico</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                <select name="oficina_comercial_id" id="oficina_comercial_id" class="form-control" required>
                                                    <option value="" disabled {{ empty(auth()->user()->oficina_comercial_id) ? 'selected' : '' }}>
                                                        Seleccione una sucursal
                                                    </option>
                                                    @foreach($oficinasPermitidas ?? [] as $of)
                                                        <option value="{{ $of->oficina_comercial_id }}"
                                                            {{ (int)auth()->user()->oficina_comercial_id === (int)$of->oficina_comercial_id ? 'selected' : '' }}>
                                                            {{ $of->nombre }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <label for="oficina_comercial_id">Oficina comercial</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-orange">ACTUALIZAR</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                {{-- MIS DIRECCIONES --}}
                <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                    <div class="col-12">
                        <div class="col-12 bg-white rounded p-4">
                            <div class="col-12">
                                <table class="table table-borderless">
                                    <tr class="align-middle">
                                        <td>
                                            <p class="mb-0"> Mis direcciones</p>
                                        </td>
                                        <td style="text-align: right;">
                                            <buton data-bs-toggle="modal" data-bs-target="#modalAgregarDireccion" class="btn btn-light" style="float: right;">
                                                <i class="fa-solid fa-plus"></i> Agregar
                                            </buton>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-12 pt-3 mt-3 border-top" id="tablaDirecciones">
                                @include('front.panel.complementos.tablaDirecciones')
                            </div>
                        </div>
                    </div>
                </div>
                {{-- FACTURACIÓN --}}
                <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
                    <div class="col-12">
                        <div class="col-12 bg-white rounded p-4">
                            <div class="col-12">
                                <table class="table table-borderless">
                                    <tr class="align-middle">
                                        <td>
                                            <p class="mb-0">Facturación</p>
                                        </td>
                                        <td style="text-align: right;">
                                            <buton data-bs-toggle="modal" data-bs-target="#modalFacturacionAgregar" class="btn btn-light" style="float: right;">
                                                <i class="fa-solid fa-plus"></i> Agregar
                                            </buton>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                            <div class="col-12 border-top pt-3" id="tablaFactura">
                                @include('front.panel.complementos.tablaFactura')
                            </div>

                        </div>
                    </div>
                </div>
                {{-- AUTORIZACION A TERCEROS --}}
                <div class="tab-pane fade" id="pills-autorizacion" role="tabpanel" aria-labelledby="pills-autorizacion-tab" tabindex="0">
                    <div class="col-12">
                        <div class="col-12 bg-white rounded p-4">
                            <div class="col-12">
                                <p>Persona a autorizar</p>
                            </div>
                            <div class="col-12">
                                <form action="" id="agregarTerceros">
                                    <div class="row g-3">
                                        <div class="col-lg-6">
                                            <input type="hidden" name="persona_id" value="{{ auth()->user()->persona->persona_id }}" class="form-control">
                                            <div class="form-floating">
                                                <input type="text" name="nombre" id="nombre_terceros" class="form-control">
                                                <label for="">Nombre y apellido</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating">
                                                <input type="text" name="documento" class="form-control">
                                                <label for="">Cédula de identidad</label>
                                            </div>
                                        </div>
                                        <div class="col-12 mt-4">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="radio" name="vigencia" id="radioPermanente" value="1">
                                                <label class="form-check-label" for="radioPermanente">
                                                    Permanente
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="vigencia" id="radioTemporal" value="0" checked>
                                                <label class="form-check-label" for="radioTemporal">
                                                    Temporal
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-orange">AUTORIZAR</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                            <div class="col-12 border-top pt-3 mt-3 table-responsive" id="tablaTerceros">
                                @include('front.panel.complementos.tablaTerceros')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal Pagar -->
<div class="modal fade" id="modalPagar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Pago</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col-12">
                    <div class="col-12">
                        <p style="font-size: 13px;">Seleccione paquetes a pagar</p>
                    </div>

                    {{-- FORM QUE ENVÍA A /checkout/paquetes --}}
                    <form id="formPagarPaquetes" method="POST" action="{{ route('checkout.paquetes.pagar') }}">
                        @csrf

                        <div class="col-12 mb-2" id="detalles_pagar"></div>

                        <div class="col-12" id="total_pagar"></div>
                    </form>

                    <div class="col-12 mt-4">
                        <div class="row g-3">
                            <div class="col-12">
                                <p class="mb-0" style="font-size: 13px;">Seleccione los datos para la factura y envío</p>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <select name="" id="" class="form-control">
                                        <option value="" disabled selected>Seleccione factura</option>
                                        <option value="">Won Ho Kim | RUC/C.I.Nº: 4.225.389-6</option>
                                        <option value="">Larura Santa María | RUC/C.I.Nº: 3.970.781-4</option>
                                    </select>
                                    <label for="">Facturación</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <select name="" id="" class="form-control">
                                        <option value="" disabled selected>Seleccione envío o sucursal</option>
                                        <optgroup label="Delivery">
                                            <option value="">Arasa 909 esq. 11 de septiembre</option>
                                            <option value="">Carretera de Lopez esq. Juan R. Frentes</option>
                                        </optgroup>
                                        <optgroup label="Retirar desde sucursal">
                                            <option value="">Sucursal</option>
                                        </optgroup>
                                    </select>
                                    <label for="">Facturación</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 border-top pt-3 mt-3 text-center">
                        <p class="mb-0" style="font-size: 13px;">Pague seguro con: </p>
                        <img src="{{ asset('img/logo/pagopar.png') }}" style="width: 150px; margin: 0 auto;" alt="">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                {{-- ESTE botón envía el form --}}
                <button type="button" class="btn btn-orange" id="btnProcesarPago">Procesar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Calculadora -->
<div class="modal fade" id="modalCalculadora" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Cotización</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formCotizacion" class="row g-3">
                    <div class="col-lg-12">
                        <div class="form-floating">
                            <input type="number" step="0.001" min="0.01" class="form-control" id="peso" required>
                            <label for="peso" class="form-label">Peso (kg)</label>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-floating">
                            <select class="form-select" id="origen">
                                <option value="Paraguay" selected>Paraguay</option>
                                <option value="USA">USA</option>
                            </select>
                            <label for="origen" class="form-label">Origen</label>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-floating">
                            <select class="form-select" id="destino">
                                <option value="Paraguay">Paraguay</option>
                                <option value="USA" selected>USA</option>
                            </select>
                            <label for="destino" class="form-label">Destino</label>
                        </div>
                    </div>

                    <div class="col-lg-12">
                        <div class="form-floating">
                            <select class="form-select" id="servicio">
                                <option value="estandar" selected>Estándar</option>
                                <option value="express">Express</option>
                                <option value="maritimo">Marítimo</option>
                            </select>
                            <label for="servicio" class="form-label">Tipo de servicio</label>
                        </div>
                    </div>

                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-orange">Calcular</button>
                    </div>
                </form>

                <div id="resultado" class="mt-4 fs-5 fw-semibold text-success"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Agregar Factura -->
<div class="modal fade" id="modalFacturacionAgregar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Agregar Factura</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="agregarFactura">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-12">
                                <input type="hidden" name="persona_id" id="persona_id_factura" value="{{ auth()->user()->persona->persona_id }}" class="form-control">
                                <div class="form-floating">
                                    <input type="text" name="razon" class="form-control" required>
                                    <label for="">Razón social</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="documento" class="form-control" required>
                                    <label for="">RUC / C.I. Nº</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="telefono" class="form-control">
                                    <label for="">Teléfono</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="direccion" class="form-control">
                                    <label for="">Dirección</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" name="por_defecto" type="checkbox" id="por_defecto">
                                    <label class="form-check-label" for="por_defecto">
                                        Asignar por defecto
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-orange">Agregar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Factura -->
<div class="modal fade" id="modalFacturacionEditar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Editar Factura</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="editarFactura">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-12">
                                <input type="hidden" name="persona_id" id="persona_id_factura_editar" value="{{ auth()->user()->persona->persona_id }}" class="form-control">
                                <input type="hidden" name="id" id="id_factura_editar" class="form-control">
                                <div class="form-floating">
                                    <input type="text" name="razon" id="razon_factura_editar" class="form-control" required>
                                    <label for="">Razón social</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="documento" id="documento_factura_editar" class="form-control" required>
                                    <label for="">RUC / C.I. Nº</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="telefono" id="telefono_factura_editar" class="form-control">
                                    <label for="">Teléfono</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="direccion" id="direccion_factura_editar" class="form-control">
                                    <label for="">Dirección</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" name="por_defecto" type="checkbox" id="por_defecto_factura_editar">
                                    <label class="form-check-label" for="por_defecto_factura_editar">
                                        Asignar por defecto
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-orange">Editar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Agregar Direcciones -->
<div class="modal fade" id="modalAgregarDireccion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Agregar dirección</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="agregarDireccion">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-12">
                                <input type="hidden" name="persona_id" value="{{ auth()->user()->persona->persona_id }}" class="form-control">
                                <div class="form-floating">
                                    <select name="tipo_direccion" id="tipo_direccion" class="form-control">
                                        <option value="" selected disabled>Seleccione ..</option>
                                        <option value="2">Casa</option>
                                        <option value="3">Oficina</option>
                                        <option value="4">Otros</option>
                                    </select>
                                    <label for="">Tipo de dirección</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <select name="ciudad_id" id="ciudad_id" class="form-control">
                                        <option value="" selected disabled>Seleccione ciudad ..</option>
                                        @foreach($ciudad as $c)
                                            <option value="{{ $c->ciudad_id }}">{{ $c->nombre }}</option>
                                        @endforeach
                                    </select>
                                    <label for="">Ciudad</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="calle1" id="calle1" class="form-control">
                                    <label for="">Dirección 1</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="calle2" id="calle2" class="form-control">
                                    <label for="">Dirección 2</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="numeracion" id="numeracion" class="form-control">
                                    <label for="">Numeración</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-orange">Agregar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Direcciones -->
<div class="modal fade" id="modalEditarDireccion" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Editar dirección</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" id="editarDireccion">
                <div class="modal-body">
                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-12">
                                <input type="hidden" name="persona_id" value="{{ auth()->user()->persona->persona_id }}" class="form-control">
                                <input type="hidden" name="direccion_id" id="direccion_id_editar" class="form-control">
                                <div class="form-floating">
                                    <select name="tipo_direccion" id="tipo_direccion_editar" class="form-control">
                                        <option value="" selected disabled>Seleccione ..</option>
                                        <option value="2">Casa</option>
                                        <option value="3">Oficina</option>
                                        <option value="4">Otros</option>
                                    </select>
                                    <label for="">Tipo de dirección</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <select name="ciudad_id" id="ciudad_id_editar" class="form-control">
                                        <option value="" selected disabled>Seleccione ciudad ..</option>
                                        @foreach($ciudad as $c)
                                            <option value="{{ $c->ciudad_id }}">{{ $c->nombre }}</option>
                                        @endforeach
                                    </select>
                                    <label for="">Ciudad</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="calle1" id="calle1_editar" class="form-control">
                                    <label for="">Dirección 1</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="calle2" id="calle2_editar" class="form-control">
                                    <label for="">Dirección 2</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" name="numeracion" id="numeracion_editar" class="form-control">
                                    <label for="">Numeración</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-orange">Editar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Tracking -->
<div class="modal fade" id="modalTracking" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Tracking</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col-12 border-bottom mb-3 pb-3">
                    <p class="mb-0">¿Tenés el código de tu compra? Copialo, elegí el tracking que más te guste y pegalo para seguir tu pedido.</p>
                </div>
                <div class="col-12">
                    <div class="row g-3">
                        <div class="col-lg-4 col-6">
                            <a href="https://www.17track.net/es" target="_blank">
                                <div class="col-12 p-3 border rounded" style="height: 140px; display: flex; align-items: center; justify-content: center;">
                                    <img src="{{ asset('img/tracking/17-track.svg') }}" class="w-100" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-6">
                            <a href="https://www.dhl.com/us-en/home/tracking.html" target="_blank">
                                <div class="col-12 p-3 border rounded" style="height: 140px; display: flex; align-items: center; justify-content: center;">
                                    <img src="{{ asset('img/tracking/DHL-logo.png') }}" class="w-100" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-6">
                            <a href="https://www.fedex.com/es-py/tracking.html" target="_blank">
                                <div class="col-12 p-3 border rounded" style="height: 140px; display: flex; align-items: center; justify-content: center;">
                                    <img src="{{ asset('img/tracking/fedex.png') }}" class="w-100" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tracking -->
<div class="modal fade" id="modalDireccionCasilla" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Direcciones de casillas</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                
                <div class="col-12">
                    <div class="col-lg-12">
                        <div class="col-12">
                            <p class="">MIAMI / USA</p>
                            <p style="color: #909090; font-size: 13px;">
                                1350 NW 121 AVE A400.
                                Miami, FL 33182
                            </p>
                            <p style="color: #909090; font-size: 13px;">
                                +1 (305) 491-8550
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="col-12">
                            <p class="">MÁLAGA / ESPAÑA</p>
                            <p style="color: #909090; font-size: 13px;">
                                Calle de los Artistas N° 14, DENVER 75 SL. Madrid, Madrid 28020
                            </p>
                            <p style="color: #909090; font-size: 13px;">
                                +1 (305) 491-8550
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="col-12">
                            <p class="">MIAMI / USA (MARÍTIMO)</p>
                            <p style="color: #909090; font-size: 13px;">
                                1325 nw 78th Ave
                                Miami, FL 33126
                            </p>
                            <p style="color: #909090; font-size: 13px;">
                                +1 (305) 951-5625
                            </p>
                            <p style="color: #909090; font-size: 13px;">
                                Suite o Ref: Homebox
                            </p>
                        </div>
                    </div>
                </div>

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

<style>
    .notificacion {
        position: fixed;
        top: 120px;
        right: 0;
        width: 300px;
        background: #E3EDEA;
        border-radius: 10px 0px 0px 10px;
        margin-right: -300px;
    }
</style>

<div class="notificacion p-3">
    <p class="mb-0 text-success" style="font-size: 13px;"><img src="{{ asset('img/icono/info.svg') }}" style="width: 19px; margin-right: 10px; float: left;" alt=""> Tracking copia en portapapeles</p>
</div>

<script src="{{ asset('js/jquery.js') }}"></script>
<script>
    function enviarModalTracking(tracking) {
        var track = '<div class="row">'+
                        '<div class="col-lg-12">'+
                            '<span style="color: #808080; font-size: 13px;">Nro. de trancking:</span>'+
                        '</div>'+
                        '<div class="col-lg-12" style="display: flex; font-size: 13px;">'+
                            '<span class="text-dark copy-text2" style="cursor: pointer; margin-top: 3px;">'+tracking+'</span> '+
                            '<span class="copy-btn2" style="cursor: pointer; margin-left: 5px;">'+
                                '<img src="../img/icono/copy.svg" style="width: 20px;" alt="Copiar">'+
                            '</span>'+
                        '</div>'+
                        '<div class="col-lg-12 mt-3">'+
                            '<p class="mb-0" style="font-size: 13px; color: #808080;">Toca el código o el ícono de copiar, y luego pégalo en la web de rastreo que prefieras.</p>'+
                        '</div>'+
                    '</div>';
        $('#numero_tracking').html(track);
    }

    // Delegación: escucha clicks en todo el documento, pero solo actúa en copy-text y copy-btn
    $(document).on('click', '.copy-text2, .copy-btn2', function () {
        let trackingText;

        if ($(this).hasClass('copy-text2')) {
            trackingText = $(this).text();
        } else {
            trackingText = $(this).closest('.col-lg-12').find('.copy-text2').text();
        }

        navigator.clipboard.writeText(trackingText).then(function () {
            // Mostrar notificación animada
            $('.notificacion').animate({ 'margin-right': '0px' }, 500);
            setTimeout(() => {
                $('.notificacion').animate({ 'margin-right': '-300px' }, 500);
            }, 2000);
        }).catch(function (err) {
            console.error('Error al copiar: ', err);
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        // Función que copia al portapapeles
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function () {

                $('.notificacion').animate({
                    'margin-right': '0px'
                }, 500);

                setTimeout(() => {
                    $('.notificacion').animate({
                        'margin-right': '-300px'
                    }, 500);
                }, 2000);

            }).catch(function (err) {
                console.error('Error al copiar: ', err);
            });
        }

        // Click en el texto
        document.querySelectorAll('.copy-text').forEach(function (span) {
            span.addEventListener('click', function () {
                copyToClipboard(this.innerText);
            });
        });

        // Click en el botón/ícono
        document.querySelectorAll('.copy-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                let trackingText = this.parentElement.querySelector('.copy-text').innerText;
                copyToClipboard(trackingText);
            });
        });
    });

    /* Utilidad: formato de Gs. */
    function formatPYG(n) {
        return new Intl.NumberFormat('de-DE').format(n || 0);
    }

    /* Recalcula contadores y habilita/deshabilita el botón */
    function refreshTotalsAndButton() {
        let total = 0;
        let count = 0;

        document.querySelectorAll('.paquete-check:enabled:checked').forEach(function (el) {
            const v = parseInt(el.getAttribute('data-valor')) || 0;
            total += v;
            count++;
        });

        const itemsCount = document.getElementById('itemsCount');
        const totalPagar = document.querySelector('#totalPagar b');
        if (itemsCount) itemsCount.textContent = count;
        if (totalPagar) totalPagar.textContent = formatPYG(total);

        // Habilitar botón solo si hay al menos un check habilitado y seleccionado
        const btn = document.getElementById('btnProcesarPago');
        if (btn) {
            const haySeleccion = document.querySelector('.paquete-check:enabled:checked') !== null;
            btn.disabled = !haySeleccion;
        }
    }

    /* Render de la lista recibida desde el backend */
    function renderPaquetesParaPagar(datos) {
        let html = '';
        let total = 0;
        let countChecked = 0;

        // Detectar si existe al menos un ítem pagable
        const habilitables = (datos || []).filter(it => !!it.can_pay).length;

        (datos || []).forEach((it, idx) => {
            // valor puede venir como "77.000" => parsear a entero
            const valorStr = (it.valor ?? "0").toString();
            const valorNum = parseInt(valorStr.replace(/\./g, '')) || 0;

            // pre-check: solo si el ítem tiene prioridad y es pagable
            const isChecked = !!(it.prioridad && it.can_pay);
            const checkedAttr  = isChecked ? 'checked' : '';
            const disabledAttr = it.can_pay ? '' : 'disabled';

            const estado = (it.pago_estado || '').toString().toLowerCase();
            const badge =
                estado === 'completado'
                    ? '<span class="badge bg-success ms-2">Pagado</span>'
                : estado === 'pendiente'
                    ? '<span class="badge bg-secondary ms-2">Pendiente</span>'
                : '';

            if (isChecked && !disabledAttr) {
                total += valorNum;
                countChecked++;
            }

            html +=
            '<table class="table border mb-2">' +
                '<tr class="align-middle">' +
                    '<td style="width: 50px;">' +
                        '<div class="form-check" style="padding-left: 35px;">' +
                            '<input class="form-check-input paquete-check" type="checkbox" ' +
                            ' name="paquete_ids[]" value="'+ (it.paquete_id ?? '') +'" ' +
                            ' data-valor="'+ valorNum +'" id="pkg-' + idx + '" ' + checkedAttr + ' ' + disabledAttr + '>' +
                        '</div>' +
                    '</td>' +
                    '<td class="text-dark">' +
                        '<label for="pkg-' + idx + '" style="cursor: pointer; display: block;">' +
                            '<p class="mb-0" style="font-size: 13px;">' +
                                '<span class="activo">' + (it.descripcion || '') + '</span>' + badge +
                            '</p>' +
                            '<p class="mb-0" style="font-size: 13px;">' +
                                'Vendido por: ' + (it.proveedor_nombre || '') +
                            '</p>' +
                            '<p class="mb-0" style="font-size: 13px;">' +
                                'Peso: ' + (it.peso || '') + ' gr.' +
                            '</p>' +
                        '</label>' +
                    '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td colspan="3" class="text-dark">' +
                        '<p class="text-end mb-0" style="font-size: 13px;">' +
                            'Costo: Gs. <span>' + formatPYG(valorNum) + '</span>' +
                        '</p>' +
                    '</td>' +
                '</tr>' +
            '</table>';
        });

        const footer =
        '<table class="table mb-0" style="font-size: 13px;">' +
            '<tr style="background: rgba(0, 0, 0, .1)">' +
                '<td class="text-dark"><span id="itemsCount">'+ countChecked +'</span> Items</td>' +
                '<td class="text-dark text-end" id="totalPagar">Total Gs. <b>'+ formatPYG(total) +'</b></td>' +
            '</tr>' +
        '</table>';

        document.getElementById('detalles_pagar').innerHTML = html;
        document.getElementById('total_pagar').innerHTML = footer;

        // En el estado inicial, si no hay ningún ítem habilitable, botón deshabilitado;
        // si hay habilitables pero ninguno tildado, también deshabilitado hasta que marquen uno.
        refreshTotalsAndButton();
    }

    /* Carga los paquetes del modal de pago */
    function enviarParaPagar(id, paquete_id) {
        $.ajax({
            type: "GET",
            data: { id: id, paquete_id: paquete_id },
            url: "{{ route('page.enviarParaPagar') }}",
            success: function(resp) {
                const datos = resp.paquete || [];
                renderPaquetesParaPagar(datos);
            }
        });
    }

    /* Botón "Procesar" -> envía el form (solo si hay checks activos) */
    $(document).on('click', '#btnProcesarPago', function () {
        if ($('.paquete-check:enabled:checked').length === 0) {
            alert('Seleccioná al menos un paquete disponible.');
            return;
        }
        $('#formPagarPaquetes').submit();
    });

    /* Recalcular total al (des)marcar (sólo habilitados) */
    $(document).on('change', '.paquete-check', function() {
        refreshTotalsAndButton();
    });

    /* ---------- PERFIL ---------- */
    $('#editarPerfil').submit(function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        formData.append('_token', '{{ csrf_token() }}');
        $.ajax({
            url:"{{ route('page.editarPerfil') }}",
            data: formData,
            type: 'POST',
            processData: false,
            contentType: false,
            success:function(data){ /* opcional: feedback */ }
        });
    });

    /* ---------- DIRECCIONES ---------- */
    function eliminarDireccion(id) {
        if (confirm('¿Estás seguro de que deseas eliminar esta dirección?')) {
            $.ajax({
                type: "POST",
                data: { id: id, _token: "{{ csrf_token() }}" },
                url: "{{ route('page.eliminarDireccion') }}",
                success: function() { buscarDireccion(); },
                error: function() { alert('Ocurrió un error al intentar eliminar la dirección.'); }
            });
        }
    }

    $('#editarDireccion').submit(function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        formData.append('_token', '{{ csrf_token() }}');
        $.ajax({
            url:"{{ route('page.editarDireccion') }}",
            data: formData,
            type: 'POST',
            processData: false,
            contentType: false,
            success:function(){
                $('#modalEditarDireccion').modal('hide');
                buscarDireccion();
            }
        });
    });

    function enviarParaEditarDireccion(id) {
        $.ajax({
            type: "GET",
            data: { id: id },
            url: "{{ route('page.enviarParaEditarDireccion') }}",
            success: function(data) {
                $('#direccion_id_editar').val(data.direccion.direccion_id);
                $('#tipo_direccion_editar').val(data.direccion.tipo_direccion);
                $('#ciudad_id_editar').val(data.direccion.ciudad_id);
                $('#calle1_editar').val(data.direccion.calle1);
                $('#calle2_editar').val(data.direccion.calle2);
                $('#numeracion_editar').val(data.direccion.numeracion);
            }
        })
    }

    $('#agregarDireccion').submit(function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        formData.append('_token', '{{ csrf_token() }}');
        $.ajax({
            url:"{{ route('page.agregarDireccion') }}",
            data: formData,
            type: 'POST',
            processData: false,
            contentType: false,
            success:function(){
                $('#modalAgregarDireccion').modal('hide');
                buscarDireccion();
            }
        });
    });

    function buscarDireccion() {
        $.ajax({
            type: "GET",
            url: "{{ route('page.buscarDireccion') }}",
            success: function(data) { $('#tablaDirecciones').empty().html(data); }
        })
    }

    /* ---------- FACTURAS ---------- */
    function eliminarFacturaEditar(id) {
        if (confirm('¿Estás seguro de que deseas eliminar esta factura?')) {
            $.ajax({
                type: "POST",
                data: { id: id, _token: "{{ csrf_token() }}" },
                url: "{{ route('page.eliminarFacturaEditar') }}",
                success: function() { buscarFactura(); },
                error: function() { alert('Ocurrió un error al intentar eliminar la factura.'); }
            });
        }
    }

    function enviarFacturaEditar(id) {
        $.ajax({
            type: "GET",
            data: { id: id },
            url: "{{ route('page.enviarFacturaEditar') }}",
            success: function(data) {
                $('#id_factura_editar').val(data.factura.id);
                $('#razon_factura_editar').val(data.factura.razon);
                $('#documento_factura_editar').val(data.factura.documento);
                $('#telefono_factura_editar').val(data.factura.telefono);
                $('#direccion_factura_editar').val(data.factura.direccion);
                $('#por_defecto_factura_editar').prop('checked', !!Number(data.factura.defecto));
            }
        })
    }

    $('#editarFactura').submit(function(e) {
        e.preventDefault();
        var porDefecto = $('#por_defecto_factura_editar').is(':checked') ? 1 : 0;
        var formData = new FormData($(this)[0]);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('porDefecto', porDefecto);
        $.ajax({
            url:"{{ route('page.editarFactura') }}",
            data: formData,
            type: 'POST',
            processData: false,
            contentType: false,
            success:function(){
                $('#modalFacturacionEditar').modal('hide');
                buscarFactura();
            }
        });
    });

    $('#agregarFactura').submit(function(e) {
        e.preventDefault();
        var porDefecto = $('#por_defecto').is(':checked') ? 1 : 0;
        var formData = new FormData($(this)[0]);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('porDefecto', porDefecto);
        $.ajax({
            url:"{{ route('page.agregarFactura') }}",
            data: formData,
            type: 'POST',
            processData: false,
            contentType: false,
            success:function(){ buscarFactura(); }
        });
    });

    function buscarFactura() {
        $.ajax({
            type: "GET",
            url: "{{ route('page.buscarFactura') }}",
            success: function(data) { $('#tablaFactura').empty().html(data); }
        })
    }

    /* ---------- TERCEROS ---------- */
    function eliminarTercero(id) {
        $.ajax({
            type: "POST",
            data: { id: id, _token: "{{ csrf_token() }}" },
            url: "{{ route('page.eliminarTercero') }}",
            success: function() {
                buscarTerceros();
                setTimeout(() => { $('#nombre_terceros').focus(); }, 500);
            }
        })
    }

    $('#agregarTerceros').submit(function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        formData.append('_token', '{{ csrf_token() }}');

        // Validación del radio
        var vigencia = $('input[name="vigencia"]:checked').val();
        if (!vigencia) {
            alert('Debe seleccionar una opción de vigencia.');
            return;
        }
        formData.append('vigencia', vigencia);

        $.ajax({
            url:"{{ route('page.agregarTerceros') }}",
            data: formData,
            type: 'POST',
            processData: false,
            contentType: false,
            success:function() {
                $('#agregarTerceros')[0].reset();
                buscarTerceros();
                setTimeout(() => { $('#nombre_terceros').focus(); }, 500);
            }
        });
    });

    function buscarTerceros() {
        $.ajax({
            type: "GET",
            url: "{{ route('page.buscarTerceros') }}",
            success: function(data) { $('#tablaTerceros').empty().html(data); }
        })
    }

    /* ---------- COTIZACIÓN ---------- */
    (function () {
        // Parámetros en USD
        const USD_POR_KG = 21;   // tarifa por kg
        const AJUSTE_KG  = 0.02; // ajuste fijo
        const MIN_KG     = 0.15; // mínimo cobrable

        function calcularUSD(pesoKg) {
        const pesoCobrable = Math.max((Number(pesoKg) || 0) + AJUSTE_KG, MIN_KG);
        const usd = USD_POR_KG * pesoCobrable;
        return {
            pesoCobrable: +pesoCobrable.toFixed(3),
            usd: +usd.toFixed(2),
        };
        }

        document.getElementById('formCotizacion')?.addEventListener('submit', function (e) {
        e.preventDefault();

        const pesoRaw = parseFloat(document.getElementById('peso').value);
        const peso = (isNaN(pesoRaw) || pesoRaw <= 0) ? 0 : pesoRaw;

        const $res = document.getElementById('resultado');

        if (peso <= 0) {
            $res.innerHTML = '<span class="text-danger">Ingresá un peso válido.</span>';
            return;
        }

        const { pesoCobrable, usd } = calcularUSD(peso);

        // Mostramos solo en USD (se ignoran origen/destino/servicio)
        $res.innerHTML =
            `Estimado: <b>USD ${usd.toFixed(2)}</b>`;
        });
    })();
</script>

@endsection