@extends('plantilla.app')
@section('titulo', 'NUEVO PEDIDO')
@section('contenido')

<div class="mb-5">
    <p class="text-xs uppercase tracking-wider text-slate-500">Gestión</p>
    <h1 class="text-2xl font-bold text-slate-900">Nuevo Pedido</h1>
    <p class="mt-1 text-sm text-slate-500">Registra cabecera y detalle del pedido.</p>
</div>

<form method="POST" action="{{ route('pedidos.store') }}" id="pedidoForm" class="space-y-5">
    @csrf

    <div class="grid grid-cols-1 gap-5 xl:grid-cols-3">
        <div class="xl:col-span-1 glass-card rounded-2xl border border-black/10 bg-white/80 p-5 shadow-xl shadow-indigo-100 backdrop-blur">
            <h3 class="mb-4 text-base font-bold text-slate-900">Cabecera</h3>

            <div class="space-y-4">
                <div>
                    <label class="mb-1 block text-sm font-semibold text-slate-600">Usuario</label>
                    <input type="text"
                        value="{{ $user->nombres }} - {{ $user->dni }}"
                        disabled
                        class="w-full rounded-xl border border-black/10 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                </div>

                @if (strtoupper($user->tipo) === 'ADMIN')
                    <div>
                        <label class="mb-1 block text-sm font-semibold text-slate-600">Almacenes</label>
                        <select name="almacen_id" id="almacen_id"
                            class="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:ring-4 focus:ring-indigo-100">
                            <option value="">Seleccione un almacén</option>
                            @foreach ($almacenes as $almacen)
                                <option value="{{ $almacen->id }}"
                                    {{ (string) old('almacen_id', $almacenSeleccionado) === (string) $almacen->id ? 'selected' : '' }}>
                                     {{ $almacen->nombre }}
                                </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-500">
                            Al cambiar de almacén se limpiará el detalle actual.
                        </p>
                    </div>
                @else
                    <input type="hidden" name="almacen_id" id="almacen_id" value="{{ $almacenSeleccionado }}">
                    <div>
                        <label class="mb-1 block text-sm font-semibold text-slate-600">Almacén</label>
                        <input type="text"
                            value="{{ $user->almacen->codigo ?? '' }} - {{ $user->almacen->nombre ?? '' }}"
                            disabled
                            class="w-full rounded-xl border border-black/10 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                    </div>
                @endif

                <div>
                    <label class="mb-1 block text-sm font-semibold text-slate-600">Fecha</label>
                    <input type="date" name="fecha" value="{{ old('fecha', now()->format('Y-m-d')) }}"
                        class="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-semibold text-slate-600">Correlativo</label>
                    <input type="text" value="Automático" disabled
                        class="w-full rounded-xl border border-black/10 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-semibold text-slate-600">Estado</label>
                    <input type="text" id="estadoPreview" value="BORRADOR" disabled
                        class="w-full rounded-xl border border-black/10 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-semibold text-slate-600">Total</label>
                    <input type="text" id="totalPreview" value="0.00" disabled
                        class="w-full rounded-xl border border-black/10 bg-slate-50 px-4 py-3 text-sm font-bold text-slate-800">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-semibold text-slate-600">Observación</label>
                    <textarea name="obs" rows="4"
                        class="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:ring-4 focus:ring-indigo-100">{{ old('obs') }}</textarea>
                </div>
            </div>
        </div>

        <div class="xl:col-span-2 glass-card rounded-2xl border border-black/10 bg-white/80 p-5 shadow-xl shadow-indigo-100 backdrop-blur">
            <div class="mb-4 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                <div>
                    <h3 class="text-base font-bold text-slate-900">Detalle del pedido</h3>
                    <p class="mt-1 text-sm text-slate-500">Busca productos por código o descripción del almacén seleccionado.</p>
                </div>

                <div class="flex w-full flex-col gap-2 sm:flex-row md:max-w-xl">
                    <input type="text" id="buscarProducto"
                        placeholder="Buscar producto..."
                        class="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm text-slate-700 outline-none focus:ring-4 focus:ring-indigo-100">
                    <button type="button" id="btnBuscarProducto"
                        class="rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
                        Buscar
                    </button>
                </div>
            </div>

            <div id="resultadosProductos" class="mb-5 hidden overflow-hidden rounded-xl border border-black/10 bg-white">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="bg-slate-50 text-slate-600">
                            <tr class="border-b border-black/10">
                                <th class="px-4 py-3 text-left font-semibold">Código</th>
                                <th class="px-4 py-3 text-left font-semibold">Descripción</th>
                                <th class="px-4 py-3 text-left font-semibold">Marca</th>
                                <th class="px-4 py-3 text-center font-semibold">U.M.</th>
                                <th class="px-4 py-3 text-right font-semibold">Precio</th>
                                <th class="px-4 py-3 text-right font-semibold">Stock</th>
                                <th class="px-4 py-3 text-right font-semibold">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyResultados">
                            <tr>
                                <td colspan="7" class="px-4 py-10 text-center text-slate-500">
                                    Busca un producto para empezar.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="overflow-hidden rounded-xl border border-black/10 bg-white">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="bg-slate-50 text-slate-600">
                            <tr class="border-b border-black/10">
                                <th class="px-4 py-3 text-left font-semibold">Código</th>
                                <th class="px-4 py-3 text-left font-semibold">Descripción</th>
                                <th class="px-4 py-3 text-center font-semibold">U.M.</th>
                                <th class="px-4 py-3 text-right font-semibold">Precio</th>
                                <th class="px-4 py-3 text-right font-semibold">Cantidad</th>
                                <th class="px-4 py-3 text-right font-semibold">Subtotal</th>
                                <th class="px-4 py-3 text-right font-semibold">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyDetalle">
                            <tr id="rowEmpty">
                                <td colspan="7" class="px-4 py-10 text-center text-slate-500">
                                    No hay productos agregados.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-5 flex justify-end gap-2">
                <a href="{{ route('pedidos') }}"
                    class="rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                    Cancelar
                </a>
                <button type="submit"
                    class="rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-amber-200 hover:bg-amber-600">
                    Guardar pedido
                </button>
            </div>
        </div>
    </div>

    <div id="hiddenItems"></div>
