<script src="../public/js/horario.js?rev=<?php echo time(); ?>"></script>

<div class="content__boxed">
    <div class="content__wrap">
        <nav aria-label="breadcrumb" class="pb-2">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">Sistema de Tramite Documentario</li>
                <li class="breadcrumb-item">Horario</li>
            </ol>
        </nav>
        <!-- Table with toolbar -->
        <div class="card">
            <div class="card-header ">
                <h5 class="card-title mb-3">PANEL ADMINISTRATIVO DE HORARIO</h5>
                <div class="row ">

                    <!-- Left toolbar -->
                    <div class="col-md-6 d-flex gap-1 align-items-center">
                        <button type="button" onclick="AbrirRegistro()"
                            class="btn btn-primary hstack gap-2 align-self-center">
                            <i class="demo-psi-add fs-5"></i>
                            <span class="vr"></span>
                            Nuevo Registro
                        </button>

                    </div>
                    <!-- END : Left toolbar -->

                    <!-- Right Toolbar -->

                </div>
            </div>

            <div class="card-body ">
                <div class="table-responsive">
                    <table id="tabla_horario" class="display " style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Hora Inicio</th>
                                <th>Hora Fin</th>
                                <th>Dias</th>
                                <th>Estatus</th>
                                <th>Accion</th>
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>
        <!-- END : Table with toolbar -->

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_registro" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">REGISTRO DE NUEVO HORARIO DE ATENCION</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <label for="">Hora Inicio</label>
                        <input type="time" class="form-control" id="txt_horainicio">

                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="">Hora Fin</label>
                        <input type="time" class="form-control" id="txt_horafin">

                    </div>
                    <div class="col-lg-12">
                        <label for="">Dias Laborables</label><br>

                        <div class="row px-3">
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Lunes">Lunes</label>
                                <input type="checkbox" class="form-check-input" id="Lunes" name="day" value="Lunes">
                            </div>
                           <div class="form-check form-check-inline col-lg-10">
                             <label for="Martes">Martes</label>
                             <input type="checkbox" class="form-check-input" id="Martes" name="day" value="Martes">
                           </div>
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Miercoles">Miercoles</label>
                                <input type="checkbox" class="form-check-input" id="Miercoles" name="day" value="Miercoles">
                            </div>
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Jueves">Jueves</label>
                                <input type="checkbox" class="form-check-input" id="Jueves" name="day" value="Jueves">
                            </div>
                           <div class="form-check form-check-inline col-lg-10">
                             <label for="Viernes">Viernes</label>
                             <input type="checkbox" class="form-check-input" id="Viernes" name="day" value="Viernes">
                           </div>
                           <div class="form-check form-check-inline col-lg-10">
                             <label for="Sabado">Sabado</label>
                             <input type="checkbox" class="form-check-input" id="Sabado" name="day" value="Sabado">
                           </div>
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Domingo">Domingo</label>
                                <input type="checkbox" class="form-check-input" id="Domingo" name="day" value="Domingo">
                            </div>
                        </div>
                    </div>

                    

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-secondary" onclick="Registrar_Horario()">Registrar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_editar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">REGISTRO DE NUEVO HORARIO DE ATENCION</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <label for="">Hora Inicio</label>
                        <input type="time" class="form-control" id="txt_horainicio_e">

                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="">Hora Fin</label>
                        <input type="time" class="form-control" id="txt_horafin_e">

                    </div>
                    <div class="col-lg-6">
                        <label for="">Dias Laborables</label><br>

                        <div class="row px-3">
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Lunes_e">Lunes</label>
                                <input type="checkbox" class="form-check-input" id="Lunes_e" name="day" value="Lunes">
                                <input type="text" id="txt_idhorario_e" hidden>
                            </div>
                           <div class="form-check form-check-inline col-lg-10">
                             <label for="Martes_e">Martes</label>
                             <input type="checkbox" class="form-check-input" id="Martes_e" name="day" value="Martes">
                           </div>
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Miercoles_e">Miercoles</label>
                                <input type="checkbox" class="form-check-input" id="Miercoles_e" name="day" value="Miercoles">
                            </div>
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Jueves_e">Jueves</label>
                                <input type="checkbox" class="form-check-input" id="Jueves_e" name="day" value="Jueves">
                            </div>
                           <div class="form-check form-check-inline col-lg-10">
                             <label for="Viernes_e">Viernes</label>
                             <input type="checkbox" class="form-check-input" id="Viernes_e" name="day" value="Viernes">
                           </div>
                           <div class="form-check form-check-inline col-lg-10">
                             <label for="Sabado_e">Sabado</label>
                             <input type="checkbox" class="form-check-input" id="Sabado_e" name="day" value="Sabado">
                           </div>
                            <div class="form-check form-check-inline col-lg-10">
                                <label for="Domingo_e">Domingo</label>
                                <input type="checkbox" class="form-check-input" id="Domingo_e" name="day" value="Domingo">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <label for="">Estado</label>
                        <input type="text" id="txt_estado_h"class="form-control" readonly>
                    </div>

                    

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-secondary" onclick="Modificar_Horario()">Modificar</button>
            </div>
        </div>
    </div>
</div>



<script>
$(document).ready(function() {
    Listar_horarios()

});
</script>