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

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endsection

@section('contenido') 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="container-fluid py-2 px-md-3 aleatorios-wrapper">
    <style>
        .aleatorios-wrapper {
            font-family: inherit;
            color: #1e293b;
        }
        .header-compact-ale {
            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-ale h5 {
            font-size: 1.1rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.3px;
        }
        .panel-compact-ale {
            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-ale {
            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-ale {
            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-ale {
            background: #1e293b;
            border-color: #334155;
        }
        #tablaAleatorios {
            font-size: 0.82rem;
            margin-top: 0 !important;
        }
        #tablaAleatorios 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;
        }
        #tablaAleatorios tbody td, #tablaAleatorios 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-ale d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <i class="fas fa-clipboard-check mr-2" style="font-size: 1.15rem; color: #38bdf8;"></i>
            <h5 class="mb-0">Auditoría de Inventario (Aleatorios)</h5>
        </div>
        <div class="small text-white-50 d-none d-sm-block">
            Muestreo para verificación física de stock
        </div>
    </div>

    <!-- Formulario de Filtros y Acciones -->
    <div class="panel-compact-ale">
        <form action="sugerirAleatorios" method="GET" id="formAleatorios">
            <input type="hidden" name="page" id="pageInput" value="{{ isset($productos) && method_exists($productos, 'currentPage') ? $productos->currentPage() : ($page ?? 1) }}">
            <div class="row align-items-end">
                <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-2 col-lg-2 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="inventarioA">Stock</label>
                    <select class="form-control form-control-sm" id="inventarioA" name="inventarioA">
                        <option value="con" {{ $inventarioA == 'con' ? 'selected' : '' }}>Con inventario (> 0)</option>
                        <option value="sin" {{ $inventarioA == 'sin' ? 'selected' : '' }}>Todos los registros</option>
                    </select>
                </div>

                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="categorias">Categoría</label>
                    <select class="form-control form-control-sm" name="categoria" id="categorias">
                        <option value="Todos">Todos</option>
                        @foreach ($categorias as $item)
                            <option value="{{$item->codcategoria}}" {{ $cate == $item->codcategoria ? 'selected' : '' }}>
                                {{$item->nomcategoria}}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="marca">Marca</label>
                    <select class="form-control form-control-sm" name="marca" id="marca">
                        <option value="Todos">Todos</option>
                        @foreach ($marcas as $item)
                            <option value="{{$item->codmarca}}" {{ $marc == $item->codmarca ? 'selected' : '' }}>
                                {{$item->nommarca}}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="ubicacion">Ubicación</label>
                    <select class="form-control form-control-sm" name="ubicacion" id="ubicacion">
                        <option value="Todos">Todas las ubicaciones</option>
                        <option value="sin_ubicacion" {{ $ubicacion == 'sin_ubicacion' ? 'selected' : '' }}>Sin ubicación asignada</option>
                        @foreach ($ubicaciones as $item)
                            @if(!empty($item->nombreUbica) && $item->nombreUbica !== 'sin_ubicacion' && $item->nombreUbica !== 'sin')
                                <option value="{{$item->nombreUbica}}" {{ $ubicacion == $item->nombreUbica ? 'selected' : '' }}>
                                    {{$item->nombreUbica}}
                                </option>
                            @endif
                        @endforeach
                    </select>
                </div>

                <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 mb-2">
                    <label class="form-label-compact" for="azar"># Items por Lote</label>
                    <input type="number" min="1" max="500" class="form-control form-control-sm" id="azar" name="azar" 
                           value="{{$azar}}" placeholder="Ej: 10, 20, 50">
                </div>

                <!-- Botonera de Acciones -->
                <div class="col-12 mt-2 pt-2 border-top d-flex flex-wrap justify-content-end align-items-center">
                    <button type="submit" id="botonGenerar" name="Generar" value="1" 
                            class="btn btn-warning btn-sm btn-action-compact font-weight-bold text-dark shadow-sm mr-2 mb-1"
                            onclick="var pi = document.getElementById('pageInput'); if(pi){ pi.value = 1; pi.disabled = false; } this.form.removeAttribute('target');">
                        <i class="fas fa-search"></i> Generar
                    </button>
                    <button type="submit" id="botonExportar" name="Exportar" value="1" 
                            class="btn btn-success btn-sm btn-action-compact font-weight-bold shadow-sm mr-2 mb-1"
                            onclick="var pi = document.getElementById('pageInput'); if(pi){ pi.disabled = false; }">
                        <i class="fas fa-file-excel"></i> Exportar
                    </button>
                    <button type="submit" id="botonImprimir" name="Imprimir" value="1" formtarget="_blank" 
                            class="btn btn-primary btn-sm btn-action-compact font-weight-bold shadow-sm mr-2 mb-1"
                            onclick="var pi = document.getElementById('pageInput'); if(pi){ pi.disabled = false; }">
                        <i class="fas fa-print"></i> Imprimir
                    </button>
                    <button type="submit" id="botonBarras" name="varcode" value="1" formtarget="_blank" 
                            class="btn btn-info btn-sm btn-action-compact font-weight-bold shadow-sm mr-2 mb-1"
                            onclick="var pi = document.getElementById('pageInput'); if(pi){ pi.disabled = false; }">
                        <i class="fas fa-barcode"></i> Generar Barras
                    </button>
                    <button type="button" id="btnAbrirTomaModal" 
                            class="btn btn-dark btn-sm btn-action-compact font-weight-bold shadow-sm mr-2 mb-1"
                            data-bs-toggle="modal" data-bs-target="#modalTomaAleatorios">
                        <i class="fas fa-clipboard-check text-info"></i> Toma Física / Escanear
                    </button>
                    <button type="button" id="btnAbrirHistorialCerradas" 
                            class="btn btn-outline-info btn-sm btn-action-compact font-weight-bold shadow-sm mr-2 mb-1"
                            data-bs-toggle="modal" data-bs-target="#modalHistorialTomasCerradas" title="Ver informes y exportar a Excel tomas de inventario cerradas">
                        <i class="fas fa-file-excel text-success"></i> Informes Tomas Cerradas
                    </button>
                    @include('menu.botonRegresar')
                </div>
            </div>

            <!-- Contenedor de la Tabla -->
            <div class="table-container-ale mt-3">
                @include('../menu/exportar.aleatorios')

                <!-- Paginación integrada -->
                @if(isset($productos) && method_exists($productos, 'total'))
                <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 pt-2 border-top">
                    <div class="d-flex align-items-center flex-wrap mb-2 mb-sm-0">
                        <span class="small text-muted font-weight-bold mr-2">
                            Página {{ $productos->currentPage() }} de {{ max(1, $productos->lastPage()) }} 
                            <span class="text-secondary">(Total: {{ $productos->total() }} productos)</span>
                        </span>
                        <div class="d-inline-flex align-items-center ml-sm-2">
                            <span class="small font-weight-bold mr-1 text-muted">Ir a hoja:</span>
                            <input type="number" id="inputJumpPage" min="1" max="{{ max(1, $productos->lastPage()) }}" 
                                   value="{{ $productos->currentPage() }}" 
                                   class="form-control form-control-sm text-center font-weight-bold" 
                                   style="width: 65px; height: 30px;"
                                   onkeydown="if(event.key === 'Enter'){ event.preventDefault(); document.getElementById('btnIrPagina').click(); }">
                            <button type="button" id="btnIrPagina" class="btn btn-sm btn-outline-primary ml-1" style="height: 30px; padding: 0 10px;"
                                    onclick="var p = parseInt(document.getElementById('inputJumpPage').value, 10); if(isNaN(p) || p < 1) p = 1; var pi = document.getElementById('pageInput'); if(pi){ pi.disabled = false; pi.value = p; } var f = document.getElementById('formAleatorios'); if(f){ f.removeAttribute('target'); f.submit(); }">
                                Ir
                            </button>
                        </div>
                    </div>
                    <div class="btn-group shadow-sm">
                        <button type="submit" name="page" value="1" 
                                class="btn btn-outline-secondary btn-sm" {{ $productos->onFirstPage() ? 'disabled' : '' }} title="Primera página"
                                onclick="var pi = document.getElementById('pageInput'); if(pi) pi.disabled = true; this.form.removeAttribute('target');">
                            <i class="fas fa-angle-double-left"></i>
                        </button>
                        <button type="submit" name="page" value="{{ max(1, $productos->currentPage() - 1) }}" 
                                class="btn btn-outline-secondary btn-sm" {{ $productos->onFirstPage() ? 'disabled' : '' }}
                                onclick="var pi = document.getElementById('pageInput'); if(pi) pi.disabled = true; this.form.removeAttribute('target');">
                            <i class="fas fa-chevron-left"></i> Anterior
                        </button>
                        <span class="btn btn-sm btn-light border-top border-bottom disabled font-weight-bold text-dark px-3">
                            {{ $productos->currentPage() }} / {{ max(1, $productos->lastPage()) }}
                        </span>
                        <button type="submit" name="page" value="{{ $productos->currentPage() + 1 }}" 
                                class="btn btn-outline-secondary btn-sm" {{ !$productos->hasMorePages() ? 'disabled' : '' }}
                                onclick="var pi = document.getElementById('pageInput'); if(pi) pi.disabled = true; this.form.removeAttribute('target');">
                            Siguiente <i class="fas fa-chevron-right"></i>
                        </button>
                        <button type="submit" name="page" value="{{ $productos->lastPage() }}" 
                                class="btn btn-outline-secondary btn-sm" {{ !$productos->hasMorePages() ? 'disabled' : '' }} title="Última página"
                                onclick="var pi = document.getElementById('pageInput'); if(pi) pi.disabled = true; this.form.removeAttribute('target');">
                            <i class="fas fa-angle-double-right"></i>
                        </button>
                    </div>
                </div>
                @endif
            </div>
        </form>
    </div>

    @include('inventario2.modalTomaAleatorios')
    @include('inventario2.modalHistorialTomas')
</div>
@endsection

@section('pie') 
<script src="{{ asset('js/aleatorios.js') }}?v={{ time() }}"></script>
@endsection