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

<!-- Modal Clasificaciones -->
<div class="modal fade" id="modalClasificaciones" tabindex="-2" role="dialog" aria-labelledby="modalClasificacionesLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalClasificacionesLabel">Clasificaciones de artículos</h5>
            </div>
            <div class="modal-body">
                <div class="col-12">
                    <div class="form-group">
                        <span class="x-label">Clasificación:</span>
                        <select class="x-form-control" id="clasificacion1" onchange="getNivelesClasificacion()">

                        </select>
                    </div>
                </div>
                <div id="selectsDinamicos">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="modalClasificacionesClose" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-success" onclick="seleccionaClasificacion()">Seleccionar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Articulo Nuevo -->
<div class="modal fade" id="nuevoArticulo" tabindex="-1" role="dialog" aria-labelledby="nuevoArticuloLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="nuevoArticuloLabel">Crear nuevo artículo</h5>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        Codigo interno:*<br/>
                        <input type="text" class="x-form-control" id="idArticulo" style="display:none"/>
                        <input type="text" class="x-form-control text-uppercase" id="codigointerno" autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        Codigo de barras:*<br/>
                        <input type="number" class="x-form-control text-uppercase" id="codigobarras" autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        Codigo del proveedor:*<br/>
                        <input type="text" class="x-form-control text-uppercase" id="codigoproveedor" autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="form-group">
                        Descripcion:*<br/>
                        <input type="text" class="x-form-control" id="descripcion" placeholder="" autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group">
                        Descripcion corta:*<br/>
                        <input type="text" class="x-form-control" id="descripcioncorta" placeholder="" autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        Costo Prom.:*<br/>
                        <input type="number" class="x-form-control" id="costoProm" placeholder="" autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        Impuesto:*<br/>
                        <select class="x-form-control" id="impuesto">

                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        Clave SAT:*<br/>
                        <input type="number" class="x-form-control" id="claveSat" placeholder="" autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        Marca:*<br/>
                        <select class="x-form-control" id="marca">

                        </select>
                    </div>
                </div>
                <div class="col-md-3">     
                    <span class="x-label">Clasificación:</span>
                    <div class="input-group">
                        <input type="hidden" id="idclasificacion"/>
                        <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="clasificacion" placeholder="" readonly autocomplete="off" />
                        <div class="input-group-append">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="abreModalClasificaciones()">
                                <i class="mdi mdi-magnify" style="font-size:1em"></i>
                            </button>
                        </div>
                    </div>   
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        Empresa:*<br/>
                        <select class="x-form-control" id="categoria">

                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        Unidad de medida:*<br/>
                        <select class="x-form-control" id="unidadmedida">

                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        Cálculo de Costo:*<br/>
                        <select class="x-form-control" id="tipocosto">

                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="nuevoArticuloClose" data-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" onclick="agregarArticulo()">Crear Articulo</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Busca Articulo -->
<div class="modal fade" id="selArticulo" tabindex="-1" role="dialog" aria-labelledby="selArticuloLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selArticuloLabel">Seleccione un Artículo</h5>
            <div class="close" style="width:50%">
                <input type="text" class="form-control" id="searchArticulo" placeholder="Escribe la descripción" autocomplete="off" />
            </div>
        </div>
        <div class="modal-body">
            <div class="table-responsive" style="height:400px; overflow:auto">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Codigo Interno</th>
                            <th>Codigo Proveedor</th>
                            <th>Descripcion</th>
                            <th>Clasificación</th>
                        </tr>
                    </thead>
                    <tbody id="bodyArticulos"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selArticuloClose" data-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Almacenes -->
<div class="modal fade" id="selAlmacen" tabindex="-1" role="dialog" aria-labelledby="selAlmacenLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selAlmacenLabel">Seleccione un Almacén</h5>
            <div class="close" style="width:50%">
                <input type="text" class="form-control" id="searchAlmacen" placeholder="Escribe el almacén" autocomplete="off" />
            </div>
        </div>
        <div class="modal-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Almacén</th>
                            <th>Zona</th>
                        </tr>
                    </thead>
                    <tbody id="bodyAlmacenes"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selAlmacenClose" data-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Modal Proveedores -->
