@extends('padre.padre')

@section('contenido')
<div class="container-fluid py-3 px-3 px-md-4" style="max-width: 1600px;">
    {{-- Header & Breadcrumb --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-2 border-bottom gap-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1 small text-muted">
                    <li class="breadcrumb-item"><a href="{{ url('/inicio') }}" class="text-decoration-none text-muted">Inicio</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('remisiones.index') }}" class="text-decoration-none text-muted">Remisiones</a></li>
                    <li class="breadcrumb-item active fw-bold text-primary" aria-current="page">{{ $remision->numero_remision }}</li>
                </ol>
            </nav>
            <div class="d-flex align-items-center gap-2">
                <span style="font-size: 26px;">📋</span>
                <h3 class="mb-0 fw-bold text-dark font-monospace" style="letter-spacing: -0.5px;">{{ $remision->numero_remision }}</h3>
                @if($remision->estado === 'PENDIENTE')
                    <span class="badge badge-soft-warning px-3 py-1 rounded-pill fw-bold fs-6">⏳ Pendiente</span>
                @elseif($remision->estado === 'ENVIADA_POS')
                    <span class="badge badge-soft-info px-3 py-1 rounded-pill fw-bold fs-6">🛒 En Cotización POS</span>
                @elseif($remision->estado === 'FACTURADA_POS' || $remision->estado === 'FACTURADA')
                    <span class="badge badge-soft-success px-3 py-1 rounded-pill fw-bold fs-6">✅ Facturada POS</span>
                @elseif($remision->estado === 'DEVUELTA')
                    <span class="badge badge-soft-secondary px-3 py-1 rounded-pill fw-bold fs-6">↩️ Devuelta</span>
                @elseif($remision->estado === 'ANULADA')
                    <span class="badge badge-soft-danger px-3 py-1 rounded-pill fw-bold fs-6">❌ Anulada</span>
                @else
                    <span class="badge badge-soft-secondary px-3 py-1 rounded-pill fw-bold fs-6">{{ $remision->estado }}</span>
                @endif
            </div>
            <p class="text-muted mb-0 small">Registrada el {{ date('d/m/Y h:i A', strtotime($remision->fecha)) }} por <strong>{{ $remision->usuario }}</strong></p>
        </div>

        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('remisiones.index') }}" class="btn btn-outline-secondary btn-sm px-3 d-flex align-items-center gap-1 rounded-3">
                <span>⬅️ Volver</span>
            </a>

            <a href="{{ route('remisiones.imprimir', $remision->id) }}" target="_blank" class="btn btn-outline-primary btn-sm px-3 d-flex align-items-center gap-1 rounded-3 shadow-sm">
                <span>🖨️ Imprimir Guía</span>
            </a>

            {{-- Botón Enviar a Cotización POS (Solo para Separado Transitorio en estado PENDIENTE) --}}
            @if($remision->estado === 'PENDIENTE' && $remision->modalidad === 'SEPARADO_TRANSITORIO')
                <button type="button" class="btn btn-success btn-sm px-3 d-flex align-items-center gap-1 shadow-sm rounded-3 fw-bold" onclick="enviarAPos({{ $remision->id }}, '{{ $remision->numero_remision }}')">
                    <span>🛒 Cargar a Cotización POS</span>
                </button>
            @endif

            {{-- Si ya fue enviada a POS: mostrar estado y botón para cancelar cotización --}}
            @if($remision->estado === 'ENVIADA_POS')
                <span class="badge badge-soft-success px-3 py-2 rounded-3 small d-flex align-items-center gap-1" title="El inventario ya fue reingresado a bodega para facturarse por el POS.">
                    🛒 En Cotización POS (#{{ $remision->numero_cotizacion }})
                </span>
                <button type="button" class="btn btn-outline-danger btn-sm px-3 d-flex align-items-center gap-1 shadow-sm rounded-3 fw-bold" onclick="anularRemision({{ $remision->id }}, '{{ $remision->numero_remision }}')" title="Eliminar cotización del POS si el cliente no va a facturar">
                    <span>❌ Cancelar Cotización POS</span>
                </button>
            @endif

            {{-- Indicador de Salida Inmediata Contabilizada --}}
            @if($remision->modalidad === 'SALIDA_INMEDIATA')
                <span class="badge badge-soft-primary px-3 py-2 rounded-3 small d-flex align-items-center gap-1" title="El inventario y costo salieron de bodega en firme. No se factura por POS estándar para no duplicar salida ni costo.">
                    🚚 Salida Directa Contabilizada
                </span>
            @endif

            {{-- Botón Devolución (SOLO cuando está PENDIENTE antes de enviar a POS) --}}
            @if($remision->estado === 'PENDIENTE')
                <button type="button" class="btn btn-warning btn-sm px-3 d-flex align-items-center gap-1 shadow-sm rounded-3 fw-bold" onclick="devolverRemision({{ $remision->id }}, '{{ $remision->numero_remision }}')">
                    <span>↩️ Devolver a Inventario</span>
                </button>
            @endif
        </div>
    </div>

    {{-- Resumen Ejecutivo en 3 Tarjetas --}}
    <div class="row g-3 mb-4">
        {{-- Tarjeta 1: Cliente --}}
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100" style="background: var(--card-bg, #fff);">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <div class="rounded-circle badge-soft-primary d-flex align-items-center justify-content-center fw-bold" style="width: 32px; height: 32px; font-size: 14px;">
                        👤
                    </div>
                    <span class="text-muted text-uppercase fw-bold small" style="font-size: 11px;">Destinatario / Cliente</span>
                </div>
                <h5 class="fw-bold mb-1 text-dark">{{ $remision->cliente_nombre }}</h5>
                <div class="small text-muted font-monospace">CC/NIT: <span class="fw-semibold text-dark">{{ $remision->cliente_cedula }}</span></div>
                <div class="small text-muted">Tel: {{ $remision->cliente_telefono ?: 'No registrado' }}</div>
                <div class="small text-muted text-truncate">Dir: {{ $remision->cliente_direccion ?: 'No registrada' }}</div>
            </div>
        </div>

        {{-- Tarjeta 2: Logística y Origen --}}
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100" style="background: var(--card-bg, #fff);">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <div class="rounded-circle badge-soft-warning d-flex align-items-center justify-content-center fw-bold" style="width: 32px; height: 32px; font-size: 14px;">
                        📍
                    </div>
                    <span class="text-muted text-uppercase fw-bold small" style="font-size: 11px;">Origen y Despacho</span>
                </div>
                <h6 class="fw-bold mb-1 text-dark">{{ $bodega ? $bodega->nombreBodega : 'Bodega #' . $remision->idbodega }}</h6>
                <div class="small text-muted">Asesor: <strong>{{ $remision->vendedor_nombre }}</strong></div>
                <div class="small text-muted mt-1">
                    Modalidad: 
                    @if($remision->modalidad === 'SALIDA_INMEDIATA')
                        <span class="badge badge-soft-primary">🔹 Salida Directa (Kardex)</span>
                    @else
                        <span class="badge badge-soft-warning">🔸 Separado (POS)</span>
                    @endif
                </div>
                @if($remision->numero_cotizacion)
                    <div class="small text-muted mt-1">
                        Cotización POS: <span class="badge bg-success font-monospace">{{ $remision->numero_cotizacion }}</span>
                    </div>
                @endif
            </div>
        </div>

        {{-- Tarjeta 3: Totales --}}
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100" style="background: var(--card-bg, #fff); border-right: 4px solid #10b981 !important;">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <div class="rounded-circle badge-soft-success d-flex align-items-center justify-content-center fw-bold" style="width: 32px; height: 32px; font-size: 14px;">
                        💰
                    </div>
                    <span class="text-muted text-uppercase fw-bold small" style="font-size: 11px;">Liquidación del Despacho</span>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted small">Costo Interno:</span>
                    <span class="font-monospace text-muted small">$ {{ number_format($remision->total_costo, 0, ',', '.') }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-1">
                    <span class="fw-bold text-dark">TOTAL GENERAL:</span>
                    <h3 class="fw-bold text-success font-monospace mb-0">$ {{ number_format($remision->total, 0, ',', '.') }}</h3>
                </div>
                @if($remision->observaciones)
                    <div class="small text-muted mt-2 pt-2 border-top text-truncate" title="{{ $remision->observaciones }}">
                        <em>Obs: {{ $remision->observaciones }}</em>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Tabla de Productos Remisionados --}}
    <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden" style="background: var(--card-bg, #fff);">
        <div class="card-header bg-transparent border-0 pt-3 pb-2 px-4 d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0 text-dark">📦 Mercancía Despachada ({{ count($remision->detalles) }} ítems)</h5>
            <span class="text-muted small">Puedes devolver ítems específicos o devolver la remisión completa</span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="font-size: 13px;">
                <thead class="table-light" style="font-size: 11.5px; border-bottom: 2px solid var(--border-color, #e2e8f0);">
                    <tr>
                        <th class="ps-4 text-muted" style="width: 40px;">#</th>
                        <th class="text-muted" style="width: 120px;">CÓDIGO</th>
                        <th class="text-muted">DESCRIPCIÓN DEL PRODUCTO</th>
                        <th class="text-center text-muted" style="width: 130px;">DESPACHADO</th>
                        <th class="text-center text-muted" style="width: 120px;">DEVUELTO</th>
                        <th class="text-center text-muted" style="width: 130px;">SALDO ACTIVO</th>
                        <th class="text-end text-muted" style="width: 140px;">PRECIO CAJA / FRC</th>
                        <th class="text-end text-muted" style="width: 130px;">SUBTOTAL</th>
                        <th class="text-center pe-4 text-muted" style="width: 140px;">ACCIÓN</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($remision->detalles as $index => $det)
                        @php
                            $cajaDesp = (float) $det->caja;
                            $frccDesp = (float) $det->frcc;
                            $cajaDev  = (float) ($det->caja_devuelta ?? 0);
                            $frccDev  = (float) ($det->frcc_devuelta ?? 0);
                            $saldoCaj = max(0, $cajaDesp - $cajaDev);
                            $saldoFrc = max(0, $frccDesp - $frccDev);
                            $tieneDevolucion = ($cajaDev > 0 || $frccDev > 0);
                            $totalmenteDevuelto = ($saldoCaj <= 0 && $saldoFrc <= 0);
                        @endphp
                        <tr class="{{ $totalmenteDevuelto ? 'table-light opacity-75' : '' }}">
                            <td class="ps-4 text-muted small">{{ $index + 1 }}</td>
                            <td class="font-monospace small">
                                <span class="badge bg-light text-dark border">{{ $det->codigo_producto }}</span>
                            </td>
                            <td>
                                <div class="fw-bold text-dark">{{ $det->nombre_producto }}</div>
                                <small class="text-muted" style="font-size: 10.5px;">Factor: {{ $det->factor }}</small>
                            </td>
                            <td class="text-center font-monospace">
                                <strong class="text-dark">{{ $cajaDesp }}</strong> Caj / {{ $frccDesp }} Frc
                            </td>
                            <td class="text-center">
                                @if($tieneDevolucion)
                                    <span class="badge badge-soft-warning font-monospace" style="font-size: 11px;">
                                        ↩️ {{ $cajaDev }} Caj / {{ $frccDev }} Frc
                                    </span>
                                @else
                                    <span class="text-muted small">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if($totalmenteDevuelto)
                                    <span class="badge badge-soft-secondary font-monospace" style="font-size: 11px;">
                                        0 (Devuelto)
                                    </span>
                                @else
                                    <span class="badge badge-soft-success font-monospace fw-bold" style="font-size: 11px;">
                                        {{ $saldoCaj }} Caj / {{ $saldoFrc }} Frc
                                    </span>
                                @endif
                            </td>
                            <td class="text-end font-monospace text-muted small">
                                <div>$ {{ number_format($det->precio_caja, 0, ',', '.') }} <span style="font-size:10px;">Caj</span></div>
                                <div class="text-primary fw-semibold" style="font-size:11px;">$ {{ number_format($det->precio_frcc, 0, ',', '.') }} <span style="font-size:10px;">Frc</span></div>
                            </td>
                            <td class="text-end fw-bold font-monospace text-primary">
                                $ {{ number_format($det->subtotal, 0, ',', '.') }}
                            </td>
                            <td class="text-center pe-4">
                                @if(!$totalmenteDevuelto && $remision->estado === 'PENDIENTE')
                                    <button type="button" class="btn btn-outline-warning btn-sm px-2 py-1 fw-bold rounded-2 text-nowrap" style="font-size: 11px;" onclick="abrirModalDevolverItem({{ $det->id }}, '{{ addslashes($det->nombre_producto) }}', {{ $saldoCaj }}, {{ $saldoFrc }}, {{ $det->factor }}, {{ $cajaDesp }}, {{ $frccDesp }}, {{ $cajaDev }}, {{ $frccDev }})" title="Devolver este ítem específico al inventario">
                                        ↩️ Devolver Ítem
                                    </button>
                                @elseif($remision->estado === 'ENVIADA_POS')
                                    <span class="badge badge-soft-info small" style="font-size: 11px;">En Cot. POS</span>
                                @elseif($totalmenteDevuelto)
                                    <span class="text-muted small fst-italic">Devuelto ✓</span>
                                @else
                                    <span class="text-muted small">-</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Auditoría: Kardex y Asientos Contables --}}
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden" style="background: var(--card-bg, #fff);">
        <div class="card-header bg-transparent border-0 pt-3 px-4 pb-0">
            <ul class="nav nav-tabs card-header-tabs" id="auditTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active fw-bold small" id="kardex-tab" data-bs-toggle="tab" data-bs-target="#kardexTab" type="button" role="tab">
                        📊 Movimientos en Kardex ({{ count($kardexMovs) }})
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link fw-bold small" id="contabilidad-tab" data-bs-toggle="tab" data-bs-target="#contabilidadTab" type="button" role="tab">
                        📑 Asientos Contables ({{ count($asientosContables) }})
                    </button>
                </li>
            </ul>
        </div>
        <div class="card-body p-4 tab-content">
            {{-- Tab Kardex --}}
            <div class="tab-pane fade show active" id="kardexTab" role="tabpanel">
                @if(count($kardexMovs) > 0)
                    <div class="table-responsive rounded-3 border">
                        <table class="table table-sm table-hover align-middle mb-0" style="font-size: 12px;">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3 py-2 text-muted">FECHA</th>
                                    <th class="text-muted">TIPO</th>
                                    <th class="text-muted">PRODUCTO</th>
                                    <th class="text-muted">DETALLE</th>
                                    <th class="text-center text-muted">CAJAS</th>
                                    <th class="text-center text-muted">FRCC</th>
                                    <th class="text-end text-muted">PRECIO VENTA</th>
                                    <th class="text-center text-muted">SALDO FINAL</th>
                                    <th class="text-muted pe-3">USUARIO</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($kardexMovs as $km)
                                    <tr>
                                        <td class="ps-3 text-muted">{{ $km->fecha }}</td>
                                        <td><span class="badge badge-soft-primary px-2 py-1 rounded-pill fw-bold">{{ $km->tipo }}</span></td>
                                        <td class="font-monospace small">{{ $km->producto }}</td>
                                        <td>{{ $km->detalle }}</td>
                                        <td class="text-center fw-bold">{{ $km->caja }}</td>
                                        <td class="text-center">{{ $km->frcc }}</td>
                                        <td class="text-end font-monospace small">
                                            <div>$ {{ number_format($km->valoUnitcaja, 0, ',', '.') }} <span class="text-muted" style="font-size:10px;">Caj</span></div>
                                            @if((float)($km->valorUnifrcc ?? 0) > 0)
                                                <div class="text-primary fw-semibold" style="font-size:11px;">$ {{ number_format($km->valorUnifrcc, 0, ',', '.') }} <span style="font-size:10px;">Frc</span></div>
                                            @endif
                                        </td>
                                        <td class="text-center font-monospace">{{ $km->inventarioo }} Caj / {{ $km->inventFrcc }} Frc</td>
                                        <td class="pe-3 text-muted small">{{ $km->usuariok }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="p-3 rounded-3 bg-light text-muted small">
                        ℹ️ No se registran movimientos en Kardex para esta remisión.
                    </div>
                @endif
            </div>

            {{-- Tab Contabilidad --}}
            <div class="tab-pane fade" id="contabilidadTab" role="tabpanel">
                @if(count($asientosContables) > 0)
                    <div class="table-responsive rounded-3 border">
                        <table class="table table-sm table-hover align-middle mb-0" style="font-size: 12px;">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3 py-2 text-muted">FECHA</th>
                                    <th class="text-muted">TIPO MOVIMIENTO</th>
                                    <th class="text-muted">CUENTA PUC</th>
                                    <th class="text-end text-muted">DÉBITO (EGRESO)</th>
                                    <th class="text-end text-muted">CRÉDITO (INGRESO)</th>
                                    <th class="text-muted pe-3">OBSERVACIÓN</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($asientosContables as $ac)
                                    <tr>
                                        <td class="ps-3 text-muted">{{ $ac->fechaM }}</td>
                                        <td>
                                            <span class="badge badge-soft-info px-2 py-1 rounded-pill fw-bold">
                                                {{ $ac->tipoMovimiento ?: 'Remisión' }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="font-monospace fw-bold text-dark fs-6">{{ $ac->cuentaNum }}</span>
                                            @if(str_starts_with($ac->cuentaNum, '143599'))
                                                <span class="d-block text-muted small" style="font-size: 11px;">Mercancías Remisionadas (En tránsito)</span>
                                            @elseif(str_starts_with($ac->cuentaNum, '143501') || str_starts_with($ac->cuentaNum, '1435'))
                                                <span class="d-block text-muted small" style="font-size: 11px;">Inventario Mercancías (Salida de bodega)</span>
                                            @endif
                                        </td>
                                        <td class="text-end font-monospace fw-bold {{ $ac->egreso > 0 ? 'text-primary' : 'text-muted' }}">
                                            {{ $ac->egreso > 0 ? '$ ' . number_format($ac->egreso, 0, ',', '.') : '-' }}
                                        </td>
                                        <td class="text-end font-monospace fw-bold {{ $ac->ingreso > 0 ? 'text-success' : 'text-muted' }}">
                                            {{ $ac->ingreso > 0 ? '$ ' . number_format($ac->ingreso, 0, ',', '.') : '-' }}
                                        </td>
                                        <td class="pe-3 text-secondary">{{ $ac->observacion }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-light fw-bold" style="border-top: 2px solid #cbd5e1;">
                                @php
                                    $totalDebito = $asientosContables->sum('egreso');
                                    $totalCredito = $asientosContables->sum('ingreso');
                                @endphp
                                <tr>
                                    <td colspan="3" class="ps-3 py-2 text-uppercase text-dark">
                                        ⚖️ Sumas Iguales (Partida Doble)
                                        @if(abs($totalDebito - $totalCredito) < 0.01)
                                            <span class="badge badge-soft-success ms-2">Balance Cuadrado ✓</span>
                                        @endif
                                    </td>
                                    <td class="text-end font-monospace text-primary fs-6">$ {{ number_format($totalDebito, 0, ',', '.') }}</td>
                                    <td class="text-end font-monospace text-success fs-6">$ {{ number_format($totalCredito, 0, ',', '.') }}</td>
                                    <td class="pe-3 text-muted small">Registrado en Contabilidad</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @else
                    <div class="p-3 rounded-3 bg-light text-muted small">
                        ℹ️ No se registraron asientos contables fiscales porque la remisión no representa venta tributaria o fue generada bajo modalidad transitoria.
                    </div>
                @endif
            </div>
        </div>
    </div>
    {{-- Modal para Devolver Producto Específico --}}
    <div class="modal fade" id="modalDevolverItem" tabindex="-1" aria-labelledby="modalDevolverItemLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="modal-header border-bottom bg-light">
                    <h6 class="modal-title fw-bold text-dark" id="modalDevolverItemLabel">
                        ↩️ Devolución de Producto al Inventario
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="alert alert-primary py-2 px-3 small border-0 mb-3 rounded-3">
                        <strong class="d-block text-dark fs-6" id="modalProdNombre">-</strong>
                        <span class="text-muted" id="modalProdInfo">-</span>
                    </div>

                    <div class="p-3 bg-light rounded-3 mb-3 border">
                        <div class="d-flex justify-content-between small mb-1">
                            <span class="text-muted">Total Despachado:</span>
                            <span class="text-dark font-monospace fw-bold" id="modalTxtDespachado">-</span>
                        </div>
                        <div class="d-flex justify-content-between small mb-1">
                            <span class="text-muted">Ya Devuelto anteriormente:</span>
                            <span class="text-warning-emphasis font-monospace fw-bold" id="modalTxtYaDevuelto">-</span>
                        </div>
                        <div class="d-flex justify-content-between small fw-bold border-top pt-2 mt-1">
                            <span class="text-dark">Saldo Pendiente con el Cliente:</span>
                            <span class="text-success font-monospace" id="modalTxtSaldoPendiente">-</span>
                        </div>
                    </div>

                    <form id="formDevolverItem" onsubmit="confirmarDevolverItem(event)">
                        <input type="hidden" id="modalDetalleId">
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label class="form-label small fw-bold text-dark mb-1">Cajas a Devolver *</label>
                                <input type="number" step="any" min="0" class="form-control text-center font-monospace fw-bold" id="modalInputCajas" value="0" required>
                            </div>
                            <div class="col-6">
                                <label class="form-label small fw-bold text-dark mb-1">Fracciones a Devolver</label>
                                <input type="number" step="any" min="0" class="form-control text-center font-monospace fw-bold" id="modalInputFrcc" value="0">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-dark mb-1">Motivo / Detalle de la Devolución</label>
                            <input type="text" class="form-control form-control-sm" id="modalInputMotivo" placeholder="Ej: Mercancía averiada, sobrante de obra, cliente no lo requirió...">
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-4">
                            <button type="button" class="btn btn-light btn-sm px-3 rounded-2" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" id="btnConfirmarDevolverItem" class="btn btn-warning btn-sm px-4 fw-bold rounded-2 shadow-sm">
                                ↩️ Confirmar Reingreso a Bodega
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function enviarAPos(id, numero) {
    if (!confirm('¿Deseas enviar la remisión ' + numero + ' a Cotizaciones del POS?\n\n- Se reingresará la mercancía al inventario activo para que el cajero en el POS la pueda facturar con normalidad.\n- Quedará disponible en la pantalla de Cotizaciones del POS para cobro inmediato.')) {
        return;
    }

    fetch('{{ url("/remisiones/convertir-cotizacion") }}/' + id, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => alert('Error de conexión al servidor.'));
}

function devolverRemision(id, numero) {
    if (!confirm('⚠️ ¿Estás seguro de DEVOLVER la remisión ' + numero + '?\n\n- Los productos reingresarán automáticamente al inventario físico.\n- Si tenía salida de Kardex, se registrará el contra-movimiento.\n- Si tenía asiento contable de costo, se reversará automáticamente.')) {
        return;
    }

    fetch('{{ url("/remisiones/devolver") }}/' + id, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => alert('Error de conexión al servidor.'));
}

let saldoMaxCajas = 0;
let saldoMaxFrcc = 0;
let modalDevolverInstancia = null;

function abrirModalDevolverItem(detId, nombre, saldoCajas, saldoFrcc, factor, totalCajas, totalFrcc, devCajas, devFrcc) {
    document.getElementById('modalDetalleId').value = detId;
    document.getElementById('modalProdNombre').textContent = nombre;
    document.getElementById('modalProdInfo').textContent = `Factor de empaque: ${factor}`;

    document.getElementById('modalTxtDespachado').textContent = `${totalCajas} Caj / ${totalFrcc} Frc`;
    document.getElementById('modalTxtYaDevuelto').textContent = `${devCajas} Caj / ${devFrcc} Frc`;
    document.getElementById('modalTxtSaldoPendiente').textContent = `${saldoCajas} Caj / ${saldoFrcc} Frc`;

    saldoMaxCajas = parseFloat(saldoCajas) || 0;
    saldoMaxFrcc = parseFloat(saldoFrcc) || 0;

    const inpCajas = document.getElementById('modalInputCajas');
    const inpFrcc = document.getElementById('modalInputFrcc');
    const inpMotivo = document.getElementById('modalInputMotivo');

    inpCajas.value = saldoCajas;
    inpCajas.max = saldoCajas;
    inpFrcc.value = 0;
    inpFrcc.max = saldoFrcc;
    inpMotivo.value = '';

    const modalEl = document.getElementById('modalDevolverItem');
    modalDevolverInstancia = new bootstrap.Modal(modalEl);
    modalDevolverInstancia.show();
}

function confirmarDevolverItem(e) {
    e.preventDefault();

    const detId = document.getElementById('modalDetalleId').value;
    const cajas = parseFloat(document.getElementById('modalInputCajas').value) || 0;
    const frcc = parseFloat(document.getElementById('modalInputFrcc').value) || 0;
    const motivo = document.getElementById('modalInputMotivo').value;

    if (cajas <= 0 && frcc <= 0) {
        alert('⚠️ Ingresa al menos 1 caja o 1 fracción para devolver.');
        return;
    }

    if (cajas > saldoMaxCajas || (cajas === saldoMaxCajas && frcc > saldoMaxFrcc)) {
        alert(`⚠️ No puedes devolver más de lo pendiente (${saldoMaxCajas} Cajas / ${saldoMaxFrcc} Fracciones).`);
        return;
    }

    const btn = document.getElementById('btnConfirmarDevolverItem');
    btn.disabled = true;
    btn.innerHTML = '<span>⏳ Procesando reingreso...</span>';

    fetch('{{ url("/remisiones/devolver-item") }}/' + detId, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            cajas: cajas,
            frcc: frcc,
            motivo: motivo
        })
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = '↩️ Confirmar Reingreso a Bodega';

        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '↩️ Confirmar Reingreso a Bodega';
        alert('Error de comunicación con el servidor.');
    });
}

function anularRemision(id, numero) {
    if (!confirm('¿Deseas CANCELAR la Cotización POS de la remisión ' + numero + '?\n\nLa cotización será eliminada de POSCloud y el estado cambiará a ANULADA. Las existencias permanecen en bodega.')) {
        return;
    }

    fetch('{{ url("/remisiones/anular") }}/' + id, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => alert('Error de conexión al servidor.'));
}
</script>

<style>
/* Badges con alto contraste y legibilidad universal (Compatibles con Bootstrap 5.0) */
.badge-soft-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
.badge-soft-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}
.badge-soft-primary {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}
.badge-soft-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}
.badge-soft-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}
.badge-soft-secondary {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme='dark'] .badge-soft-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
[data-theme='dark'] .badge-soft-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
[data-theme='dark'] .badge-soft-primary {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(37, 99, 235, 0.4) !important;
}
[data-theme='dark'] .badge-soft-info {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
}
[data-theme='dark'] .badge-soft-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}
[data-theme='dark'] .badge-soft-secondary {
    background-color: rgba(148, 163, 184, 0.2) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
}
</style>
@endsection