@extends('layouts.app')

@section('titulo', 'Transferencias')

@section('contenido')

<style>
    .table-premium {
        border-collapse: collapse;
        width: 100%;
    }

    .table-premium thead {
        background: #f8fafc;
        text-transform: uppercase;
        font-size: .7rem;
        color: #64748b;
        letter-spacing: 0.05em;
    }

    .table-premium thead th {
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        font-weight: 600;
        text-align: left;
    }

    .table-premium tbody td {
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        vertical-align: middle;
    }

    .table-premium tbody tr:hover {
        background: #f8fafc;
    }

    .table-container {
        background: white;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .header-section {
        background: white;
        border-radius: 12px;
        padding: 16px 20px;
        border: 1px solid #e5e7eb;
        margin-bottom: 20px;
    }

    .header-icon {
        width: 36px;
        height: 36px;
        background: #dbeafe;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
    }

    .header-icon svg {
        width: 18px;
        height: 18px;
    }

    .filters-section {
        background: white;
        border-radius: 12px;
        padding: 16px 20px;
        border: 1px solid #e5e7eb;
        margin-bottom: 20px;
    }

    .btn-new {
        background: #2563eb;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 600;
        font-size: .875rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: none;
        text-decoration: none;
        cursor: pointer;
    }

    .btn-new:hover {
        background: #1d4ed8;
        color: white;
    }

    .btn-new svg {
        width: 16px;
        height: 16px;
    }

    .btn-secondary {
        background: #f8fafc;
        color: #475569;
        border: 1px solid #e2e8f0;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: .875rem;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-secondary:hover {
        background: #f1f5f9;
    }

    .action-btn {
        padding: 4px 6px;
        border-radius: 6px;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: all .2s ease;
        color: #94a3b8;
        display: inline-block;
    }

    .action-btn:hover {
        background: #f1f5f9;
        color: #2563eb;
    }

    .action-btn-view:hover {
        background: #dbeafe;
        color: #2563eb;
    }

    .pagination-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-top: 1px solid #f1f5f9;
        font-size: .8rem;
        color: #64748b;
    }

    .breadcrumb {
        font-size: .7rem;
        color: #94a3b8;
        margin-bottom: 2px;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: .7rem;
        font-weight: 700;
    }

    .badge-success {
        background: #dcfce7;
        color: #166534;
    }

    .badge-blue {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .badge-gray {
        background: #f1f5f9;
        color: #475569;
    }

    .badge-orange {
        background: #ffedd5;
        color: #c2410c;
    }

    .transfer-panel {
        background: white;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }

    .transfer-panel-header {
        padding: 15px 20px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .transfer-panel-title {
        font-size: .95rem;
        font-weight: 700;
        color: #334155;
    }

    .transfer-panel-body {
        padding: 20px;
    }

    .field-label {
        display: block;
        font-size: .75rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 5px;
    }

    .field-control {
        width: 100%;
        padding: 9px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: .875rem;
        background: white;
    }

    .field-control:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37,99,235,.10);
    }

    .product-search-wrapper {
        position: relative;
    }

    .product-search-icon {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        width: 17px;
        height: 17px;
        pointer-events: none;
    }

    .product-search {
        width: 100%;
        padding: 10px 40px 10px 38px;
        border: 1px solid #cbd5e1;
        border-radius: 9px;
        font-size: .875rem;
    }

    .product-search:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37,99,235,.10);
    }

    .product-results {
        position: absolute;
        z-index: 40;
        left: 0;
        right: 0;
        top: calc(100% + 5px);
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(15,23,42,.12);
        max-height: 300px;
        overflow-y: auto;
    }

    .product-result {
        padding: 10px 12px;
        cursor: pointer;
        border-bottom: 1px solid #f1f5f9;
    }

    .product-result:last-child {
        border-bottom: none;
    }

    .product-result:hover {
        background: #f8fafc;
    }

    .product-code {
        font-size: .7rem;
        color: #64748b;
        font-family: monospace;
    }

    .product-name {
        font-size: .84rem;
        font-weight: 600;
        color: #334155;
    }

    .stock-info {
        font-size: .72rem;
        color: #64748b;
    }

    .cart-container {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 15px;
    }

    .cart-header {
        padding: 10px 12px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        font-size: .75rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
    }

    .cart-table {
        width: 100%;
        border-collapse: collapse;
    }

    .cart-table th {
        background: #f8fafc;
        color: #64748b;
        font-size: .68rem;
        text-transform: uppercase;
        padding: 8px 10px;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
    }

    .cart-table td {
        padding: 9px 10px;
        border-bottom: 1px solid #f1f5f9;
        font-size: .8rem;
        vertical-align: middle;
    }

    .cart-table tr:last-child td {
        border-bottom: none;
    }

    .qty-input {
        width: 85px;
        padding: 6px 8px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        text-align: center;
        font-size: .8rem;
    }

    .qty-input:focus {
        outline: none;
        border-color: #2563eb;
    }

    .lot-select {
        width: 100%;
        min-width: 190px;
        padding: 7px 9px;
        border: 1px solid #cbd5e1;
        border-radius: 7px;
        background: white;
        color: #334155;
        font-size: .78rem;
    }

    .lot-select:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37,99,235,.10);
    }

    .lot-stock {
        margin-top: 4px;
        font-size: .68rem;
        color: #64748b;
    }

    .lot-warning {
        margin-top: 4px;
        font-size: .68rem;
        color: #dc2626;
        font-weight: 600;
    }

    .remove-btn {
        border: none;
        background: transparent;
        color: #94a3b8;
        cursor: pointer;
        padding: 5px;
        border-radius: 6px;
    }

    .remove-btn:hover {
        color: #dc2626;
        background: #fee2e2;
    }

    .empty-cart {
        padding: 35px 20px;
        text-align: center;
        color: #94a3b8;
        font-size: .8rem;
    }

    .transfer-summary {
        margin-top: 15px;
        padding: 13px 15px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
    }

    .summary-item {
        display: flex;
        flex-direction: column;
    }

    .summary-label {
        font-size: .68rem;
        color: #64748b;
        text-transform: uppercase;
    }

    .summary-value {
        font-size: .95rem;
        font-weight: 700;
        color: #334155;
    }

    .alert-success {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
        padding: 10px 14px;
        border-radius: 9px;
        font-size: .82rem;
    }

    .alert-error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        padding: 10px 14px;
        border-radius: 9px;
        font-size: .82rem;
    }

    .help-text {
        margin-top: 5px;
        font-size: .7rem;
        color: #94a3b8;
    }

    .selected-lot-box {
        margin-top: 5px;
        padding: 5px 7px;
        background: #eff6ff;
        border-radius: 6px;
        color: #1d4ed8;
        font-size: .68rem;
        font-weight: 600;
    }

    @media (max-width: 768px) {

        .transfer-panel-body {
            padding: 14px;
        }

        .cart-container {
            overflow-x: auto;
        }

        .cart-table {
            min-width: 900px;
        }
    }
