@extends('layouts.default')
@section('content')
<!-- Modal botones Cantidad -->
<div class="modal fade" id="numCantidad" tabindex="-1" role="dialog" aria-labelledby="numCantidadLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-body">
            <div class="d-flex justify-content-center">
                <input type="text" class="form-control" id="cantidadTraspaso" style="width:90%; font-size:1.5em; text-align:center" placeholder="Ingresa cantidad" readonly />
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(1)">1</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(2)">2</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(3)">3</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(4)">4</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(5)">5</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(6)">6</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(7)">7</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(8)">8</button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(9)">9</button>
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-danger" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="delInput()"><i class="mdi mdi-backspace" style="font-size:1.5em"></i></button>
                <button class="btn btn-secondary" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="addInput(0)">0</button>
                <button class="btn btn-success" style="width:30%;float:left;font-size:1.5em; margin:2px" onclick="saveInput()"><i class="mdi mdi-check" style="font-size:1.5em"></i></button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="numCantidadClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Articulos-->
<div class="modal fade" id="modal-buscarArticulo" 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-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> 
                <div id="tableArticulos">
                    
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Fin Modal -->

<!-- Modal Documentos de Traspasos -->
<div class="modal fade" id="modalDoctosTraspasos" 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-3">                        
                        <div class="form-group">
                            <span class="x-label">Fecha:</span>
                            <input type="text" class="x-form-control" id="fechaDoc" value="10/12/2025" onchange="verDoctosTraspasos()" readonly autocomplete="off"/>
                        </div>
                    </div>
                </div> 
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Tipo</th>
                                <th>Folio</th>
                                <th>Realizó</th>
                                <th>Alm Origen</th>
                                <th>Alm Destino</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-4 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" onclick="abreModalDoctosTraspasos()">
                                                <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                            </button>
                                        </div>
                                        <input type="text" style="display:none" id="idTraspaso">
                                    </div>   
                                </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 Origen:</span>
                                    <select class="x-form-control" id="almacenOrigen" onchange="getAlmacenesUsuarioDestino()">

                                    </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 Destino:</span>
                                    <select class="x-form-control" id="almacenDestino">

                                    </select>
                                </div>
                            </div>
                            <div class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">Sistema:</span>
                                    <select class="x-form-control" id="sistema" onchange="changeSistema()">
                                        <option value="">Elige...</option>
                                        <option value="prediction">Prediction</option>
                                        <option value="sitex">SitexERP</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 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-6 col-lg-5 col-xl-5">
                                <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="impuestoArticulo" style="display:none"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-8 col-lg-4 col-xl-4">
                                <div class="row">
                                    <div class="col-6">                        
                                        <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-6">                        
                                        <div class="form-group">
                                            <span class="x-label">Cantidad</span>
                                            <input type="text" class="x-form-control" id="cantidad" onkeypress="agregarArticuloEnter(event)"/>
                                            <input type="text" class="x-form-control" id="cantidadArticulo" style="display:none"/>
                                        </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="../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 class="row">
                            <div id="imagenArticulo" style="height: 160px; overflow:auto"> 
                                <div class="col-12" style="padding: 10px">
                                    <div style="border: #DDD 1px solid; background-color: #fefefe; padding:10px; height:140px;">
                                    </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>Codigo</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" onclick="imprimirTraspaso()">
                                <i class="mdi mdi-printer" style="font-size:3.4em"></i>
                                <br/>
                                Imprimir
                            </button>                     
                            <button type="button" id="buttonCancelar" class="btn btn-danger" style="margin:3px" onclick="cancelarTraspaso()">
                                <i class="mdi mdi-close" style="font-size:3.4em"></i>
                                <br/>
                                Cancelar
                            </button>    
                            <button type="button" id="buttonSolicitar" class="btn btn-success" style="margin:3px" onclick="solicitarTraspaso()">
                                <i class="mdi mdi-check" style="font-size:3.4em"></i>
                                <br/>
                                Enviar
                            </button>  
                        </div>
                    </div>                   
                </div>
            </div>
        </div>
    </div>
</div>
@stop

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