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

<!-- Modal Clientes -->
<div class="modal fade" id="selCliente" 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" id="selClienteLabel">Seleccione un Cliente</h5>
            <div style="width:50%">
                <div class="input-group">
                    <input type="text" class="form-control" id="searchCliente" placeholder="Escribe el nombre o clave del cliente" 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="table-responsive" style="height:400px;overflow:auto">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Clave</th>
                            <th>Nombre</th>
                            <th>RFC</th>
                            <th>Telefono</th>
                        </tr>
                    </thead>
                    <tbody id="bodyClientes"></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 -->

<!-- Modal Proveedores -->
<div class="modal fade" id="modalProveedor" 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" id="modalProveedorLabel">Seleccione un Proveedor</h5>
            <div style="width:50%">
                <div class="input-group">
                    <input type="text" class="form-control" id="searchProveedor" placeholder="Escribe el nombre o clave del proveedor" autocomplete="off" />
                </div>
            </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>Telefono</th>
                        </tr>
                    </thead>
                    <tbody id="bodyProveedores"></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 -->

<!-- Modal Marcas -->
<div class="modal fade" id="modalMarcas" 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" id="modalMarcasLabel">Seleccione la marca de un artículo</h5>
            <div style="width:50%">
                <div class="input-group">
                    <input type="text" class="form-control" id="searchMarca" placeholder="Escribe el nombre de la marca del artículo" autocomplete="off" />
                </div>
            </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>Telefono</th>
                        </tr>
                    </thead>
                    <tbody id="bodyMarcas"></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 -->

<!-- Modal Busca Articulo -->
<div class="modal fade" id="selArticulo" data-bs-keyboard="false" data-bs-backdrop="static"  tabindex="-1" role="dialog" aria-labelledby="selArticuloLabel" 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" id="selArticuloLabel">Seleccione un Artículo</h5>
            <div 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</th>
                            <th>Descripcion</th>
                            <th>Marca</th>
                            <th>unidad</th>
                        </tr>
                    </thead>
                    <tbody id="bodyArticulos"></tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="selArticuloClose" data-bs-dismiss="modal">Cerrar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Clasificaciones -->