</style>


<div
    class="max-w-[1650px] mx-auto space-y-4 px-4 sm:px-6"
    x-data="transferenciasApp()"
    x-init="init()"
>

    {{-- =========================================================
         HEADER
    ========================================================== --}}

    <div class="header-section">

        <div class="flex flex-wrap items-center justify-between gap-3">

            <div>

                <div class="breadcrumb">
                    Logística & Inventario
                </div>

                <div class="flex items-center gap-3 mt-1">

                    <div class="header-icon">

                        <svg
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M7 7h11l-3-3"
                            />

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M18 7l-3 3"
                            />

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M17 17H6l3 3"
                            />

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M6 17l3-3"
                            />
                        </svg>

                    </div>

                    <h1 class="text-xl font-bold text-slate-800">
                        Transferencias
                    </h1>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
         MENSAJES
    ========================================================== --}}

    @if(session('ok'))

        <div class="alert-success">
            {{ session('ok') }}
        </div>

    @endif


    @if(session('error'))

        <div class="alert-error">
            {{ session('error') }}
        </div>

    @endif


    @if($errors->any())

        <div class="alert-error">

            <div class="font-semibold mb-1">
                No se pudo realizar la transferencia:
            </div>

            <ul class="list-disc ml-5">

                @foreach($errors->all() as $error)

                    <li>
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

        </div>

    @endif


    {{-- =========================================================
         NUEVA TRANSFERENCIA
    ========================================================== --}}

    <div class="transfer-panel">

        <div class="transfer-panel-header">

            <div>

                <div class="transfer-panel-title">
                    Nueva transferencia
                </div>

                <div class="text-xs text-slate-400 mt-1">
                    Seleccione exactamente el lote que desea transferir.
                </div>

            </div>

        </div>


        <div class="transfer-panel-body">

            <form
                method="POST"
                action="{{ route('transferencias.store') }}"
                @submit="prepararEnvio($event)"
            >

                @csrf


                {{-- =====================================================
                     ALMACENES
                ====================================================== --}}

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <div>

                        <label class="field-label">
                            Almacén origen
                            <span class="text-red-500">*</span>
                        </label>

                        <select
                            name="almacen_origen_id"
                            x-model="origen"
                            @change="cambiarOrigen()"
                            class="field-control"
                            required
                        >

                            <option value="">
                                Seleccione almacén origen
                            </option>

                            @foreach($almacenes as $almacen)

                                <option value="{{ $almacen->id }}">

                                    {{ $almacen->local?->nombre ?? 'Sin local' }}
                                    —
                                    {{ $almacen->nombre }}

                                </option>

                            @endforeach

                        </select>

                        <div class="help-text">
                            Los productos se tomarán del stock disponible en este almacén.
                        </div>

                    </div>


                    <div>

                        <label class="field-label">
                            Almacén destino
                            <span class="text-red-500">*</span>
                        </label>

                        <select
                            name="almacen_destino_id"
                            x-model="destino"
                            class="field-control"
                            required
                        >

                            <option value="">
                                Seleccione almacén destino
                            </option>

                            @foreach($almacenes as $almacen)

                                <option value="{{ $almacen->id }}">

                                    {{ $almacen->local?->nombre ?? 'Sin local' }}
                                    —
                                    {{ $almacen->nombre }}

                                </option>

                            @endforeach

                        </select>

                        <div class="help-text">
                            El stock transferido será agregado en este almacén.
                        </div>

                    </div>

                </div>


                {{-- =====================================================
                     BUSCADOR
                ====================================================== --}}

                <div class="mt-5">

                    <label class="field-label">
                        Buscar producto
                    </label>

                    <div class="product-search-wrapper">

                        <svg
                            class="product-search-icon"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2"
                        >

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="m21 21-4.35-4.35m0 0A7.5 7.5 0 1 0 6.04 6.04a7.5 7.5 0 0 0 10.61 10.61Z"
                            />

                        </svg>


                        <input
                            type="text"
                            x-model="busqueda"
                            @input.debounce.250ms="buscarProductos()"
                            @keydown.escape="cerrarResultados()"
                            @keydown.enter.prevent="seleccionarPrimerResultado()"
                            class="product-search"
                            placeholder="Escriba código de barras o nombre del producto..."
                            :disabled="!origen"
                        >


                        <button
                            type="button"
                            x-show="busqueda"
                            x-cloak
                            @click="limpiarBusqueda()"
                            class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                        >
                            &times;
                        </button>


                        {{-- RESULTADOS --}}

                        <div
                            x-show="mostrarResultados && resultados.length"
                            x-cloak
                            @click.outside="cerrarResultados()"
                            class="product-results"
                        >

                            <template
                                x-for="producto in resultados"
                                :key="producto.id"
                            >

                                <div
                                    class="product-result"
                                    @click="agregarProducto(producto)"
                                >

                                    <div class="flex items-center justify-between gap-3">

                                        <div class="min-w-0">

                                            <div
                                                class="product-name truncate"
                                                x-text="producto.nombre"
                                            ></div>

                                            <div class="product-code">

                                                Código:

                                                <span
                                                    x-text="producto.codigo_barras || '—'"
                                                ></span>

                                            </div>

                                        </div>


                                        <div class="text-right shrink-0">

                                            <div class="stock-info">

                                                Stock disponible:

                                                <strong
                                                    class="text-slate-700"
                                                    x-text="producto.stock_total"
                                                ></strong>

                                            </div>

                                            <div class="text-[10px] text-slate-400">
                                                Seleccionar producto
                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </template>

                        </div>

                    </div>


                    <div
                        x-show="origen === ''"
                        class="help-text"
                    >
                        Seleccione primero el almacén de origen.
                    </div>


                    <div
                        x-show="buscando"
                        x-cloak
                        class="help-text"
                    >
                        Buscando productos...
                    </div>


                    <div
                        x-show="!buscando && origen && busqueda.length >= 1 && !resultados.length"
                        x-cloak
                        class="help-text"
                    >
                        No se encontraron productos con stock disponible.
                    </div>

                </div>


                {{-- =====================================================
                     CARRITO
                ====================================================== --}}

                <div class="cart-container">

                    <div class="cart-header">
                        Productos a transferir
                    </div>


                    <template x-if="items.length">

                        <div class="overflow-x-auto">

                            <table class="cart-table">

                                <thead>

                                    <tr>

                                        <th style="width: 30%;">
                                            PRODUCTO
                                        </th>

                                        <th style="width: 13%;">
                                            CÓDIGO
                                        </th>

                                        <th style="width: 12%;">
                                            STOCK ORIGEN
                                        </th>

                                        <th style="width: 23%;">
                                            LOTE A TRANSFERIR
                                        </th>

                                        <th style="width: 12%;">
                                            CANTIDAD
                                        </th>

                                        <th style="width: 10%;">
                                            ACCIÓN
                                        </th>

                                    </tr>

                                </thead>


                                <tbody>

                                    <template
                                        x-for="(item, index) in items"
                                        :key="item.key"
                                    >

                                        <tr>

                                            {{-- PRODUCTO --}}

                                            <td>

                                                <div
                                                    class="font-semibold text-slate-700"
                                                    x-text="item.nombre"
                                                ></div>

                                                <div
                                                    class="text-[11px] text-slate-400 mt-1"
                                                    x-text="item.presentacion || ''"
                                                ></div>

                                            </td>


                                            {{-- CÓDIGO --}}

                                            <td>

                                                <span
                                                    class="font-mono text-xs text-slate-500"
                                                    x-text="item.codigo_barras || '—'"
                                                ></span>

                                            </td>


                                            {{-- STOCK TOTAL --}}

                                            <td>

                                                <span class="badge badge-gray">

                                                    <span
                                                        x-text="item.stock_total"
                                                    ></span>

                                                    und.

                                                </span>

                                            </td>


                                            {{-- =================================================
                                                 SELECCIÓN DE LOTE
                                            ================================================== --}}

                                            <td>

                                                <select
                                                    class="lot-select"
                                                    x-model="item.stock_producto_id"
                                                    @change="cambiarLote(index)"
                                                >

                                                    <option value="">
                                                        Seleccione lote
                                                    </option>


                                                    <template
                                                        x-for="lote in item.lotes"
                                                        :key="lote.id"
                                                    >

                                                        <option
                                                            :value="String(lote.id)"
                                                            x-text="
                                                                (lote.lote || 'Sin lote')
                                                                + ' — '
                                                                + lote.stock
                                                                + ' und.'
                                                                + (
                                                                    lote.fecha_vencimiento_formateada
                                                                    ? ' — Vence '
                                                                    + lote.fecha_vencimiento_formateada
                                                                    : ''
                                                                )
                                                            "
                                                        ></option>

                                                    </template>

                                                </select>


                                                {{-- INFORMACIÓN DEL LOTE SELECCIONADO --}}

                                                <template x-if="loteSeleccionado(item)">

                                                    <div class="selected-lot-box">

                                                        Lote:

                                                        <span
                                                            x-text="loteSeleccionado(item).lote || 'Sin lote'"
                                                        ></span>

                                                        <span
                                                            class="ml-1"
                                                            x-text="
                                                                '· '
                                                                + loteSeleccionado(item).stock
                                                                + ' und. disponibles'
                                                            "
                                                        ></span>

                                                    </div>

                                                </template>


                                                <template
                                                    x-if="item.stock_producto_id && !loteSeleccionado(item)"
                                                >

                                                    <div class="lot-warning">
                                                        El lote seleccionado ya no está disponible.
                                                    </div>

                                                </template>

                                            </td>


                                            {{-- CANTIDAD --}}

                                            <td>

                                                <input
                                                    type="number"
                                                    min="1"
                                                    :max="stockLoteSeleccionado(item)"
                                                    x-model.number="item.cantidad"
                                                    @input="validarCantidad(index)"
                                                    class="qty-input"
                                                    :disabled="!item.stock_producto_id"
                                                >


                                                <template
                                                    x-if="item.stock_producto_id"
                                                >

                                                    <div class="lot-stock">

                                                        Máximo:

                                                        <strong
                                                            x-text="stockLoteSeleccionado(item)"
                                                        ></strong>

                                                    </div>

                                                </template>


                                                <template
                                                    x-if="!item.stock_producto_id"
                                                >

                                                    <div class="lot-warning">
                                                        Seleccione primero el lote.
                                                    </div>

                                                </template>

                                            </td>


                                            {{-- ACCIÓN --}}

                                            <td>

                                                <button
                                                    type="button"
                                                    class="remove-btn"
                                                    title="Quitar producto"
                                                    @click="eliminarItem(index)"
                                                >

                                                    <svg
                                                        class="w-4 h-4"
                                                        fill="none"
                                                        viewBox="0 0 24 24"
                                                        stroke="currentColor"
                                                        stroke-width="2"
                                                    >

                                                        <path
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-7 0h8"
                                                        />

                                                    </svg>

                                                </button>

                                            </td>

                                        </tr>

                                    </template>

                                </tbody>

                            </table>

                        </div>

                    </template>


                    <template x-if="!items.length">

                        <div class="empty-cart">

                            <svg
                                class="mx-auto mb-2 w-8 h-8 text-slate-300"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="1.5"
                            >

                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M7 7h11l-3-3m3 3-3 3M17 17H6l3 3m-3-3 3-3"
                                />

                            </svg>

                            <div>
                                No hay productos seleccionados.
                            </div>

                            <div class="text-xs mt-1 text-slate-300">
                                Busca un producto para agregarlo a la transferencia.
                            </div>

                        </div>

                    </template>

                </div>


                {{-- =====================================================
                     RESUMEN
                ====================================================== --}}

                <div class="transfer-summary">

                    <div class="flex items-center gap-6 flex-wrap">

                        <div class="summary-item">

                            <span class="summary-label">
                                Productos
                            </span>

                            <span
                                class="summary-value"
                                x-text="items.length"
                            ></span>

                        </div>


                        <div class="summary-item">

                            <span class="summary-label">
                                Unidades
                            </span>

                            <span
                                class="summary-value"
                                x-text="totalUnidades()"
                            ></span>

                        </div>


                        <div class="summary-item">

                            <span class="summary-label">
                                Lotes seleccionados
                            </span>

                            <span
                                class="summary-value"
                                x-text="totalLotesSeleccionados()"
                            ></span>

                        </div>

                    </div>

                </div>


                {{-- =====================================================
                     OBSERVACIÓN
                ====================================================== --}}

                <div class="mt-5">

                    <label class="field-label">
                        Observación
                    </label>

                    <textarea
                        name="observacion"
                        rows="2"
                        class="field-control"
                        placeholder="Observación de la transferencia..."
                    ></textarea>

                </div>


                {{-- =====================================================
                     CAMPO OCULTO
                ====================================================== --}}

                <input
                    type="hidden"
                    name="detalles_json"
                    x-ref="detallesJson"
                >


                {{-- =====================================================
                     BOTONES
                ====================================================== --}}

                <div class="mt-5 flex items-center justify-end gap-2">

                    <button
                        type="button"
                        class="btn-secondary"
                        @click="limpiarTodo()"
                    >
                        Limpiar
                    </button>


                    <button
                        type="submit"
                        class="btn-new"
                        :disabled="
                            guardando
                            || !items.length
                            || !origen
                            || !destino
                            || !todosValidos()
                        "
                        :class="{
                            'opacity-50 cursor-not-allowed':
                                guardando
                                || !items.length
                                || !origen
                                || !destino
                                || !todosValidos()
                        }"
                    >

                        <svg
                            x-show="!guardando"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2"
                        >

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M7 7h11l-3-3m3 3-3 3M17 17H6l3 3m-3-3 3-3"
                            />

                        </svg>


                        <svg
                            x-show="guardando"
                            x-cloak
                            class="animate-spin"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2"
                        >

                            <circle
                                cx="12"
                                cy="12"
                                r="9"
                                stroke-opacity=".25"
                            ></circle>

                            <path
                                d="M21 12a9 9 0 0 1-9 9"
                            ></path>

                        </svg>


                        <span
                            x-text="
                                guardando
                                    ? 'Procesando...'
                                    : 'Realizar transferencia'
                            "
                        ></span>

                    </button>

                </div>

            </form>

        </div>

    </div>


    {{-- =========================================================
         HISTORIAL
    ========================================================== --}}

    <div class="table-container">

        <div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">

            <div>

                <div class="text-sm font-semibold text-slate-700">
                    Historial de transferencias
                </div>

                <div class="text-xs text-slate-400 mt-1">
                    Últimas transferencias realizadas entre almacenes.
                </div>

            </div>

        </div>


        <div class="overflow-x-auto">

            <table class="table-premium">

                <thead>

                    <tr>

                        <th>CÓDIGO</th>

                        <th>FECHA</th>

                        <th>ORIGEN</th>

                        <th>DESTINO</th>

                        <th>USUARIO</th>

                        <th class="text-center">
                            PRODUCTOS
                        </th>

                        <th class="text-center">
                            UNIDADES
                        </th>

                        <th>ESTADO</th>

                        <th class="text-right">
                            ACCIONES
                        </th>

                    </tr>

                </thead>


                <tbody>

                    @forelse($transferencias as $transferencia)

                        <tr>

                            <td>

                                <span class="font-mono text-xs font-semibold text-slate-700">
                                    {{ $transferencia->codigo }}
                                </span>

                            </td>


                            <td class="text-slate-500 text-xs">

                                {{ optional($transferencia->fecha_transferencia)->format('d/m/Y H:i') }}

                            </td>


                            <td>

                                <div class="font-medium text-slate-700">
                                    {{ $transferencia->almacenOrigen?->nombre ?? '—' }}
                                </div>

                                <div class="text-[10px] text-slate-400">
                                    {{ $transferencia->almacenOrigen?->local?->nombre ?? '' }}
                                </div>

                            </td>


                            <td>

                                <div class="font-medium text-slate-700">
                                    {{ $transferencia->almacenDestino?->nombre ?? '—' }}
                                </div>

                                <div class="text-[10px] text-slate-400">
                                    {{ $transferencia->almacenDestino?->local?->nombre ?? '' }}
                                </div>

                            </td>


                            <td class="text-slate-500 text-xs">

                                {{ $transferencia->usuario?->name ?? '—' }}

                            </td>


                            <td class="text-center">

                                <span class="badge badge-gray">
                                    {{ $transferencia->detalles_count ?? 0 }}
                                </span>

                            </td>


                            <td class="text-center">

                                <span class="font-semibold text-slate-700">
                                    {{ $transferencia->detalles_sum_cantidad ?? 0 }}
                                </span>

                            </td>


                            <td>

                                @if($transferencia->estado === 'completada')

                                    <span class="badge badge-success">
                                        Completada
                                    </span>

                                @elseif($transferencia->estado === 'pendiente')

                                    <span class="badge badge-orange">
                                        Pendiente
                                    </span>

                                @else

                                    <span class="badge badge-gray">
                                        {{ ucfirst($transferencia->estado) }}
                                    </span>

                                @endif

                            </td>


                            <td class="text-right">

                                <div class="flex items-center justify-end gap-1">

                                    <a
                                        href="{{ route('transferencias.show', $transferencia) }}"
                                        class="action-btn action-btn-view"
                                        title="Ver detalle"
                                    >

                                        <svg
                                            class="w-4 h-4"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                            stroke-width="2"
                                        >

                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z"
                                            />

                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                                            />

                                        </svg>

                                    </a>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="9"
                                class="text-center py-10 text-slate-400"
                            >
                                No hay transferencias registradas.
                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        @if($transferencias->hasPages())

            <div class="pagination-bar">

                <div>

                    Mostrando
                    {{ $transferencias->firstItem() ?? 0 }}
                    a
                    {{ $transferencias->lastItem() ?? 0 }}
                    de
                    {{ $transferencias->total() }}
                    registros

                </div>

                <div>
                    {{ $transferencias->links() }}
                </div>

            </div>

        @endif

    </div>