<div class="modal fade" id="selProveedor" tabindex="-1" role="dialog" aria-labelledby="selProveedorLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="selProveedorLabel">Seleccione un Proveedor</h5>
            <div class="close" style="width:50%">
                <input type="text" class="form-control" id="searchProveedor" placeholder="Escribe el nombre o clave del proveedor" autocomplete="off" />
            </div>
        </div>
        <div class="modal-body">
            <div class="table-responsive" style="height:400px;overflow:auto">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Clave</th>
                            <th>Nombre</th>
                            <th>RFC</th>
                            <th>Vendedor</th>
                        </tr>
                    </thead>
                    <tbody id="bodyProveedores"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selProveedorClose" data-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->
<div class="row">
    <div class="col-12 col-md-8">
        <div class="card">
            <div class="card-body">                    
                <div class="row">
                    <div class="col-md-2">     
                        <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" style="height:30px">
                                <button class="btn btn-sm btn-primary" style="height:30px" onclick="abreModalDoctos()">
                                    <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                </button>
                            </div>
                            <input type="hidden" id="idcompra">
                        </div>   
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <span class="x-label">Proveedor:</span>
                            <input type="text" class="form-control x-form-control-sm" id="proveedor" placeholder="Seleccione..." readonly autocomplete="off" />
                            <input type="text" style="display:none" id="idproveedor">
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <span class="x-label">Almacen:</span>
                            <input type="text" class="form-control x-form-control-sm" id="almacen" placeholder="Seleccione..." readonly autocomplete="off" />
                            <input type="text" style="display:none" id="idalmacen">
                        </div>
                    </div>
                    <!-- <div class="col-md-2">    
                        <span class="x-label">Factura:</span>
                        <div class="input-group">
                            <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="factura" autocomplete="off" />
                            <input type="text" style="display:none" id="uuidFactura">
                            <div class="input-group-append" style="height:30px">
                                <button class="btn btn-sm btn-primary" style="height:30px" type="button" onclick="abreModalFacturas()">
                                    <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                </button>
                            </div>
                        </div>   
                    </div> -->
                    <div class="col-md-3 col-lg-2">
                        <div class="form-group">
                            <span class="x-label">Fecha:</span>
                            <input type="text" class="form-control x-form-control-sm" id="fecha" value="10/12/2025" readonly autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">
                        <div class="form-group">
                            <span class="x-label">Tipo:</span>
                            <select class="form-select" id="tipo" onchange="changeTipoCredito()">
                                <option value="1">Contado</option>
                                <option value="2">Credito</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">                        
                        <div class="form-group">
                            <span class="x-label">Plazo:</span>
                            <input type="number" class="form-control x-form-control-sm" id="plazo" disabled autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">                        
                        <div class="form-group">
                            <span class="x-label">Fecha límite:</span>
                            <input type="text" class="form-control x-form-control-sm" id="feclimite"  value="10/12/2025" disabled autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">
                        <div class="form-group">
                            <span class="x-label">Folio Fiscal:</span>
                            <input type="text" class="form-control x-form-control-sm text-uppercase" id="foliofiscal" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">
                        <div class="form-group">
                            <span class="x-label">Folio Proveedor:</span>
                            <input type="text" class="form-control x-form-control-sm" id="folioprov" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-2">
                        <div class="form-group">
                            <span class="x-label">Fecha Proveedor:</span>
                            <input type="text" class="form-control x-form-control-sm" id="fechaprov" value="10/12/2025" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-lg-2">
                        <span class="x-label">Codigo:</span>
                        <div class="input-group">
                            <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="prodcodigo" autocomplete="off" />
                            <input type="hidden" id="prodid" />
                            <div class="input-group-append" style="height:30px">
                                <button class="btn btn-sm btn-primary" style="height:30px" onclick="abreModalArticulos()">
                                    <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                </button>
                            </div>
                        </div> 
                    </div>
                    <div class="col-md-3 col-lg-5">                        
                        <div class="form-group">
                            <span class="x-label">Descripcion:</span>
                            <input type="text" class="form-control x-form-control-sm" id="proddescripcion" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-1">
                        <div class="form-group">
                            <span class="x-label">Cto.:</span>
                            <input type="text" class="form-control x-form-control-sm" id="prodcosto" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-1">
                        <div class="form-group">
                            <span class="x-label">Desc.:</span>
                            <input type="text" class="form-control x-form-control-sm" id="proddescuento" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-1">
                        <div class="form-group">
                            <span class="x-label">IVA:</span>
                            <input type="text" class="form-control x-form-control-sm" id="prodiva" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-1">
                        <div class="form-group">
                            <span class="x-label">Cant:</span>
                            <input type="text" class="form-control x-form-control-sm" id="prodcantidad" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-lg-1">
                        <button class="btn btn-secondary" onclick="agregar()"><i class="mdi mdi-plus"></i></button>
                    </div>
                </div>
                <div class="row" style="height:300px; overflow:auto">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead style="background-color:#777">
                                <tr>
                                    <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">Cto</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Cant</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Desc</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Iva</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Importe</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="detalle"></tbody>
                        </table>
                    </div>
                </div>
                
                <div class="row" style="padding-top:20px">
                    <div class="col-md-4">
                        <div style="float:left; margin-right:5px">
                            <button type="button" class="btn btn-success" style="margin:3px" onclick="guardar()">
                                <i class="mdi mdi-check" style="font-size:3.4em"></i>
                                <br/>
                                Registrar
                            </button>   
                        </div>
                        <div style="display:block">           
                            <button type="button" class="btn btn-danger" style="margin:3px; width:150px" id="btnCancelar" onclick="cancelar()">
                                Cancelar
                                <i class="ti-receipt btn-icon-append"></i>                                                                              
                            </button>     
                            <button type="button" class="btn btn-warning btn-icon-text" style="margin:3px; width:150px" onclick="imprimir()">
                                Imprimir
                                <i class="ti-printer btn-icon-append"></i>                                                                              
                            </button>      
                            <!-- <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Editar
                            <i class="ti-pencil-alt btn-icon-append"></i>                                                                              
                            </button>           
                            <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Desc.
                            <i class="ti-tag btn-icon-append"></i>                                                                              
                            </button>           
                            <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Unir
                            <i class="ti-link btn-icon-append"></i>                                                                              
                            </button>             
                            <button type="button" class="btn btn-secondary btn-icon-text" style="margin:3px; width:130px">
                            Dividir
                            <i class="ti-unlink btn-icon-append"></i>                                                                              
                            </button>              -->
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <span class="x-label">Observaciones:</span>
                            <textarea class="form-control x-form-control-sm" rows="4" id="observaciones"></textarea>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="row">
                            <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>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card">
            <div class="card-body">  
                <div class="row">             
                    <div class="col-12">
                        <div class="form-group">
                            <span class="x-label">Proveedor:</span>
                            <select class="form-select" id="busproveedor"></select>
                        </div>
                    </div>
                    <div class="col-md-5">  
                        <span class="x-label">Desde:</span>  
                        <div class="input-group">
                            <div class="input-group-append" style="height:30px">
                                <div style="height:30px; background-color:#ba9072; padding:7px">
                                    <i class="mdi mdi-calendar" style="font-size:1em; color:#fff"></i>
                                </div>
                            </div>
                            <input type="text" class="form-control x-form-control-sm" id="busfecini" value="10/12/2025">
                        </div> 
                    </div>
                    <div class="col-md-5"> 
                        <span class="x-label">Hasta:</span>
                        <div class="input-group">
                            <div class="input-group-append" style="height:30px">
                                <div style="height:30px; background-color:#ba9072; padding:7px">
                                    <i class="mdi mdi-calendar" style="font-size:1em; color:#fff"></i>
                                </div>
                            </div>
                            <input type="text" class="form-control x-form-control-sm" id="busfecfin" value="10/12/2025">
                        </div> 
                    </div>
                    <div class="col-md-2"> 
                        <button class="btn btn-sm btn-primary" type="button">
                            <i class="mdi mdi-magnify" style="font-size:1.8em"></i>
                        </button>   
                    </div>                    
                    <div class="col-12"> 
                        <hr/>
                    </div>
                    <div id="searchresult" style="height: 520px; overflow:auto">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Crear Consulta-->
    <div class="modal fade" id="modal-crearconsulta" 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">Proveedores</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-7 col-sm-12 col-md-7 col-lg-7 col-xl-7">
                        <label for="inputNombre">Proveedor</label> 
                        <input type="text" id="inputNombre" class="form-control text-uppercase">
                    </div> 
                    <div class="col-3 col-sm-12 col-md-3 col-lg-3 col-xl-3 text-center">
                        <label for="inputFechaFolios">Fecha</label> 
                        <input type="date" id="inputFechaFolios" class="form-control">
                    </div>
                </div>
                <br> 
                <table data-dismiss="modal" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>#</th> 
                            <th>Proveedor</th>
                        </tr>
                    </thead> 
                    <tbody>
                        <tr>
                            <td scope="row">1</td> 
                            <td>TONY S.A. DE C.V.</td>
                        </tr>
                        <tr>
                            <td scope="row">2</td> 
                            <td>BOXITO S.A. DE C.V.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
      </div>
    <!-- Fin Modal -->
</div>
@stop

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