@extends('layouts.default')
@section('content')
<!-- Modal Ver Articulos-->
<div class="modal fade" id="modal-buscarArticulo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold" id="exampleModalLabel">Articulos</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <br> 
                <table id="tableArticulos" data-dismiss="modal" class="table table-striped table-hover">

                </table>
            </div>
        </div>
    </div>
</div>
<!-- Fin Modal -->

<!-- Modal Documentos de Movimientos -->
<div class="modal fade" id="modalDoctosMovimientos" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document" style="max-width: 90%;">
        <div class="modal-content">
            <div class="modal-body">  
                <div class="row">       
                    <div class="col-md-2">                        
                        <div class="form-group">
                            <span class="x-label">Fecha Inicio:</span>
                            <input type="text" class="x-form-control" id="fechaDoc" value="10/12/2025" onchange="verDoctosMovimientos()" readonly autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-2">                        
                        <div class="form-group">
                            <span class="x-label">Fecha Fin:</span>
                            <input type="text" class="x-form-control" id="fechaDocFin" value="10/12/2025" onchange="verDoctosMovimientos()" readonly autocomplete="off"/>
                        </div>
                    </div>
                </div> 
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Movimiento</th>
                                <th>Tipo</th>
                                <th>Folio</th>
                                <th>Realizó</th>
                                <th>Almacén</th>
                            </tr>
                        </thead>
                        <tbody id="bodyDocumentos"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" 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-8 col-lg-10 col-xl-10">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Folio:</span>
                                    <div class="input-group">
                                        <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="folio" placeholder="----" readonly autocomplete="off" />
                                        <div class="input-group-append">
                                            <button class="btn btn-sm btn-primary" type="button" id="buttonVer" onclick="abreModalDoctosMovimientos()">
                                                <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                            </button>
                                        </div>
                                        <input type="text" style="display:none" id="idMovimiento">
                                    </div>   
                                </div>
                                <!-- <div class="form-group">
                                    <span class="x-label">Folio:</span>
                                    <input type="text" class="x-form-control" id="folio" disabled/>
                                </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="fecha" value="10/12/2025" disabled/>
                                </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">Movimiento:</span>
                                    <select class="x-form-control" id="movimiento" onchange="tipoMovimiento()">

                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3" id="entrada">
                                <div class="form-group">
                                    <span class="x-label">Entrada:</span>
                                    <select id="movEntrada" class="x-form-control">
       
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3" id="salida" style="display: none;">
                                <div class="form-group">
                                    <span class="x-label">Salida:</span>
                                    <select id="movSalida" class="x-form-control">

                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Almacen:</span>
                                    <select class="x-form-control" id="almacen" onchange="getFolioEntradaSalida()">

                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-8 col-lg-6 col-xl-6">
                                <div class="form-group">
                                    <span class="x-label">Artículo:</span>
                                    <div class="input-group">
                                        <input type="text" class="x-form-control" id="buscarArticulo" onkeypress="searchArticulo(event)">
                                        <!--<button class="input-group-text" type="button" onclick="searchArticuloClick()">
                                            <i class="mdi mdi-search-web"></i>
                                        </button>-->
                                    </div>
                                    <input type="text" class="x-form-control" id="codigo" style="display:none"/>
                                    <input type="text" class="x-form-control" id="articulo" style="display:none"/>
                                    <input type="text" class="x-form-control" id="codigotrupper" style="display:none"/>
                                    <input type="text" class="x-form-control" id="idArticulo" style="display:none"/>
                                    <input type="text" class="x-form-control" id="idAlmacen" style="display:none"/>
                                    <input type="text" class="x-form-control" id="idArticuloAlmacen" style="display:none"/>
                                    <input type="text" class="x-form-control" id="cantidadArticulo" style="display:none"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-8 col-lg-3 col-xl-3">
                                <div class="row">
                                    <div class="col-7">                        
                                        <div class="form-group">
                                            <span class="x-label">Costo Prom.</span>
                                            <input type="text" class="x-form-control" id="costo" disabled />
                                        </div>
                                    </div>
                                    <div class="col-5">                        
                                        <div class="form-group">
                                            <span class="x-label">Cantidad</span>
                                            <input type="number" class="x-form-control" id="cantidad" onkeypress="agregarArticuloEnter(event)" disabled/>
                                        </div>
                                    </div>
                                </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>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                        <div class="row">
                            <div id="imagenArticulo" style="height: 160px; overflow:auto"> 
                            <input type="text" class="form-control x-form-control-sm" id="imagenArticulo" style="display:none"/>
                                <div class="col-12" style="padding: 10px">
                                    <div style="border: #DDD 1px solid; background-color: #fefefe; padding:10px; height:140px;">
                                        <div id="changeFotoArticulo">
                                            <img src="../imagenes/logos/default.jpg" class="img-fluid" style="max-height:178px" id="previewfotoArticulo"/>
                                            <input type="file" class="form-control-file" style="display: none" id="inputPhotoArticulo" accept="image/*" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>     
                    </div>
                </div>
                <div class="row" style="height:300px; overflow:auto">
                    <div class="table-responsive">
                        <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Código</th>
                                <th>Descripcion</th>
                                <th>Costo Unit.</th>
                                <th>Cantidad</th>
                                <th>Costo Prom.</th>
                                <th>IVA</th>
                                <th>Importe</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="itemsTable">
                            
                        </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" style="padding-top:20px">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-5 col-xl-5">
                        Observaciones:<br/>
                        <textarea class="form-control" id="observaciones" rows="3"></textarea>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                        <div class="row my-2">
                            <div class="col-md-6">
                                Subtotal:
                            </div>
                            <div class="col-md-6" style="text-align:right" id="subtotal">
                                $ 0.00
                            </div>                    
                            <div class="col-md-6">
                                Descuento:
                            </div>
                            <div class="col-md-6" style="text-align:right" id="descuento">
                                $ 0.00
                            </div>                    
                            <div class="col-md-6">
                                I.V.A:
                            </div>
                            <div class="col-md-6" style="text-align:right" id="iva">
                                $ 0.00
                            </div>                   
                            <!-- <div class="col-md-6">
                                Imp. Ret:
                            </div>
                            <div class="col-md-6" style="text-align:right">
                                $ 0.00
                            </div>                    -->
                            <div class="col-md-6">
                                <b>TOTAL:</b>
                            </div>
                            <div class="col-md-6" style="text-align:right" id="total">
                                <b>$ 0.00</b>
                            </div>
                        </div>
                    </div>         
                    <div class="col-12 col-sm-6 col-md-5 col-lg-4 col-xl-4">
                        <div style="float:right; margin-right:5px">
                            <button type="button" id="buttonImprimir" class="btn btn-warning" style="margin:3px; display:none" onclick="imprimirMovimiento()">
                                <i class="mdi mdi-printer" style="font-size:3.4em"></i>
                                <br/>
                                Imprimir
                            </button>
                            <button type="button" id="buttonReinicia" class="btn btn-secondary" style="margin:3px;" onclick="reinicia()">
                                <i class="mdi mdi-printer" style="font-size:3.4em"></i>
                                <br/>
                                Limpiar
                            </button>                        
                            <button type="button" id="buttonCancelar" class="btn btn-danger" style="margin:3px; display:none" onclick="cancelarMovimiento()">
                                <i class="mdi mdi-close" style="font-size:3.4em"></i>
                                <br/>
                                Cancelar
                            </button>
                            <button type="button" id="buttonAprobar" class="btn btn-primary" style="margin:3px; display:none" disabled onclick="aprobarMovimiento()">
                                <i class="mdi mdi-check" style="font-size:3.4em"></i>
                                <br/>
                                Aprobar
                            </button> 
                            <button type="button" id="buttonGuardar" class="btn btn-success" style="margin:3px; display:none" onclick="solicitarMovimiento()">
                                <i class="mdi mdi-upload" id="iconGuardar" style="font-size:3.4em"></i>
                                <br/>
                                Guardar
                            </button>  
                        </div>
                    </div>                   
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('jspage')
  <script src="jsprod/entradasalida.js"></script>
  <script src="jsprod/misc.js"></script>
@stop