@extends('layouts.default')
@section('content')

<!-- Modal Buscar Usuario -->
<div class="modal fade" id="modalUsuarios" tabindex="-1" role="dialog" aria-labelledby="modalEmpleadosLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalEmpleadosLabel" style="font-size:1.2em">Seleccione un Usuario</h4>
                <div style="width:50%">
                    <div class="input-group">
                        <input type="text" class="form-control" id="searchName" placeholder="Escribe el nombre o username del usuario" autocomplete="off" />
                        <!-- <button class="btn btn-sm btn-success" type="button" id="btnNewCliente">
                            <i class="mdi mdi-account-plus" style="font-size:1.8em"></i>
                        </button> -->
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="table-responsive" style="height:400px;overflow:auto">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Clave</th>
                                    <th>Nombre</th>
                                    <th>Username</th>
                                    <th>Sucursal</th>
                                </tr>
                            </thead>
                            <tbody id="bodyUsuarios"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="modalEmpleadosClose" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">                    
                <div class="row"> 
                    <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Sucursal:</span>
                            <select class="x-form-control" id="sucursal" onchange="getAllArticulosEnProceso()">

                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Operacion:</span>
                            <select class="x-form-control" id="operacion" onchange="getAllArticulosEnProceso()">

                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <span class="x-label">Usuario:</span>
                            <input type="text" class="x-form-control" id="usuario" placeholder="Seleccione..." readonly autocomplete="off" />
                            <input type="text" style="display:none" id="idusuario" value="0">
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Fecha:</span>
                            <input type="text" class="x-form-control" id="fechainicio" onchange="getAllArticulosEnProceso()" value="10/12/2025"/>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Fecha:</span>
                            <input type="text" class="x-form-control" id="fechafin" onchange="getAllArticulosEnProceso()" value="10/12/2025"/>
                        </div>
                    </div>
                    <!-- <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                        <button type="button" id="buttonAgregar" class="btn btn-info btn-icon-text" onclick="agregarArticulo()" style="margin:3px; width:72px">
                            <i class="mdi mdi-plus" style="font-size:1.6em"></i>                                                                          
                        </button>    
                        <button type="button" id="buttonLimpiar" class="btn btn-secondary btn-icon-text" onclick="limpiarInputs()" style="margin:3px; width:72px">
                            <i class="mdi mdi-file" style="font-size:1.6em"></i>                                                                          
                        </button>  
                    </div> -->
                </div>
                <div class="row" style="overflow:auto">
                    <div class="table-responsive">
                        <table class="table table-striped" id="tablaMovimientos">
                            <thead style="background-color:#777">
                                <tr>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Sucursal</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Operacion</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Usuario</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Fecha</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Codigo</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Descripcion</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">En Proceso</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Proceso</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Cantidad Ope</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="row" style="overflow:auto">
                    <div class="table-responsive">
                        <table class="table table-striped" id="tablaSinMovimientos">
                            <thead style="background-color:#777">
                                <tr>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Sucursal</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Codigo</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Descripcion</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">En Proceso</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</div>
@stop

@section('jspage')
    <script src="jsprod/misc.js?v=1.1"></script>
    <script src="jsprod/articulosenproceso.js"></script>
@stop