</form>

{{-- LIBRERÍA SWEETALERT2 PARA ALERTAS AGRADABLES --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    const btnBuscarProducto = document.getElementById('btnBuscarProducto');
    const buscarProducto = document.getElementById('buscarProducto');
    const almacenIdInput = document.getElementById('almacen_id');
    const resultadosProductos = document.getElementById('resultadosProductos');
    const tbodyResultados = document.getElementById('tbodyResultados');
    const tbodyDetalle = document.getElementById('tbodyDetalle');
    const hiddenItems = document.getElementById('hiddenItems');
    const totalPreview = document.getElementById('totalPreview');
    const estadoPreview = document.getElementById('estadoPreview');

    let detalle = [];

    function limpiarResultados() {
        tbodyResultados.innerHTML = `
            <tr>
                <td colspan="7" class="px-4 py-10 text-center text-slate-500">
                    Busca un producto para empezar.
                </td>
            </tr>
        `;
        resultadosProductos.classList.add('hidden');
        if (buscarProducto) buscarProducto.value = '';
    }

    function limpiarDetalle() {
        detalle = [];
        renderDetalle();
    }

    function renderDetalle() {
        hiddenItems.innerHTML = '';

        if (!detalle.length) {
            tbodyDetalle.innerHTML = `
                <tr id="rowEmpty">
                    <td colspan="7" class="px-4 py-10 text-center text-slate-500">No hay productos agregados.</td>
                </tr>
            `;
            totalPreview.value = '0.00';
            estadoPreview.value = 'BORRADOR';
            return;
        }

        let total = 0;

        tbodyDetalle.innerHTML = detalle.map((item, index) => {
            const subtotal = item.cantidad * item.punitario;
            total += subtotal;

            hiddenItems.innerHTML += `
                <input type="hidden" name="items[${index}][producto_id]" value="${item.id}">
                <input type="hidden" name="items[${index}][cantidad]" value="${item.cantidad}">
            `;

            return `
                <tr class="odd:bg-white even:bg-slate-50/40">
                    <td class="px-4 py-3 font-semibold text-slate-800">${item.cod_prod}</td>
                    <td class="px-4 py-3 text-slate-700">
                        ${item.descripcion}
                        <div class="text-[10px] text-slate-500 mt-1">Disp: ${item.stock}</div>
                    </td>
                    <td class="px-4 py-3 text-center text-slate-700">${item.umedida ?? ''}</td>
                    <td class="px-4 py-3 text-right font-semibold text-slate-800">${Number(item.punitario).toFixed(2)}</td>
                    <td class="px-4 py-3 text-right">
                        <input type="number" min="0.0001" step="0.0001" max="${item.stock}" value="${item.cantidad}"
                            data-index="${index}"
                            class="inputCantidad w-28 rounded-lg border border-black/10 px-3 py-2 text-right text-sm outline-none focus:ring-2 focus:ring-indigo-100">
                    </td>
                    <td class="px-4 py-3 text-right font-semibold text-slate-800">${subtotal.toFixed(2)}</td>
                    <td class="px-4 py-3 text-right">
                        <button type="button"
                            data-index="${index}"
                            class="btnEliminarItem inline-flex h-9 w-9 items-center justify-center rounded-xl bg-rose-600/10 text-rose-700 ring-1 ring-rose-100 hover:bg-rose-600/15">
                            <i class="fa-regular fa-trash-can text-sm"></i>
                        </button>
                    </td>
                </tr>
            `;
        }).join('');

        totalPreview.value = total.toFixed(2);
        estadoPreview.value = total > 0 ? 'ACTIVO' : 'BORRADOR';

        bindDetalleEvents();
    }

    function bindDetalleEvents() {
        document.querySelectorAll('.inputCantidad').forEach(input => {
            input.addEventListener('change', (e) => {
                const index = e.target.dataset.index;
                let value = parseFloat(e.target.value || 0);
                const stockMax = detalle[index].stock;

                if (isNaN(value) || value <= 0) {
                    value = 0.0001;
                }

                // Validación de stock con SweetAlert
                if (value > stockMax) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Stock Insuficiente',
                        text: `El máximo disponible de "${detalle[index].descripcion}" es de ${stockMax} unidades.`,
                        confirmButtonColor: '#4f46e5'
                    });
                    value = stockMax;
                }

                detalle[index].cantidad = value;
                renderDetalle();
            });
        });

        document.querySelectorAll('.btnEliminarItem').forEach(btn => {
            btn.addEventListener('click', () => {
                const index = parseInt(btn.dataset.index);
                detalle.splice(index, 1);
                renderDetalle();
            });
        });
    }

    function agregarProducto(item) {
        const stockDisponible = parseFloat(item.cantidad) || 0;

        // Evitar agregar si el stock es 0 o negativo
        if (stockDisponible <= 0) {
            Swal.fire({
                icon: 'error',
                title: 'Producto Agotado',
                text: 'Este producto no tiene stock disponible en el almacén seleccionado.',
                confirmButtonColor: '#e11d48'
            });
            return;
        }

        const existe = detalle.find(x => String(x.id) === String(item.id));

        if (existe) {
            if (existe.cantidad + 1 > existe.stock) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Límite alcanzado',
                    text: `No puedes agregar más. Solo hay ${existe.stock} unidades disponibles.`,
                    confirmButtonColor: '#f59e0b'
                });
                existe.cantidad = existe.stock;
            } else {
                existe.cantidad += 1;
            }
        } else {
            detalle.push({
                id: item.id,
                cod_prod: item.cod_prod,
                descripcion: item.descripcion,
                umedida: item.umedida,
                punitario: parseFloat(item.punitario),
                stock: stockDisponible,
                cantidad: 1 > stockDisponible ? stockDisponible : 1
            });

            // Opcional: Una alerta pequeñita (Toast) indicando que se agregó
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Producto agregado',
                showConfirmButton: false,
                timer: 1500
            });
        }

        renderDetalle();
    }

    function renderResultados(data) {
        resultadosProductos.classList.remove('hidden');

        if (!data.length) {
            tbodyResultados.innerHTML = `
                <tr>
                    <td colspan="7" class="px-4 py-10 text-center text-slate-500">No se encontraron productos.</td>
                </tr>
            `;
            return;
        }

        tbodyResultados.innerHTML = data.map(item => {
            const payload = encodeURIComponent(JSON.stringify(item));

            return `
                <tr class="odd:bg-white even:bg-slate-50/40">
                    <td class="px-4 py-3 font-semibold text-slate-800">${item.cod_prod}</td>
                    <td class="px-4 py-3 text-slate-700">${item.descripcion}</td>
                    <td class="px-4 py-3 text-slate-700">${item.marca ?? ''}</td>
                    <td class="px-4 py-3 text-center text-slate-700">${item.umedida ?? ''}</td>
                    <td class="px-4 py-3 text-right font-semibold text-slate-800">${Number(item.punitario).toFixed(2)}</td>
                    <td class="px-4 py-3 text-right text-slate-700">${item.cantidad}</td>
                    <td class="px-4 py-3 text-right">
                        <button type="button"
                            class="btnAgregarProducto inline-flex items-center gap-2 rounded-xl bg-emerald-600/10 px-3 py-2 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-100 hover:bg-emerald-600/15"
                            data-item="${payload}">
                            <i class="fa-solid fa-plus"></i> Agregar
                        </button>
                    </td>
                </tr>
            `;
        }).join('');

        document.querySelectorAll('.btnAgregarProducto').forEach(btn => {
            btn.addEventListener('click', () => {
                const item = JSON.parse(decodeURIComponent(btn.dataset.item));
                agregarProducto(item);
            });
        });
    }

    async function buscarProductosPedido() {
        const buscar = buscarProducto ? buscarProducto.value.trim() : '';
        const almacenId = almacenIdInput ? almacenIdInput.value : '';

        if (!almacenId) {
            Swal.fire({
                icon: 'info',
                title: 'Atención',
                text: 'Selecciona un almacén antes de buscar productos.',
                confirmButtonColor: '#4f46e5'
            });
            return;
        }

        tbodyResultados.innerHTML = `
            <tr>
                <td colspan="7" class="px-4 py-10 text-center text-slate-500">
                    <i class="fa-solid fa-spinner fa-spin mr-2"></i> Buscando productos...
                </td>
            </tr>
        `;
        resultadosProductos.classList.remove('hidden');

        try {
            const res = await fetch("{{ route('productos.Buscar') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Accept": "application/json"
                },
                body: JSON.stringify({
                    buscar: buscar,
                    almacen_id: almacenId
                })
            });

            const json = await res.json();

            if (!res.ok || !json.ok) {
                tbodyResultados.innerHTML = `
                    <tr>
                        <td colspan="7" class="px-4 py-10 text-center text-rose-600">${json.message || 'No se encontraron productos'}</td>
                    </tr>
                `;
                return;
            }

            renderResultados(json.data || []);
        } catch (error) {
            tbodyResultados.innerHTML = `
                <tr>
                    <td colspan="7" class="px-4 py-10 text-center text-rose-600">Error al buscar productos.</td>
                </tr>
            `;
        }
    }

    btnBuscarProducto?.addEventListener('click', buscarProductosPedido);

    buscarProducto?.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            buscarProductosPedido();
        }
    });

    // Si el admin cambia de almacén, limpiamos detalle y resultados
    almacenIdInput?.addEventListener('change', () => {
        limpiarDetalle();
        limpiarResultados();
    });

    renderDetalle();
</script>
@endsection