</div>


<script>

function transferenciasApp() {

    return {

        origen: '',
        destino: '',

        busqueda: '',
        resultados: [],
        mostrarResultados: false,
        buscando: false,

        items: [],

        guardando: false,


        /* =====================================================
           INIT
        ====================================================== */

        init() {

        },


        /* =====================================================
           CAMBIAR ALMACÉN ORIGEN
        ====================================================== */

        cambiarOrigen() {

            this.items = [];

            this.resultados = [];

            this.busqueda = '';

            this.mostrarResultados = false;

        },


        /* =====================================================
           BUSCAR PRODUCTOS
        ====================================================== */

        async buscarProductos() {

            const q =
                String(this.busqueda || '').trim();


            if (!this.origen || q.length < 1) {

                this.resultados = [];

                this.mostrarResultados = false;

                return;
            }


            this.buscando = true;


            try {

                const params =
                    new URLSearchParams();

                params.append(
                    'q',
                    q
                );

                params.append(
                    'almacen_origen_id',
                    this.origen
                );


                const response =
                    await fetch(
                        '{{ route('transferencias.productos') }}?'
                        + params.toString(),
                        {
                            headers: {
                                'Accept':
                                    'application/json',

                                'X-Requested-With':
                                    'XMLHttpRequest'
                            }
                        }
                    );


                if (!response.ok) {

                    throw new Error(
                        'No se pudo buscar productos.'
                    );

                }


                const data =
                    await response.json();


                if (!data.ok) {

                    this.resultados = [];

                    this.mostrarResultados = false;

                    console.warn(
                        data.message ||
                        'No se encontraron productos.'
                    );

                    return;
                }


                this.resultados =
                    Array.isArray(data.productos)
                        ? data.productos
                        : [];


                this.mostrarResultados =
                    this.resultados.length > 0;


            } catch (error) {

                console.error(
                    'Error buscando productos:',
                    error
                );

                this.resultados = [];

                this.mostrarResultados = false;

            } finally {

                this.buscando = false;

            }

        },


        /* =====================================================
           PRIMER RESULTADO
        ====================================================== */

        seleccionarPrimerResultado() {

            if (
                this.mostrarResultados &&
                this.resultados.length
            ) {

                this.agregarProducto(
                    this.resultados[0]
                );

            }

        },


        /* =====================================================
           AGREGAR PRODUCTO
           
           IMPORTANTE:
           Si ya existe el mismo producto con lote
           seleccionado, se permite agregar otra línea.
           
           Esto permite:
           
           Alcohol
           lote 45698 -> 10
           
           Alcohol
           lote 78901 -> 20
           
           ====================================================== */

        agregarProducto(producto) {

            if (!producto) {
                return;
            }


            const existenteSinLote =
                this.items.find(
                    item =>
                        Number(item.producto_id) ===
                            Number(producto.id)
                        &&
                        !item.stock_producto_id
                );


            if (existenteSinLote) {

                /*
                 * Si todavía no seleccionó lote,
                 * no duplicamos la línea.
                 */
                return;

            }


            this.items.push({

                key:
                    Date.now()
                    + '_'
                    + producto.id
                    + '_'
                    + Math.random()
                        .toString(36)
                        .substring(2, 8),

                producto_id:
                    Number(producto.id),

                codigo_barras:
                    producto.codigo_barras || '',

                nombre:
                    producto.nombre || '',

                presentacion:
                    producto.presentacion || '',

                stock_total:
                    Number(producto.stock_total || 0),

                cantidad:
                    1,

                stock_producto_id:
                    '',

                lotes:
                    Array.isArray(producto.lotes)
                        ? producto.lotes
                        : []

            });


            this.busqueda = '';

            this.resultados = [];

            this.mostrarResultados = false;

        },


        /* =====================================================
           OBTENER LOTE SELECCIONADO
        ====================================================== */

        loteSeleccionado(item) {

            if (
                !item ||
                !item.stock_producto_id
            ) {
                return null;
            }


            return (
                item.lotes || []
            ).find(
                lote =>
                    String(lote.id) ===
                    String(item.stock_producto_id)
            ) || null;

        },


        /* =====================================================
           STOCK DEL LOTE SELECCIONADO
        ====================================================== */

        stockLoteSeleccionado(item) {

            const lote =
                this.loteSeleccionado(item);


            if (!lote) {
                return 0;
            }


            return Number(
                lote.stock || 0
            );

        },


        /* =====================================================
           CAMBIO DE LOTE
        ====================================================== */

        cambiarLote(index) {

            const item =
                this.items[index];


            if (!item) {
                return;
            }


            const lote =
                this.loteSeleccionado(item);


            if (!lote) {

                item.cantidad = 1;

                return;

            }


            const stock =
                Number(lote.stock || 0);


            if (stock <= 0) {

                item.cantidad = 0;

                return;

            }


            /*
             * Al seleccionar un lote,
             * automáticamente dejamos 1 unidad
             * como cantidad inicial.
             */
            item.cantidad =
                Math.min(
                    Math.max(
                        Number(item.cantidad || 1),
                        1
                    ),
                    stock
                );

        },


        /* =====================================================
           VALIDAR CANTIDAD
           
           La cantidad se valida contra el lote,
           NO contra el stock total del producto.
        ====================================================== */

        validarCantidad(index) {

            const item =
                this.items[index];


            if (!item) {
                return;
            }


            if (!item.stock_producto_id) {

                item.cantidad = 1;

                return;

            }


            const max =
                this.stockLoteSeleccionado(
                    item
                );


            if (max <= 0) {

                item.cantidad = 0;

                return;

            }


            let cantidad =
                parseInt(
                    item.cantidad,
                    10
                );


            if (
                !Number.isFinite(cantidad)
                ||
                cantidad < 1
            ) {

                cantidad = 1;

            }


            if (cantidad > max) {

                cantidad = max;

            }


            item.cantidad =
                cantidad;

        },


        /* =====================================================
           ELIMINAR
        ====================================================== */

        eliminarItem(index) {

            this.items.splice(
                index,
                1
            );

        },


        /* =====================================================
           BUSQUEDA
        ====================================================== */

        limpiarBusqueda() {

            this.busqueda = '';

            this.resultados = [];

            this.mostrarResultados = false;

        },


        cerrarResultados() {

            this.mostrarResultados = false;

        },


        /* =====================================================
           LIMPIAR TODO
        ====================================================== */

        limpiarTodo() {

            this.items = [];

            this.busqueda = '';

            this.resultados = [];

            this.mostrarResultados = false;

        },


        /* =====================================================
           TOTAL UNIDADES
        ====================================================== */

        totalUnidades() {

            return this.items.reduce(
                (
                    total,
                    item
                ) => {

                    return total +
                        Number(
                            item.cantidad || 0
                        );

                },
                0
            );

        },


        /* =====================================================
           TOTAL LOTES SELECCIONADOS
        ====================================================== */

        totalLotesSeleccionados() {

            return this.items.filter(
                item =>
                    !!item.stock_producto_id
            ).length;

        },


        /* =====================================================
           VALIDAR TODO
        ====================================================== */

        todosValidos() {

            if (!this.items.length) {
                return false;
            }


            for (const item of this.items) {

                if (
                    !item.stock_producto_id
                ) {
                    return false;
                }


                const lote =
                    this.loteSeleccionado(
                        item
                    );


                if (!lote) {
                    return false;
                }


                const cantidad =
                    Number(
                        item.cantidad || 0
                    );


                const stock =
                    Number(
                        lote.stock || 0
                    );


                if (
                    cantidad < 1 ||
                    cantidad > stock
                ) {
                    return false;
                }

            }


            return true;

        },


        /* =====================================================
           PREPARAR ENVÍO
        ====================================================== */

        prepararEnvio(event) {

            if (!this.origen) {

                event.preventDefault();

                alert(
                    'Seleccione el almacén de origen.'
                );

                return;

            }


            if (!this.destino) {

                event.preventDefault();

                alert(
                    'Seleccione el almacén de destino.'
                );

                return;

            }


            if (
                Number(this.origen) ===
                Number(this.destino)
            ) {

                event.preventDefault();

                alert(
                    'El almacén de origen y destino deben ser diferentes.'
                );

                return;

            }


            if (!this.items.length) {

                event.preventDefault();

                alert(
                    'Agregue al menos un producto.'
                );

                return;

            }


            /*
             * Validamos nuevamente cada producto
             * antes de enviar.
             */

            for (const item of this.items) {

                if (!item.stock_producto_id) {

                    event.preventDefault();

                    alert(
                        'Debe seleccionar el lote del producto: '
                        + item.nombre
                    );

                    return;

                }


                const lote =
                    this.loteSeleccionado(
                        item
                    );


                if (!lote) {

                    event.preventDefault();

                    alert(
                        'El lote seleccionado de '
                        + item.nombre
                        + ' no es válido.'
                    );

                    return;

                }


                const cantidad =
                    Number(
                        item.cantidad || 0
                    );


                const stock =
                    Number(
                        lote.stock || 0
                    );


                if (
                    cantidad < 1 ||
                    cantidad > stock
                ) {

                    event.preventDefault();

                    alert(
                        'La cantidad de '
                        + item.nombre
                        + ' supera el stock del lote '
                        + (lote.lote || 'Sin lote')
                        + '. Disponible: '
                        + stock
                    );

                    return;

                }

            }


            /*
             * Enviamos:
             *
             * producto_id
             * stock_producto_id
             * cantidad
             *
             * El backend usará exactamente ese lote.
             */

            this.$refs.detallesJson.value =
                JSON.stringify(
                    this.items.map(
                        item => ({
                            producto_id:
                                Number(
                                    item.producto_id
                                ),

                            stock_producto_id:
                                Number(
                                    item.stock_producto_id
                                ),

                            cantidad:
                                Number(
                                    item.cantidad
                                )
                        })
                    )
                );


            this.guardando = true;

        }

    };

}

</script>

@endsection