@extends('../padre.padre')

@section('contenido') 
<div class="container-fluid py-2 px-md-3 informemovimientos-wrapper">
    <style>
        .informemovimientos-wrapper {
            font-family: inherit;
            color: #1e293b;
        }
        .header-compact-inf {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 10px;
            padding: 8px 16px;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
            margin-bottom: 12px;
        }
        .header-compact-inf h5 {
            font-size: 1.1rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.3px;
        }
        .panel-compact-inf {
            background: #ffffff;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
            padding: 12px 16px;
            margin-bottom: 12px;
        }
        [data-theme='dark'] .panel-compact-inf {
            background: #1e293b;
            border-color: #334155;
            color: #f1f5f9;
        }
        .form-label-compact {
            font-size: 0.76rem;
            font-weight: 700;
            color: #475569;
            margin-bottom: 3px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        [data-theme='dark'] .form-label-compact {
            color: #94a3b8;
        }
        .filter-bodega-wrap label {
            width: 100% !important;
            margin-bottom: 0 !important;
        }
        .filter-bodega-wrap select {
            width: 100% !important;
            height: calc(1.5em + .5rem + 2px);
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .25rem;
        }
        .btn-action-compact {
            font-size: 0.82rem;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
        }
        .btn-action-compact:hover {
            transform: translateY(-1px);
        }
        .table-container-inf {
            background: #ffffff;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
            padding: 12px;
            overflow-x: auto;
        }
        [data-theme='dark'] .table-container-inf {
            background: #1e293b;
            border-color: #334155;
        }
        #tablep {
            font-size: 0.82rem;
            margin-top: 0 !important;
        }
        #tablep thead th {
            background-color: #f1f5f9;
            color: #334155;
            font-weight: 700;
            font-size: 0.74rem;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            padding: 8px 10px;
            white-space: nowrap;
            vertical-align: middle;
            border-bottom: 2px solid #cbd5e1;
        }
        #tablep tbody td, #tablep tbody th {
            padding: 6px 10px;
            vertical-align: middle;
            white-space: nowrap;
        }
        #botonRegresar {
            margin-left: 8px;
            padding: 0;
            display: inline-flex;
            align-items: center;
        }
        #botonRegresar img.inicio {
            height: 32px;
            width: auto;
        }
    </style>

    <!-- Encabezado compacto -->
    <div class="header-compact-inf d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <i class="fas fa-boxes mr-2" style="font-size: 1.15rem; color: #38bdf8;"></i>
            <h5 class="mb-0">Entradas / Salidas de Inventario</h5>
        </div>
        <div class="small text-white-50 d-none d-sm-block">
            Kardex de Movimientos
        </div>
    </div>

    <!-- Panel de Filtros -->
    <div class="panel-compact-inf">
        <form action="vermovimientos" method="GET" id="formFiltroMovimientos">
            <div class="row align-items-end">
                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="fecI">Fecha Inicial</label>
                    <input required type="date" name="fi" id="fecI" value="{{ $fi }}" class="form-control form-control-sm">
                </div>

                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="fecF">Fecha Final</label>
                    <input required type="date" name="ff" id="fecF" value="{{ $ff }}" class="form-control form-control-sm">
                </div>

                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 mb-2 filter-bodega-wrap">
                    <label class="form-label-compact">Bodega</label>
                    @include('../menu.bodegas')
                </div>

                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="nombreProducto">Buscar Producto</label>
                    <div class="position-relative">
                        <input type="text" class="form-control form-control-sm" name="producto" id="nombreProducto" list="listaProductos" 
                               placeholder="Código o presione Enter..." value="{{ request('producto') }}" autocomplete="off">
                        <datalist id="listaProductos"></datalist>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 mb-2">
                    <label class="form-label-compact" for="movimientoSelect">Movimiento</label>
                    <select class="form-control form-control-sm" name="movimiento" id="movimientoSelect">
                        <option @if($movi=="0") selected @endif value="0">Todos</option>
                        <option @if($movi=="entrada") selected @endif value="entrada">Entrada</option>
                        <option @if($movi=="salida") selected @endif value="salida">Salida</option>
                        <option @if($movi=="compra") selected @endif value="compra">Compra</option>
                        <option @if($movi=="venta") selected @endif value="venta">Factura</option>
                        <option @if($movi=="devolucion") selected @endif value="devolucion">Devolución</option>
                        <option @if($movi=="Salida_Traslado") selected @endif value="Salida_Traslado">Salida Traslado</option>
                        <option @if($movi=="Entrada_Traslado") selected @endif value="Entrada_Traslado">Entrada Traslado</option>
                        <option @if($movi=="Entrada_Guia") selected @endif value="Entrada_Guia">Devolución Guía</option>
                        <option @if($movi=="Retirado_Traslado") selected @endif value="Retirado_Traslado">Retirados De Traslado</option>
                        <option @if($movi=="Retiro_Producto") selected @endif value="Retiro_Producto">Retiro Producto</option>
                        <option @if($movi=="Salida_Guia") selected @endif value="Salida_Guia">Salida Productos Guías</option>
                        <option @if($movi=="Salida_Componente") selected @endif value="Salida_Componente">Salida Componente</option>
                    </select>
                </div>

                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 mb-2">
                    <label class="form-label-compact" for="notaInput">Nota / Motivo</label>
                    <input type="text" class="form-control form-control-sm" name="nota" id="notaInput" list="listaNotasSugeridas" 
                           placeholder="Filtrar por nota (Ajuste, Vencimiento...)" value="{{ $nota ?? request('nota') }}" autocomplete="off">
                    <datalist id="listaNotasSugeridas">
                        <option value="Ajuste Entrada">
                        <option value="Ajuste Salida">
                        <option value="Ingreso Compra">
                        <option value="Ajuste al inventario">
                        <option value="Vencimiento">
                        <option value="Devolución en compra">
                        <option value="Baja por Avería">
                    </datalist>
                </div>

                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 mb-2 d-flex align-items-center" style="height: 38px;">
                    <div class="custom-control custom-checkbox d-flex align-items-center">
                        <input type="checkbox" class="custom-control-input" id="checkAgrupado" name="agrupado" value="1" @if(request('agrupado') == 1) checked @endif>
                        <label class="custom-control-label font-weight-bold small text-secondary pl-1" for="checkAgrupado" style="cursor: pointer; user-select: none;">
                            Agrupado
                        </label>
                    </div>
                </div>

                <div class="col-xl-7 col-lg-7 col-md-5 col-sm-8 mb-2 d-flex justify-content-end align-items-center">
                    <button type="submit" id="botonf" class="btn btn-warning btn-sm btn-action-compact mr-2 font-weight-bold text-dark shadow-sm">
                        <i class="fas fa-search"></i> Consultar
                    </button>
                    <button type="submit" name="exportar" class="btn btn-success btn-sm btn-action-compact mr-2 font-weight-bold shadow-sm" value="1">
                        <i class="fas fa-file-excel"></i> Exportar
                    </button>
                    @include('menu.botonRegresar')
                </div>
            </div>
        </form>
    </div>

    <!-- Contenedor de la Tabla -->
    <div class="table-container-inf">
        @include('../menu/exportar.exportarMovimiento') 
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('nombreProducto');
    const datalistProductos = document.getElementById('listaProductos');
    let productosData = [];

    // Función para realizar la búsqueda
    function realizarBusqueda() {
        const valor = input.value;
        if(valor.length >= 2) {
            fetch('buscarProductosNombre?q=' + encodeURIComponent(valor))
                .then(response => response.json())
                .then(data => {
                    productosData = data;
                    datalistProductos.innerHTML = '';
                    data.forEach(producto => {
                        const option = document.createElement('option');
                        option.value = producto.codigo;
                        option.text = producto.nombre;
                        datalistProductos.appendChild(option);
                    });
                });
        }
    }

    // Realizar búsqueda solo al presionar Enter
    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            realizarBusqueda();
        }
    });

    // Permitir nueva búsqueda al hacer doble clic en el input
    input.addEventListener('dblclick', function() {
        this.value = '';
        datalistProductos.innerHTML = '';
        this.focus();
    });
});
</script>

@endsection