<div class="modal fade" id="modalClasificaciones" tabindex="-1" 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-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-success" onclick="seleccionaClasificacion()">Seleccionar</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Seleccionar Dias -->
<div class="modal fade" id="modalDias" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalDiasLabel">Selecciona los dias de precio del artículo</h5>
        </div>
        <div class="modal-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Dia</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="dia1" value="1">
                                Lunes
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="dia5" value="5">
                                Viernes
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="dia2" value="2">
                                Martes
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="dia6" value="6">
                                Sabado
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="dia3" value="3">
                                Miercoles
                            </td>                         
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="dia7" value="7">
                                Domingo
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="dia4" value="4">
                                Jueves
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="modalDiasClose" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" id="modalDiasAceptar" onclick="agregarDias()">Aceptar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Seleccionar Meses -->
<div class="modal fade" id="modalMeses" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalMesesLabel">Selecciona los meses de precio del artículo</h5>
        </div>
        <div class="modal-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Mes</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes1" value="1">
                                Enero
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes5" value="5">
                                Mayo
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes9" value="9">
                                Septiembre
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes2" value="2">
                                Febrero
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes6" value="6">
                                Junio
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes10" value="10">
                                Octubre
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes3" value="3">
                                Marzo
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes7" value="7">
                                Julio
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes11" value="11">
                                Noviembre
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes4" value="4">
                                Abril
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes8" value="8">
                                Agosto
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="mes12" value="12">
                                Diciembre
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="modalMesesClose" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" id="modalMesesAceptar" onclick="agregarMeses()">Aceptar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Seleccionar Dias del mes -->
<div class="modal fade" id="modalDiasMes" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 90%;">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalDiasMesLabel">Selecciona los dias de precio del artículo</h5>
        </div>
        <div class="modal-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames1" value="1">1
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames2" value="2">2
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames3" value="3">3
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames4" value="4">4
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames5" value="5">5
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames6" value="6">6
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames7" value="7">7
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames8" value="8">8
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames9" value="9">9
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames10" value="10">10
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames11" value="11">11
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames12" value="12">12
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames13" value="13">13
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames14" value="14">14
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames15" value="15">15
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames16" value="16">16
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames17" value="17">17
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames18" value="18">18
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames19" value="19">19
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames20" value="20">20
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames21" value="21">21
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames22" value="22">22
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames23" value="23">23
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames24" value="24">24
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames25" value="25">25
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames26" value="26">26
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames27" value="27">27
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames28" value="28">28
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames29" value="29">29
                            </td>
                            <td id="bordesTable">
                                <input class="form-check-input me-2" type="checkbox" id="diames30" value="30">30
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="modalDiasMesClose" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" id="modalDiasMesAceptar" onclick="agregarDiasMes()">Aceptar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- Modal Seleccionar Horas -->
<div class="modal fade" id="modalHoras" data-bs-keyboard="false" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalHorasLabel">Selecciona las horas de precio del artículo</h5>
        </div>
        <div class="modal-body">
            <div id="divHoras">
                <!-- <div class="row">
                    <div class="col-5">
                        <div class="form-group">
                            Hora Inicio:<br/>
                            <input type="time" class="x-form-control" id="horainicio" onchange="changeHora()" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="form-group">
                            Hora Fin:<br/>
                            <input type="time" class="x-form-control" id="horafin" onchange="changeHora()" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="form-group">
                            <button class="btn btn-primary" onclick="newItemHora()"><i class="mdi mdi-plus"></i></button>
                        </div>
                    </div> 
                </div> -->
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="modalHorasClose" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" id="modalHorasAceptar" onclick="agregarHoras()">Aceptar</button>
        </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<div class="row">
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="card">
            <div class="card-body"> 
                <div class="row">
                    <div class="col-10">
                        <div class="form-group">
                            <span class="x-label">Código:</span>
                            <div class="input-group">
                                <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" readonly id="articulocodigo" autocomplete="off" />
                                <input type="hidden" value="0" id="idarticuloHidden" />
                                <input type="hidden" id="codigoarticuloHidden" />
                                <input type="hidden" id="descripcionarticuloHidden" />
                                <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>
                    <div class="col-2">
                        <button id="buttonLimpiar" type="button" class="btn btn-secondary btn-icon-text" onclick="limpiarAllInputs()" style="margin:8px;">
                            <span id="buttonAgregar">Limpiar</span>                                          
                        </button>
                    </div>
                </div>                   
                <div class="row">
                    <div class="col-6">
                        <div class="row">
                            <div class="form-group">
                                <span class="x-label">Empresa:</span>
                                <select class="x-form-control" id="categoria" onchange="getDatosPrecios()">

                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <span class="x-label">Proveedor:</span>
                                <div class="input-group">
                                    <input type="text" class="form-control x-form-control-sm" id="proveedor" placeholder="Seleccione..." readonly autocomplete="off" />
                                    <input type="text" style="display:none" value="0" id="proveedorHidden">
                                    <div class="input-group-append">
                                        <button class="btn btn-sm btn-danger" type="button" onclick="limpiarInputProveedor()">
                                            <i class="mdi mdi-close-circle" style="font-size:1em"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <span class="x-label">Marca:</span>
                                <div class="input-group">
                                    <input type="text" class="form-control x-form-control-sm" placeholder="Seleccione..." style="padding:5px !important" id="marca" readonly autocomplete="off" />
                                    <input type="text" style="display:none" value="0" id="marcaHidden">
                                    <div class="input-group-append">
                                        <button class="btn btn-sm btn-danger" type="button" onclick="limpiarInputMarca()">
                                            <i class="mdi mdi-close-circle" style="font-size:1em"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <span class="x-label">Clasificación:</span>
                                <div class="input-group">
                                    <input type="text" class="form-control x-form-control-sm" value="0" id="idclasificacion" style="display:none"/>
                                    <input type="text" class="form-control x-form-control-sm" placeholder="Seleccione..." style="padding:5px !important" id="clasificacion" readonly autocomplete="off" />
                                    <div class="input-group-append">
                                        <button class="btn btn-sm btn-danger" type="button" onclick="limpiarInputClasificaciones()">
                                            <i class="mdi mdi-close-circle" style="font-size:1em"></i>
                                        </button>
                                    </div>
                                </div>   
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <span class="x-label">Almacén:</span>
                                <select class="form-select" id="almacen" onchange="changeAlmacenVendedorCliente()">

                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <span class="x-label">Vendedor:</span>
                                <select class="form-select" id="vendedor" onchange="changeAlmacenVendedorCliente()">

                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <span class="x-label">Cliente:</span>
                                <div class="input-group">
                                    <input type="text" class="form-control x-form-control-sm" id="cliente" placeholder="Seleccione..." readonly autocomplete="off" />
                                    <input type="text" style="display:none" value="0" id="clienteHidden">
                                    <div class="input-group-append">
                                        <button class="btn btn-sm btn-danger" type="button" onclick="limpiarInputCliente()">
                                            <i class="mdi mdi-close-circle" style="font-size:1em"></i>
                                        </button>
                                    </div>
                                </div>   
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <br>
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title mb-3">Orden de prioridad</h6>
                                <ul class="list-group" id="simple-list">
                                    <li class="list-group-item">item 1</li>
                                    <li class="list-group-item">item 2</li>
                                    <li class="list-group-item">item 3</li>
                                    <li class="list-group-item">item 4</li>
                                    <li class="list-group-item">item 5</li>
                                    <li class="list-group-item">item 6</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="card" style="height: 635px; overflow:auto">
            <div class="card-body">  
                <div class="card-header d-flex justify-content-between" style="font-size:1.2em; font-weight:bold; flex-direction: row"> 
                    <div class="p-1">
                        <i class="icon-edit"></i> <span>Precios</span>
                    </div>
                </div>
                <br>
                <div class="row">                            
                    <div class="col-12"> 
                        <div class="list-group">
                            <div class="table-wrapper">
                                <table> 
                                    <thead>
                                        <tr>
                                            <th>PVP</th>
                                            <th>Precio Fijo</th>
                                            <th>Desc. Porcentaje</th>
                                            <th>Decs. Monto</th>
                                            <th>Desc. Volumen</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableListaPrecios">
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <hr/>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                        <div class="form-group">
                            <span class="x-label">Mes</span>
                            <input type="text" class="form-control x-form-control-sm" id="selMeses" placeholder="Seleccione..." readonly autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                        <div class="form-group">
                            <span class="x-label">Dias del mes</span>
                            <input type="text" class="form-control x-form-control-sm" id="selDiasMes" placeholder="Seleccione..." readonly autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                        <div class="form-group">
                            <span class="x-label">Dias de la semana</span>
                            <input type="text" class="form-control x-form-control-sm" id="selDias" placeholder="Seleccione..." readonly autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                        <div class="form-group">
                            <span class="x-label">Horas</span>
                            <input type="text" class="form-control x-form-control-sm" id="selHoras" placeholder="Seleccione..." readonly autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                        <div class="row">
                            <h4 id="selClienteLabel">Vigencia</h4>
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                                <div class="form-group">
                                    <span class="x-label">Fecha inicial</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechainicial" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                                <div class="form-group">
                                    <span class="x-label">Fecha final</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechafinal" readonly autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                        <div class="row justify-content-end mx-2">
                            <div class="col-12 col-sm-8 col-md-8 col-lg-6 col-xl-6">
                                <button type="button" class="btn btn-danger btn-icon-text" onclick="limpiarInputs()" style="margin:8px;">
                                Cancelar                                                                          
                                </button>  
                            </div>
                            <div class="col-12 col-sm-8 col-md-8 col-lg-6 col-xl-6">
                                <button id="buttonSave" type="button" class="btn btn-success btn-icon-text" onclick="guardarPrecioArticulo()" style="margin:8px;">
                                <span id="buttonAgregar">Guardar</span>                                          
                                </button>    
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <div class="card">
            <div class="card-body"> 
                <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="listaPreciosArticulos">
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

@stop
@section('jspage')
    <script src="jsprod/precios.js"></script>
    <script src="js/sortablejs-light.js"></script>
    <script src="vendors/sortablejs/Sortable.min.js"></script>
@stop