@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>
                                <input class="form-check-input me-2" type="checkbox" id="allDiasSemana" onclick="allCheckbox('allDiasSemana')">
                                Todos
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasSemana" id="dia4" value="4">
                                    Jueves
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasSemana" id="dia1" value="1">
                                    Lunes
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasSemana" id="dia5" value="5">
                                    Viernes
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasSemana" id="dia2" value="2">
                                    Martes
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasSemana" id="dia6" value="6">
                                    Sabado
                                </div>
                            </td>                   
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasSemana" id="dia3" value="3">
                                    Miercoles
                                </div>
                            </td>    
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasSemana" id="dia7" value="7">
                                    Domingo
                                </div>
                            </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>
                            <th></th>
                            <th>
                                <input class="form-check-input me-2" type="checkbox" id="allMeses" onclick="allCheckbox('allMeses')">
                                Todos
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes1" value="1">
                                    Enero
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes5" value="5">
                                    Mayo
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes9" value="9">
                                    Septiembre
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes2" value="2">
                                    Febrero
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes6" value="6">
                                Junio
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes10" value="10">
                                Octubre
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes3" value="3">
                                Marzo
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes7" value="7">
                                Julio
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes11" value="11">
                                Noviembre
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes4" value="4">
                                Abril
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes8" value="8">
                                Agosto
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allMeses" id="mes12" value="12">
                                Diciembre
                                </div>
                            </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="allDiasMes" onclick="allCheckbox('allDiasMes')">
                                All
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames1" value="1">1
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames2" value="2">2
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames3" value="3">3
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames4" value="4">4
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames5" value="5">5
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames6" value="6">6
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames7" value="7">7
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames8" value="8">8
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" " id="diames9" value="9">9
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames10" value="10">10
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes"  id="diames11" value="11">11
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames12" value="12">12
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames13" value="13">13
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames14" value="14">14
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames15" value="15">15
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames16" value="16">16
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames17" value="17">17
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames18" value="18">18
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames19" value="19">19
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames20" value="20">20
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames21" value="21">21
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes"  id="diames22" value="22">22
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames23" value="23">23
                                </div>
                            </td>
                        </tr>
                        <tr>
                        <td id="bordesTable">
                            <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes"  id="diames24" value="24">24
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames25" value="25">25
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames26" value="26">26
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames27" value="27">27
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames28" value="28">28
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames29" value="29">29
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames30" value="30">30
                                </div>
                            </td>
                            <td id="bordesTable">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input form-check-input me-2 allDiasMes" id="diames31" value="31">31
                                </div>
                            </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>
        </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-4 col-xl-4">
        <div class="card">
            <div class="card-body">              
                <div class="row">
                    <div class="col-12">
                        <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">Almacén:</span>
                                <select class="form-select" id="almacen" onchange="getAllVendedores()">

                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <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">
                                            <button class="btn btn-sm btn-danger" type="button" onclick="limpiarInputArticulo()">
                                                    <i class="mdi mdi-close-circle" style="font-size:1em"></i>
                                                </button>
                                            <!-- <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="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">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-8 col-xl-8">
        <div class="card" style="height: 635px; overflow:auto">
            <!-- <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="card-body">  
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="contado-tab" data-bs-toggle="tab" data-bs-target="#contado" type="button" role="tab" aria-controls="contado" aria-selected="false">
                            Contado
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="credito-tab" data-bs-toggle="tab" data-bs-target="#credito" type="button" role="tab" aria-controls="credito" aria-selected="false">
                            Credito
                        </button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent" style="padding:1em; border: #DDD 1px solid !important">
                <!--////////////////////////////////////////////////////////////////////////////////////////PESTAÑA CONTADO///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade show active" id="contado" role="tabpanel" aria-labelledby="contado-tab">
                        <div class="row">                            
                            <div class="col-12"> 
                                <div class="list-group">
                                    <div class="table-wrapper">
                                        <table> 
                                            <thead>
                                                <tr>
                                                    <th>PVP</th>
                                                    <th>Precio</th>
                                                    <th>Precio Fijo</th>
                                                    <th>Interes Fijo</th>
                                                    <th>Desc. Porcentaje</th>
                                                    <th>Decs. Monto</th>
                                                    <th>Desc. Volumen</th>
                                                    <th>Cant.</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="limpiarAllInputs()" 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>
                    <!--//////////////////////////////////////////////////////////////////////////////////////// PESTAÑA CREDITO ///////////////////////////////////////////////////////////////////////////////-->
                    <div class="tab-pane fade" id="credito" role="tabpanel" aria-labelledby="credito-tab">
                        <div class="row">                            
                            <div class="col-12"> 
                                <div class="list-group">
                                    <div class="table-wrapper">
                                        <table> 
                                            <thead>
                                                <tr>
                                                    <th>Plazo</th>
                                                    <th>Interes Fijo</th>
                                                    <th>Interes Nuevo</th>
                                                    <th>Precio Fijo S/IVA</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tablePlazos">
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <hr/>
                            </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">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="fechainicialcredito" 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="fechafinalcredito" 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="limpiarAllInputsCredito()" style="margin:8px;">
                                        Cancelar                                                                          
                                        </button>  
                                    </div>
                                    <div class="col-12 col-sm-8 col-md-8 col-lg-6 col-xl-6">
                                        <button id="buttonSaveCredito" type="button" class="btn btn-success btn-icon-text" onclick="SaveInteresesCredito()" style="margin:8px;">
                                        <span id="buttonAgregarInteres">Guardar</span>                                          
                                        </button>    
                                    </div>
                                </div> 
                            </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">
                    <div class="col-2">
                        <span class="x-label">Tipo:</span>
                        <select class="x-form-control" id="tipoPrecio" onchange="getListaPrecios()">
                            <option value="contado">CONTADO</option>
                            <option value="credito">CREDITO</option>
                        </select>
                    </div>
                    <div class="col-2">
                        <span class="x-label">Estatus:</span>
                        <select class="x-form-control" id="estatusPrecio" onchange="getListaPrecios()">
                            <option value="activas">ACTIVAS</option>
                            <option value="vencidas">VENCIDAS</option>
                        </select>
                    </div>
                </div>
                <br>
                <div class="row" id="precioscontado" style="height:500px; 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; width:20%;">Descripcion</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Empresa</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Sucursal</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Vendedor</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Cliente</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Clasificacion</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Marca</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Proveedor</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Precio Fijo</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Interes Fijo</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Meses</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Dias Mes</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Dias Semana</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Horas</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Vigencia</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="listaPreciosArticulos">
                                
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" id="precioscredito" style="height:500px; overflow:auto; display:none">
                    <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; width:20%;">Descripcion</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Empresa</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Sucursal</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Vendedor</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Cliente</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Clasificacion</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Marca</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Proveedor</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Plazo</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Interes Fijo</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Interes Nuevo</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Precio Fijo</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Vigencia</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Realizo</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Registro</th>
                                    <th style="padding:10px; text-align:center; color:#FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="listaPreciosCredito">
                                
                            </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