@extends('layouts.panel')

@section('title', 'Inventario & Costos - Almacén')

{{-- Inyectamos el CSS Operativo Específico --}}
@push('styles')
    @vite('resources/css/operational.css')
@endpush

@section('content')

    {{-- Header --}}
    <div class="shrink-0 mb-6 space-y-4 fade-in">
        <div class="flex flex-col md:flex-row justify-between items-end gap-4">
            <div>
                <h1 class="text-3xl font-black text-[#0f172a] tracking-tight">GESTIÓN DE INVENTARIO</h1>
                <div class="flex items-center gap-2 mt-1 text-sm font-medium text-slate-500">
                    <span>Almacén Central</span>
                    <span class="text-slate-300">|</span>
                    <span>Sucursal Principal</span>
                </div>
            </div>
            <div class="flex gap-2">
                <div class="bg-white border border-slate-200 px-4 py-2 rounded-xl shadow-sm text-right">
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Valorización Total</p>
                    <p class="text-xl font-black text-[#194B95] font-mono" id="kpi-valor">S/ 0.00</p>
                </div>
            </div>
        </div>

        {{-- Tabs --}}
        <div class="bg-slate-100 p-1.5 rounded-xl flex gap-1 overflow-x-auto no-scrollbar border border-slate-200">
            <button onclick="switchTab('carta')" id="tab-carta" class="nav-pill active flex-1">
                <i data-lucide="utensils-crossed" class="w-4 h-4 mr-2"></i> CARTA / MENÚ
            </button>
            <button onclick="switchTab('insumos')" id="tab-insumos" class="nav-pill flex-1">
                <i data-lucide="carrot" class="w-4 h-4 mr-2"></i> INSUMOS & SECOS
            </button>
            <button onclick="switchTab('bebidas')" id="tab-bebidas" class="nav-pill flex-1">
                <i data-lucide="wine" class="w-4 h-4 mr-2"></i> BAR & BOTELLAS
            </button>
            <button onclick="switchTab('movimientos')" id="tab-movimientos" class="nav-pill flex-1">
                <i data-lucide="history" class="w-4 h-4 mr-2"></i> HISTORIAL
            </button>
        </div>
    </div>

    {{-- Contenedor Principal --}}
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm flex flex-col flex-1 overflow-hidden relative fade-in" style="animation-delay: 100ms;">
        
        {{-- Barra de Herramientas --}}
        <div class="px-5 py-4 border-b border-slate-100 flex flex-col md:flex-row justify-between items-center gap-4 bg-white z-20">
            <div class="relative w-full md:w-80">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                <input type="text" id="searchInput" onkeyup="renderTable()" placeholder="Buscar producto, código o categoría..." 
                       class="op-input pl-10">
            </div>

            <div class="flex gap-3 w-full md:w-auto">
                <div class="flex items-center gap-2 px-3 py-2 bg-red-50 rounded-lg border border-red-100 cursor-pointer hover:bg-red-100 transition-colors" onclick="toggleFiltroCritico()">
                    <div class="relative">
                        <i data-lucide="alert-circle" class="w-4 h-4 text-[#E21C21]"></i>
                        <span class="absolute -top-1 -right-1 w-2 h-2 bg-[#E21C21] rounded-full animate-ping"></span>
                    </div>
                    <span class="text-xs font-bold text-[#E21C21]">CRÍTICOS</span>
                </div>

                <button onclick="abrirModalForm()" class="bg-[#194B95] text-white px-5 py-2.5 rounded-xl text-xs font-bold hover:bg-[#123670] transition-colors shadow-lg shadow-blue-100 flex items-center gap-2 transform active:scale-95">
                    <i data-lucide="plus-circle" class="w-4 h-4"></i> <span id="btn-add-text">NUEVO ÍTEM</span>
                </button>
            </div>
        </div>

        {{-- Tabla --}}
        <div class="flex-1 overflow-auto custom-scrollbar relative">
            <table class="w-full text-left border-collapse op-table" id="mainTable">
                <thead class="bg-slate-50 sticky top-0 z-10">
                    <tr id="tableHeader">
                        {{-- Se llena con JS --}}
                    </tr>
                </thead>
                <tbody id="tableBody" class="text-xs text-slate-600">
                    {{-- Se llena con JS --}}
                </tbody>
            </table>

            <div id="emptyState" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-white z-0">
                <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-3">
                    <i data-lucide="package-search" class="w-8 h-8 text-slate-300"></i>
                </div>
                <p class="text-sm font-medium text-slate-400">No se encontraron productos</p>
            </div>
        </div>
    </div>

    {{-- Modal Formulario --}}
    <div id="modalForm" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-[#0f172a]/60 backdrop-blur-sm transition-opacity" onclick="cerrarModales()"></div>
        <div class="bg-white w-full max-w-2xl rounded-2xl shadow-2xl relative z-10 flex flex-col max-h-[90vh] overflow-hidden fade-in">
            
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                <h3 class="text-base font-black text-slate-800 flex items-center gap-2" id="modalTitle">
                    <i data-lucide="box" class="w-5 h-5 text-[#194B95]"></i> NUEVO PRODUCTO
                </h3>
                <button onclick="cerrarModales()" class="text-slate-400 hover:text-[#E21C21]"><i data-lucide="x" class="w-6 h-6"></i></button>
            </div>

            <div class="p-6 overflow-y-auto custom-scrollbar space-y-6">
                
                <div class="flex flex-col md:flex-row gap-6">
                    <div id="sectionImage" class="hidden w-full md:w-1/3 flex-col gap-2">
                        <label class="text-[10px] font-bold text-slate-500 uppercase">FOTO DEL PLATO</label>
                        <div class="upload-zone rounded-xl h-40 flex flex-col items-center justify-center cursor-pointer relative overflow-hidden group">
                            <input type="file" id="inpImagen" class="absolute inset-0 opacity-0 cursor-pointer" accept="image/*" onchange="previewImage(event)">
                            <img id="imgPreview" class="absolute inset-0 w-full h-full object-cover hidden">
                            
                            <div id="uploadPlaceholder" class="text-center p-4">
                                <div class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-2 group-hover:bg-white transition-colors">
                                    <i data-lucide="image-plus" class="w-5 h-5 text-slate-400"></i>
                                </div>
                                <span class="text-[10px] text-slate-400 font-medium">Click para subir</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex-1 space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="col-span-2">
                                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Nombre</label>
                                <input type="text" id="inpNombre" class="op-input" placeholder="Ej: Lomo Saltado">
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Categoría</label>
                                <select id="inpCategoria" class="op-input cursor-pointer">
                                    {{-- Opciones dinámicas --}}
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Unidad</label>
                                <select id="inpUnidad" class="op-input cursor-pointer">
                                    <option value="UND">Unidad</option>
                                    <option value="KG">Kilogramo</option>
                                    <option value="LT">Litro</option>
                                    <option value="PORC">Porción</option>
                                </select>
                            </div>
                        </div>

                        <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Costo Producción</label>
                                    <div class="relative">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-400">S/</span>
                                        <input type="number" id="inpCosto" class="op-input pl-8 font-mono" placeholder="0.00">
                                    </div>
                                </div>
                                <div id="divPrecioVenta">
                                    <label class="block text-[10px] font-bold text-[#194B95] uppercase mb-1">Precio Venta</label>
                                    <div class="relative">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-[#194B95]">S/</span>
                                        <input type="number" id="inpPrecio" class="op-input pl-8 border-blue-200 bg-blue-50 text-[#194B95] font-mono font-bold" placeholder="0.00">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-4 pt-2 border-t border-slate-100">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Stock Actual</label>
                        <input type="number" id="inpStock" class="op-input text-center font-bold">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-[#E21C21] uppercase mb-1">Stock Mínimo</label>
                        <input type="number" id="inpMin" class="op-input border-red-200 bg-red-50 text-[#E21C21] text-center font-bold">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Proveedor</label>
                        <input type="text" id="inpProveedor" class="op-input" placeholder="Opcional">
                    </div>
                </div>

            </div>

            <div class="px-6 py-4 bg-slate-50 border-t border-slate-200 flex justify-end gap-3">
                <button onclick="cerrarModales()" class="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-600 text-xs font-bold hover:bg-white transition-all">CANCELAR</button>
                <button onclick="guardarProducto()" class="px-6 py-2.5 rounded-xl bg-[#194B95] text-white text-xs font-bold hover:bg-[#123670] shadow-lg shadow-blue-100 transition-all uppercase tracking-wide">
                    GUARDAR PRODUCTO
                </button>
            </div>
        </div>
    </div>

    {{-- Modal Ajuste Stock --}}
    <div id="modalAjuste" class="fixed inset-0 z-[60] hidden flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-[#0f172a]/60 backdrop-blur-sm transition-opacity" onclick="cerrarModales()"></div>
        <div class="bg-white w-full max-w-sm rounded-2xl border border-slate-200 shadow-2xl relative z-10 p-6 text-center">
            <input type="hidden" id="ajusteId">
            
            <div class="w-14 h-14 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4 text-[#194B95]">
                <i data-lucide="package-check" class="w-7 h-7"></i>
            </div>
            
            <h3 class="text-lg font-black text-slate-800" id="ajusteNombre">Nombre Producto</h3>
            <p class="text-xs text-slate-500 mb-6">Registro de Entrada / Salida</p>

            <div class="flex items-center justify-center gap-4 mb-6">
                <button onclick="updateAjuste(-1)" class="w-12 h-12 rounded-xl border border-slate-200 hover:border-[#E21C21] hover:text-[#E21C21] hover:bg-red-50 flex items-center justify-center transition-all"><i data-lucide="minus" class="w-6 h-6"></i></button>
                <div class="w-32">
                    <input type="number" id="inpCantAjuste" value="0" class="op-input-giant">
                </div>
                <button onclick="updateAjuste(1)" class="w-12 h-12 rounded-xl border border-slate-200 hover:border-emerald-500 hover:text-emerald-500 hover:bg-emerald-50 flex items-center justify-center transition-all"><i data-lucide="plus" class="w-6 h-6"></i></button>
            </div>

            <div class="text-left mb-6">
                 <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Motivo del Ajuste</label>
                 <select id="inpMotivo" class="op-input cursor-pointer">
                     <option value="Compra">Ingreso por Compra</option>
                     <option value="Producción">Ingreso Producción</option>
                     <option value="Merma">Salida por Merma</option>
                     <option value="Consumo">Consumo Interno</option>
                     <option value="Ajuste">Corrección Inventario</option>
                 </select>
            </div>

            <button onclick="confirmarAjuste()" class="w-full py-3.5 bg-[#194B95] text-white rounded-xl font-bold text-sm hover:bg-[#123670] shadow-lg shadow-blue-100 transition-transform active:scale-[0.98] uppercase tracking-wide">
                CONFIRMAR OPERACIÓN
            </button>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    lucide.createIcons();

    // --- VARIABLES GLOBALES ---
    let currentTab = 'carta';
    let filterCritical = false;

    // --- DATOS MOCK ---
    let db = {
        carta: [
            { id: 1, nombre: "Lomo Saltado", img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=100", costo: 18.00, precio: 45.00, stock: 15, min: 5, cat: 'Fondos' },
            { id: 2, nombre: "Ceviche Clásico", img: "https://images.unsplash.com/photo-1535400255456-984241443b29?w=100", costo: 15.00, precio: 38.00, stock: 4, min: 8, cat: 'Marinos' }
        ],
        insumos: [
            { id: 101, nombre: "Lomo Fino", unidad: "KG", costo: 45.00, stock: 4.5, min: 5, proveedor: "Carnes del Sur" },
            { id: 102, nombre: "Arroz Extra", unidad: "KG", costo: 3.80, stock: 50, min: 10, proveedor: "Distribuidora ABC" }
        ],
        bebidas: [
            { id: 201, nombre: "Inca Kola 1.5L", unidad: "UND", costo: 6.50, precio: 12.00, stock: 20, min: 10, proveedor: "Lindley" },
            { id: 202, nombre: "Cusqueña Trigo", unidad: "UND", costo: 4.50, precio: 10.00, stock: 2, min: 24, proveedor: "Backus" }
        ],
        movimientos: []
    };

    // --- FUNCIONES CORE ---
    function switchTab(tab) {
        currentTab = tab;
        document.querySelectorAll('.nav-pill').forEach(btn => btn.classList.remove('active'));
        document.getElementById('tab-' + tab).classList.add('active');

        const btnText = tab === 'carta' ? 'NUEVO PLATO' : (tab === 'insumos' ? 'NUEVO INSUMO' : 'NUEVO PRODUCTO');
        document.getElementById('btn-add-text').innerText = btnText;

        renderTable();
    }

    function renderTable() {
        const tableHead = document.getElementById('tableHeader');
        const tableBody = document.getElementById('tableBody');
        const search = document.getElementById('searchInput').value.toLowerCase();
        
        tableBody.innerHTML = '';
        
        if(currentTab === 'movimientos') {
            renderKardex(tableHead, tableBody);
            return;
        }

        // Definir Headers según Tab
        if(currentTab === 'carta') {
            tableHead.innerHTML = `
                <th class="px-6 py-3 pl-8">Plato / Producto</th>
                <th class="px-6 py-3 text-center">Categoría</th>
                <th class="px-6 py-3 text-right">Costo</th>
                <th class="px-6 py-3 text-right">Precio Venta</th>
                <th class="px-6 py-3 text-right">Margen</th>
                <th class="px-6 py-3 text-center w-40">Disponibilidad</th>
                <th class="px-6 py-3 text-center">Acciones</th>
            `;
        } else {
            tableHead.innerHTML = `
                <th class="px-6 py-3 pl-8">Producto / Ítem</th>
                <th class="px-6 py-3">Proveedor</th>
                <th class="px-6 py-3 text-center">Unidad</th>
                <th class="px-6 py-3 text-right">Costo Unit.</th>
                <th class="px-6 py-3 text-right">Valor Total</th>
                <th class="px-6 py-3 text-center w-40">Nivel Stock</th>
                <th class="px-6 py-3 text-center">Acciones</th>
            `;
        }

        let data = db[currentTab] || [];
        let totalValor = 0;

        // Filtrado
        const filtered = data.filter(item => {
            const matchSearch = item.nombre.toLowerCase().includes(search);
            const isCritical = item.stock <= item.min;
            if (filterCritical && !isCritical) return false;
            return matchSearch;
        });

        // Estado Vacío
        if(filtered.length === 0) {
            document.getElementById('emptyState').classList.remove('hidden');
        } else {
            document.getElementById('emptyState').classList.add('hidden');
        }

        // Renderizado Filas
        filtered.forEach(item => {
            const isCritical = item.stock <= item.min;
            totalValor += (item.stock * item.costo);

            const percent = Math.min(100, (item.stock / (item.min * 2)) * 100);
            const barColor = isCritical ? 'stock-critico' : 'stock-ok';
            const stockClass = isCritical ? 'text-[#E21C21] font-black' : 'text-emerald-600 font-bold';

            let rowHTML = '';

            if(currentTab === 'carta') {
                const margen = item.precio > 0 ? ((item.precio - item.costo) / item.precio * 100).toFixed(0) : 0;
                rowHTML = `
                    <td class="px-6 py-4 pl-8">
                        <div class="flex items-center gap-4">
                            <img src="${item.img || 'https://via.placeholder.com/40'}" class="w-10 h-10 rounded-lg object-cover border border-slate-200 shadow-sm">
                            <span class="font-bold text-slate-700 text-sm">${item.nombre}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-center"><span class="bg-slate-100 text-slate-500 px-2 py-1 rounded text-[10px] font-bold uppercase">${item.cat || 'General'}</span></td>
                    <td class="px-6 py-4 text-right font-mono text-xs text-slate-500">S/ ${item.costo.toFixed(2)}</td>
                    <td class="px-6 py-4 text-right font-mono text-sm font-bold text-[#194B95]">S/ ${item.precio.toFixed(2)}</td>
                    <td class="px-6 py-4 text-right text-xs font-bold text-emerald-600">${margen}%</td>
                `;
            } else {
                rowHTML = `
                    <td class="px-6 py-4 pl-8 font-bold text-slate-700 text-sm">${item.nombre}</td>
                    <td class="px-6 py-4 text-xs text-slate-500"><i data-lucide="truck" class="w-3 h-3 inline mr-1"></i>${item.proveedor || 'Varios'}</td>
                    <td class="px-6 py-4 text-center text-xs font-bold text-slate-400 bg-slate-50 mx-auto rounded">${item.unidad}</td>
                    <td class="px-6 py-4 text-right font-mono text-xs text-slate-600">S/ ${item.costo.toFixed(2)}</td>
                    <td class="px-6 py-4 text-right font-mono text-sm font-bold text-slate-800">S/ ${(item.stock * item.costo).toFixed(2)}</td>
                `;
            }

            rowHTML += `
                <td class="px-6 py-4">
                    <div class="flex flex-col gap-1.5 w-full">
                        <div class="flex justify-between text-[10px] font-bold uppercase">
                            <span class="${stockClass}">${item.stock}</span>
                            <span class="text-slate-400">Min: ${item.min}</span>
                        </div>
                        <div class="stock-track">
                            <div class="stock-bar ${barColor}" style="width: ${percent}%"></div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 text-center">
                    <div class="flex justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button onclick="abrirAjuste(${item.id})" class="p-2 rounded-lg text-emerald-600 hover:bg-emerald-50 transition-colors" title="Ajustar Stock">
                            <i data-lucide="archive-restore" class="w-4 h-4"></i>
                        </button>
                        <button onclick="eliminarItem(${item.id})" class="p-2 rounded-lg text-slate-400 hover:text-[#E21C21] hover:bg-red-50 transition-colors" title="Eliminar">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                    </div>
                </td>
            `;

            const tr = document.createElement('tr');
            tr.className = "hover:bg-slate-50 transition-colors border-b border-slate-100 group";
            tr.innerHTML = rowHTML;
            tableBody.appendChild(tr);
        });
        
        document.getElementById('kpi-valor').innerText = `S/ ${totalValor.toFixed(2)}`;
        lucide.createIcons();
    }

    function renderKardex(head, body) {
        head.innerHTML = `
            <th class="px-6 py-3 pl-8">Fecha</th>
            <th class="px-6 py-3">Movimiento</th>
            <th class="px-6 py-3">Producto</th>
            <th class="px-6 py-3 text-center">Cantidad</th>
            <th class="px-6 py-3 text-center">Usuario</th>
            <th class="px-6 py-3 text-right pr-8">Stock Final</th>
        `;
        body.innerHTML = `
            <tr class="hover:bg-slate-50 border-b border-slate-100">
                <td class="px-6 py-4 pl-8 font-mono text-xs text-slate-500">28/01 10:00</td>
                <td class="px-6 py-4"><span class="bg-emerald-50 text-emerald-600 border border-emerald-100 px-2 py-0.5 rounded text-[10px] font-bold uppercase">Ingreso</span></td>
                <td class="px-6 py-4 font-bold text-slate-700 text-xs">Lomo Fino</td>
                <td class="px-6 py-4 text-center font-bold text-emerald-600">+10.00</td>
                <td class="px-6 py-4 text-center text-xs text-slate-500">Admin</td>
                <td class="px-6 py-4 pr-8 text-right font-mono font-black">12.50</td>
            </tr>
        `;
        document.getElementById('emptyState').classList.add('hidden');
        lucide.createIcons();
    }

    // --- LÓGICA MODALES ---
    function abrirModalForm() {
        const isCarta = currentTab === 'carta';
        document.getElementById('modalTitle').innerHTML = isCarta 
            ? '<i data-lucide="utensils" class="w-5 h-5 text-[#194B95]"></i> NUEVO PLATO' 
            : '<i data-lucide="box" class="w-5 h-5 text-[#194B95]"></i> NUEVO ÍTEM';
        
        const imgSec = document.getElementById('sectionImage');
        const precioVenta = document.getElementById('divPrecioVenta');
        
        if(isCarta) {
            imgSec.classList.remove('hidden'); imgSec.classList.add('flex');
            precioVenta.classList.remove('hidden');
        } else {
            imgSec.classList.add('hidden'); imgSec.classList.remove('flex');
            precioVenta.classList.add('hidden');
        }
        document.getElementById('modalForm').classList.remove('hidden');
        document.getElementById('modalForm').classList.add('flex');
        lucide.createIcons();
    }

    function abrirAjuste(id) {
        let item = db[currentTab].find(i => i.id === id);
        document.getElementById('ajusteId').value = id;
        document.getElementById('ajusteNombre').innerText = item.nombre;
        document.getElementById('inpCantAjuste').value = 0;
        document.getElementById('modalAjuste').classList.remove('hidden');
        document.getElementById('modalAjuste').classList.add('flex');
    }

    function updateAjuste(delta) {
        let el = document.getElementById('inpCantAjuste');
        el.value = parseInt(el.value) + delta;
    }

    function confirmarAjuste() { cerrarModales(); renderTable(); }
    function guardarProducto() { cerrarModales(); renderTable(); }
    
    function cerrarModales() {
        document.getElementById('modalForm').classList.add('hidden');
        document.getElementById('modalForm').classList.remove('flex');
        document.getElementById('modalAjuste').classList.add('hidden');
        document.getElementById('modalAjuste').classList.remove('flex');
    }

    function toggleFiltroCritico() { filterCritical = !filterCritical; renderTable(); }

    function previewImage(event) {
        const input = event.target;
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.getElementById('imgPreview');
                img.src = e.target.result; img.classList.remove('hidden');
                document.getElementById('uploadPlaceholder').classList.add('hidden');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    // Inicializar
    renderTable();
</script>
@endpush