<?php

require_once 'class/c_login.php';
if (!isset($_SESSION['user'])){
    die(header('Location: index.php'));
}

//$user = unserialize($_SESSION['user']);
$user = Login::get_user();

$user->access();
/*print_r($user);
print_r($user->user["id"]);
echo "****|";
print_r($user->acceso);//null sin permisos, w o r
echo "|****|";
print_r($user->profesor);
echo "|****|";
print_r($user->facultad["facultad_id"]);
exit();*/
//profesor, admin, rol, facultad
if ($user->acceso === null && !$user->admin){
    die(header('Location: index.php'));
    exit();
}

//if (!$user->admin && in_array($user->acceso, ['n']))
    //die(header('Location: main.php?error=1'));
//$user->print_to_log('Reposiciones');

//$write = $user->admin || in_array($user->acceso, ['w']);
$write = true; //

$en_fecha = $db->querySingle("SELECT ESTA_EN_PERIODO(NOW()::DATE, :periodo_id)", [':periodo_id' => $user->periodo_id])['esta_en_periodo'];


if($user->jefe_carrera){
    //$prof_rs = $db->query('SELECT DISTINCT * FROM fs_profesores(null, null, :fac) ORDER BY PROFESOR_NOMBRE', [':fac' => $user->facultad["facultad_id"]]);
    $prof_rs = $db->query('SELECT DISTINCT PROFESOR.* FROM PUESTO_USUARIO
        JOIN PUESTO_MATERIA USING (PUESTO_ID)
        JOIN HORARIO_VIEW USING (MATERIA_ID)
        JOIN HORARIO_PROFESOR USING (HORARIO_ID)
        JOIN PROFESOR USING (PROFESOR_ID)
        WHERE USUARIO_ID = :usr', [':usr' => $user->user["id"]]);
}else{
    $prof_rs = $db->query('SELECT DISTINCT PROFESOR.* FROM PROFESOR
        JOIN horario_profesor USING (profesor_id)
        JOIN HORARIO_VIEW USING (horario_id)
        WHERE FACULTAD_ID = :fac ORDER BY profesor.profesor_nombre', [':fac' => $user->facultad["facultad_id"]]);
}

//Duraciones
$duracion_rs = $db->query("select * from duracion order by duracion_interval");

if(!is_null($user->periodo_id)){
    //Periodo
    $periodo_rs = $db->querySingle('SELECT periodo_fecha_inicio, periodo_fecha_fin FROM periodo WHERE periodo_id = :periodo_id', [':periodo_id' => $user->periodo_id]);
    $periodo_fin = $periodo_rs["periodo_fecha_fin"];
    if(strtotime($periodo_rs["periodo_fecha_inicio"])>strtotime(date("Y-m-d")) )
        $fecha_man = date("d/m/Y", strtotime($periodo_rs["periodo_fecha_inicio"]));
    else{
        $dias = 3;
        if( intval(date("w")) >=3 && intval(date("w"))<=5 )//Mie a Vie
            $dias+=3;
        else if( intval(date("w")) ==6 )//Sab
            $dias+=2;
        else if( intval(date("w")) ==0 )//Do
            $dias+=1;
        
        $fecha_man = date("d/m/Y", strtotime("+".$dias." day"));
    }
    /*
    // Materias
    $id_prof = $user->profesor;
    //$facultad_id = 28;
    $materias_rs = $db->query('SELECT * FROM fs_materiasprofesor(:id)', [':id' => $id_prof]);
    */
    if(isset($_POST["fecha_inicial"]))
        $fecha_ini = $_POST["fecha_inicial"];
    else
        $fecha_ini = date("d/m/Y", strtotime($periodo_rs["periodo_fecha_inicio"]));

    if(isset($_POST["fecha_final"]))
        $fecha_fin = $_POST["fecha_final"];
    else
        $fecha_fin = date("d/m/Y", strtotime($periodo_rs["periodo_fecha_fin"]));

    $date = DateTime::createFromFormat('d/m/Y', $fecha_ini);
    $fecha_ini_db = $date->format('Y-m-d');

    $date = DateTime::createFromFormat('d/m/Y', $fecha_fin);
    $fecha_fin_db = $date->format('Y-m-d');
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reposiciones crear |
        <?= $user->facultad['facultad'] ?? "Administrador"; ?>
    </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <?php
    include 'import/html_css_files.php';
    ?>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/calendar.css">
    <style>
        .wizard { height: 20px; width: 80%; background: #D0D0D0; }
        .wizard.full { background: #D0D0D0; }
        .wizard.active > div:first-child { background: #00A6CE;  }
        .wizard.active > div:last-child { width: 0px; height: 0px; border-style: solid; border-width: 10px 0 10px 6px; border-color: transparent transparent transparent #00a6ce; transform: rotate(0deg); }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/datepicker-es.js"></script>
</head>


<!--  -->

<body style="display: block;">
    <?php
    include('include/constantes.php');
    include("import/html_header.php");
    html_header("Reposiciones de clase", "Sistema de gestión de checador");
    ?>

    <main class="container content marco content-margin" id="local-app">
        <?php
        if($write==true && isset($prof_rs) && count($prof_rs)>0)  {?>
        <!-- Botón para abrir el modal -->
        <div class="row mb-4">
            <div class="col-12 text-right">
                <button type="button" class="btn btn-outline-secondary" data-tipo="1" data-toggle="modal" data-target="#modal" <?php if (!$en_fecha ) { echo "disabled"; } ?>><span class="ing-mas ing-fw"></span>Crear reposición</button>
            </div>
        </div>
        <?php }?>
        <section id="message"></section>
        <?php require('import/periodo.php') ?>
        <?php if(!is_null($user->periodo_id)) { ?>
        <form id="asistencia" method="post" onsubmit="return validaFechas()">
            <div class="form-box">
                <input type="hidden" name="facultad" value="">
                
                <div class="form-group row">
                    <label for="filtro_inicial" class="col-4 col-form-label">Fecha inicial</label>
                    <div class="col-8 col-sm-4">
                        <input id="filtro_inicial" name="fecha_inicial" type="text" class="form-control date-picker-filtro" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="" value="<?php echo $fecha_ini;?>">
                        <div class="invalid-feedback">No es una fecha válida.</div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="filtro_final" class="col-4 col-form-label">Fecha final</label>
                    <div class="col-8 col-sm-4">
                        <input id="filtro_final" name="fecha_final" type="text" class="form-control date-picker-filtro" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="" value="<?php echo $fecha_fin;?>">
                        <div class="invalid-feedback">El rango de fechas no es válido.</div>
                    </div>
                </div>
            </div>
            <div class="form-group row justify-content-center">
                <button type="submit" class="btn btn-outline-primary mr-2" id="btn-buscar"><span class="ing-buscar ing-fw"></span> Buscar</button>
                <button type="button" class="btn btn-outline-danger" onclick="window.location.href = window.location.href"><span class="ing-borrar ing-fw"></span> Limpiar</button>
            </div>
        </form>

        <?php
        
            $reposiciones_rs = $db->query('SELECT * FROM fs_reposiciones_solicitud(:f_ini, :f_fin, :usr ,NULL, NULL)', [':f_ini' => $fecha_ini_db, ':f_fin' => $fecha_fin_db, ':usr' => $user->user["id"]]);
        }
        ?>

        <div class="row">
            <?php
            if(isset($reposiciones_rs) && count($reposiciones_rs)>0){ ?>
            <h3 class="mb-3">Reposiciones creadas</h3>
            <div class="col-12 table-responsive px-0">
                <table class="table table-sm table-striped table-white">
                    <thead class="thead-dark">
                        <tr >
                            <th>Estado</th>
                            <th>Materia</th>
                            <th>Tipo</th>
                            <th style="width:160px">Fecha falta</th>
                            <th style="width:160px">Fecha reposición</th>
                            <th style="width:160px">Duración</th>
                            <th>Salón</th>
                            <?php if($write){ ?><th>Acciones</th><?php } ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        foreach($reposiciones_rs as $reposicion){
                        ?>
                        <tr data-id="<?php echo $reposicion["reposicion_id"]; ?>" id="id<?php echo $reposicion["reposicion_id"]; ?>">
                            <td class="align-middle text-center" style="color:<?php echo $reposicion["estado_color"];?>" title="<?php echo $reposicion["estado_nombre"];?>">
                                <?php if($reposicion["estado_reposicion_id"]<3){ ?>
                                <div class="wizard <?php if(intval($reposicion["estado_reposicion_id"])==2) echo "active";?> d-flex mx-auto">
                                    <div class="w-50 h-100"></div>
                                    <div class=""></div>
                                </div>
                                <?php } else if($reposicion["estado_reposicion_id"]==3){?>
                                <div class="text-success text-center pt-1">
                                    <span class="ing-autorizar ing-lg"></span>
                                </div>
                                <?php } else {?>
                                <div class="text-danger text-center pt-1">
                                    <span class="ing-negar ing-lg"></span>
                                </div>
                                <?php } ?>
                            </td>
                            <td class="align-middle"><?php echo $reposicion["materia_nombre"]; ?></td>
                            <td class="align-middle">
                                <?php if($reposicion["es_reposicion"]) echo "Reposición"; else echo "Cambio"; ?>
                            </td>
                            <td class="align-middle text-center"><?php
                                echo date("d/m/Y", strtotime($reposicion["fecha_clase"]))."<br>".substr($reposicion["horario_hora"],0,-3)." a ".substr($reposicion["horario_hora_fin"],0,-3)." hrs.";;
                                ?>
                            </td>
                            <td class="align-middle text-center"><?php
                                
                                echo date("d/m/Y", strtotime($reposicion["fecha_nueva"])) ."<br>".substr($reposicion["hora_nueva"],0,-3)." a ".substr($reposicion["hora_nueva_fin"],0,-3)." hrs.";
                                ?>
                            </td>
                            <td class="align-middle text-center"><?php
                                echo $reposicion["duracion_total"];
                                ?>
                            </td>
                            <td class="align-middle text-center"><?php
                                if($reposicion["salon_id"] != ""){
                                    echo $reposicion["salon_id"];
                                }else
                                    echo "Pendiente";
                                ?>
                            </td>
                            
                            <?php if($write){ ?>
                            <td class="align-middle text-center icono-acciones">
                                <?php
                                
                                //no se ha aprobado
                                if($reposicion["estado_reposicion_id"] == 1){?>
                                <a href="#" data-tipo="2" title="Editar" data-toggle="modal" data-target="#modal"><?php echo $ICO["editar"];?></a>
                                <a href="#" data-toggle="modal" data-target="#modal_confirm" title="Borrar"><?php echo $ICO["cancelar"];?></a>
                                <?php } ?>
                            </td>
                            <?php } ?>
                        </tr>
                        <?php }
                    ?>
                    </tbody>
                </table>
            </div>
            <?php } else { 
                if(is_null($user->periodo_id)){ ?>
            <div class="col-12 text-center">
                <h4 class="mt-4 text-danger">Selecciona un periodo</h4>
            </div>
            <?php } else {?>    
            <div class="col-12 text-center">
                <h4 class="mt-4 text-danger">No tienes reposiciones disponibles que cumplan con los filtros</h4>
            </div>
            <?php }
            } ?>
        </div>

        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="col-12 modal-title text-center"><span id="modalLabel">Crear Reposición</span>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button></h4>
                    </div>
                    <div class="modal-body">
                        <form action="./action/reposicion_insert.php" method="post" id="formaModal" onsubmit="return submitForm()">
                            <input type="hidden" name="id" id="id">
                            <input type="hidden" name="estado" value="1">
                            <input type="hidden" name="ciclo" id="ciclo" value="0">
                            <input type="hidden" name="bloque" id="bloque" value="0">
                            
                            <div class="form-box">

                                <div class="form-group row" id="profBlock">
                                    <label for="prof" class="col-4 col-form-label">Profesor *</label> 
                                    <div class="col-8">
                                        <div class="datalist datalist-select mb-1 w-100" id="dlProfesor">
                                            <div class="datalist-input">Selecciona un profesor</div>
                                            <span class="ing-buscar icono"></span>
                                            <ul style="display:none">
                                                <?php foreach($prof_rs as $prof){?>
                                                    <li data-id="<?php echo $prof["profesor_id"];?>" <?php if($prof["profesor_id"]==$user->profesor){ echo "class='selected'";} ?> ><?php echo $prof["profesor_nombre"];?></li>
                                                <?php } ?>
                                            </ul>
                                            <input type="hidden" id="prof" name="prof" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-box prof-selected">
                                <div class="form-group row" id="materiaBlock">
                                    <label for="horario" class="col-4 col-form-label">Materia *</label> 
                                    <div class="col-8">
                                        <div class="datalist datalist-select mb-1 w-100" id="dlMateria">
                                            <div class="datalist-input">Selecciona una materia</div>
                                            <span class="ing-buscar icono"></span>
                                            <ul style="display:none">
                                            
                                            </ul>
                                            <input type="hidden" id="horario" name="horario" value="">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group row">
                                    <label for="tipo" class="col-4 col-form-label">Tipo *</label> 
                                    <div class="col-8">
                                        <div class="datalist datalist-select mb-1 w-100" id="dlTipo">
                                            <div class="datalist-input">Reposición</div>
                                            <span class="ing-buscar icono"></span>
                                            <ul style="display:none">
                                                <li data-id="1">Reposición</li>
                                                <li data-id="2">Cambio de salón</li>
                                            </ul>
                                            <input type="hidden" id="tipo" name="tipo" value="1">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row materia-block">
                                    <label for="duracion" class="col-4 col-form-label">Duración</label> 
                                    <div class="col-4">
                                        <select name="duracion" id="duracion" class="form-control" required="required">
                                            <?php foreach($duracion_rs as $dura){?>
                                            <option value="<?php echo $dura["duracion_id"];?>" data-duracion="<?php echo $dura["duracion_interval"];?>" ><?php echo $dura["duracion_nombre"];?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="form-group row cambio_block materia-block" style="display: none;">
                                    <label for="fecha_cambio" class="col-4 col-form-label">Fecha de cambio *</label> 
                                    <div class="col-8">
                                        <input id="fecha_cambio" name="fecha_cambio" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="readonly" value="">
                                    </div>
                                </div>

                                <div class="form-group row repo_block materia-block">
                                    <label for="fecha_falta" class="col-4 col-form-label">Fecha de falta *</label> 
                                    <div class="col-8">
                                        <input id="fecha_falta" name="fecha_falta" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="readonly" value="">
                                    </div>
                                </div>
                                    <div class="form-group row repo_block materia-block">
                                    <label for="fecha_inicial" class="col-4 col-form-label">Fecha de reposicion *</label> 
                                    <div class="col-8">
                                        <input id="fecha_inicial" name="fecha_inicial" type="text" class="form-control date-picker-future" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="readonly" value="">
                                        <small class="form-text text-muted">Las reposiciones se deben solicitar con al menos 72hrs de anticipación.<br>
                                                    Recuerda que en sábado el límite para terminar la clase es a las 15:00hrs.
                                        </small>
                                    </div>
                                </div>
                                <div class="form-group row materia-block">
                                    <label for="hora_ini" class="col-4 col-form-label" id="hora_nombre">Hora reposición *</label>
                                    <?php
                                    //define("HORA_FINAL", 22);
                                    //define("FRACCION_HORA", 15);
                                    $default_h = 7; $default_m = 15;
                                    ?>
                                    <div class="col-4">
                                        <select name="hora_ini" id="hora_ini" class="form-control" required="required">
                                            <?php for($h = $default_h; $h < HORA_FINAL; $h++){?>
                                            <option value="<?php echo sprintf( '%02d', $h );?>" <?php if($default_h == $h){ echo 'selected="selected"';}?>><?php echo sprintf( '%02d', $h );?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <select name="min_ini" id="min_ini" class="form-control" required="required">
                                            <?php for($m = 0; $m < 60; $m+=(60/FRACCION_HORA)){?>
                                            <option value="<?php echo sprintf( '%02d', $m );?>" <?php if($default_m == $m){ echo 'selected="selected"';}?>><?php echo sprintf( '%02d', $m );?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>

                                
                                <div class="form-group row materia-block">
                                    <label for="salon" class="col-4 col-form-label">Alumnos aproximados *</label> 
                                    <div class="col-8 col-md-4">
                                        <input type="number" name="alumnos" id="alumnos" class="form-control" value="1" min="1" max="50">
                                    </div>
                                </div>
                                
                                <div class="form-group row materia-block">
                                    <label for="aula" class="col-4 col-form-label">Tipo aula *</label> 
                                    <div class="col-8">
                                        <div class="datalist datalist-select mb-1 w-100" id="dlAula">
                                            <div class="datalist-input">Salón</div>
                                            <span class="ing-buscar icono"></span>
                                            <ul style="display:none">
                                                <li data-id="1">Salón</li>
                                                <li data-id="2">Sala de cómputo</li>
                                                <li data-id="3">Salón/Taller de la facultad</li>
                                            </ul>
                                            <input type="hidden" id="aula" name="aula" value="1">
                                        </div>
                                    </div>
                                </div>
                                <?php if(!$user->jefe_carrera){//es coordinador
                                    $salones_rs = $db->query('SELECT * from salon_view where es_salon is true');
                                ?>
                                <div class="row" id="salon-editar" style="display: none;">
                                    <div class="col-6 col-sm-4 barra-right text-right">
                                        <p class="font-weight-bold">Salón *</p>
                                    </div>
                                    <div class="col-6">
                                        <input list="lista_salones" name="dlSalon" id="dlSalon" class="form-control" placeholder="Salón">
                                        <div class="valid-feedback">
                                            Salón encontrado
                                        </div>
                                        <div class="invalid-feedback">
                                            Salón no encontrado
                                        </div>
                                        <datalist id="lista_salones">
                                            <?php
                                            foreach ($salones_rs as $salon) {
                                                extract($salon);
                                                $salon_json = json_decode($salon_array, true);
                                                if($salon_json[0]== "UNIVERSIDAD LA SALLE"){
                                                    unset($salon_json[0]);
                                                }
                                                $salon_nombre = join(" / ",$salon_json);
                                            ?>
                                                <option data-id="<?= $salon_id ?>" data-nombre="<?= $salon_nombre ?>" value="<?= $salon_nombre ?>"></option>
                                            <?php
                                            }
                                            ?>
                                        </datalist>
                                        <!-- <ul class="list-group" id="salones"></ul> -->
                                        <input type="hidden" id="salon" name="salon" value="">
                                    </div>
                                </div>
                                <?php } ?>
                            
                                <div class="form-group row materia-block">
                                    <label for="comentario" class="col-4 col-form-label">Comentarios</label> 
                                    <div class="col-8">
                                        <p><i>Requerimientos específicos del salón, software especializado, etc.</i></p>
                                        <textarea rows="3" class="form-control" id="comentario" name="comentario"></textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group row mt-3">
                                <div class="offset-4 col-8">
                                    <button type="submit" class="btn btn-outline-primary  materia-block" id="submitBtn" data-tipo="1"><?php echo $ICO["aceptar"];?> Guardar</button>
                                    <button type="reset" class="btn btn-outline-danger" data-dismiss="modal"><?php echo $ICO["cancelar"];?> Cancelar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal del formulario -->
        <div class="modal fade" id="crearReposiciónOld" tabindex="-1" role="dialog" aria-labelledby="crearReposiciónLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="crearReposiciónLabel">Crear Reposición</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="form" class="form-horizontal">
                            <div class="form-group step" id="step-1">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="clave_profesor" class="col-4 col-form-label">Profesor</label>
                                        <div class="col-8">
                                            <input list="lista_profesores" name="clave_profesor" id="clave_profesor" class="form-control" placeholder="Profesor" required="required">
                                            <div class="valid-feedback">
                                                Profesor encontrado
                                            </div>
                                            <div class="invalid-feedback">
                                                Profesor no encontrado
                                            </div>
                                            <datalist id="lista_profesores">

                                                <?php
                                                
                                                foreach ($prof_rs as $prof) {
                                                ?>
                                                    <option data-grado="<?= $prof["profesor_grado"] ?>" data-clave="<?= $prof["profesor_clave"] ?>" data-profesor="<?= $prof["profesor_nombre"] ?>" data-id="<?= $prof["profesor_id"]; ?>" value="<?= "{$prof["profesor_clave"]} | {$prof["profesor_grado"]} {$prof["profesor_nombre"]}" ?>"></option>
                                                <?php
                                                }
                                                ?>
                                            </datalist>
                                            <ul class="list-group" id="profesores"></ul>
                                            <input type="hidden" id="periodo_id" name="periodo_id" value="<?= $user->periodo_id ?>">
                                            <input type="hidden" id="profesor_id" name="profesor_id" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group step" id="step-2">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="horario_reponer" class="col-4 col-form-label">Horario a reponer</label>
                                        <div class="col-8">
                                            <select name="horario_reponer" id="horario_reponer" class="form-control" required="required">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="horario_id" id="horario_id">
                            </div>
                            <div class="form-group step" id="step-3">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="fechas_clase" class="col-4 col-form-label">Fecha de clase</label>
                                        <div class="col-8">
                                            <select name="fechas_clase" id="fechas_clase" class="form-control" required="required">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group step" id="step-4">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="fecha_reponer" class="col-4 col-form-label">Fecha de reposición</label>
                                        <div class="col-6">
                                            <input type="text" placeholder="dd/mm/aaaa" name="fecha_reponer" id="fecha_reponer" class="form-control date-picker" required="required">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="hora" class="col-4 col-form-label">Hora</label>
                                        <div class="col-3">
                                            <div id="hora" class="datalist datalist-select mb-1">
                                                <div class="datalist-input text-center">hh</div>
                                                <span class="ing-buscar icono"></span>
                                                <ul style="display:none">
                                                    <?php foreach (range(7, 21) as $hora) { ?>
                                                        <li data-id='<?= $hora ?>'><?= str_pad($hora, 2, "0", STR_PAD_LEFT) ?></li>
                                                    <?php } ?>
                                                </ul>
                                                <input type="hidden" id="hora_reponer" name="horas" value="">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div id="minutos" class="datalist datalist-select mb-1">
                                                <div class="datalist-input text-center">mm</div>
                                                <span class="ing-buscar icono"></span>
                                                <ul style="display:none">
                                                    <?php foreach (range(0, 45, 15) as $minuto) { ?>
                                                        <li data-id='<?= $minuto ?>'><?= str_pad($minuto, 2, "0", STR_PAD_LEFT) ?></li>
                                                    <?php } ?>
                                                </ul>
                                                <input type="hidden" id="minutos_reponer" name="minutos" value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group step" id="step-5">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="descripcion_reposicion" class="col-4 col-form-label">Comentarios</label>
                                        <div class="col-6">
                                            <textarea name="descripcion_reposicion" id="descripcion_reposicion" rows="4" required="required" placeholder="Se requiere proyector, etc." maxlength="255" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row align-items-center">
                                        <label class="col-4 col-form-label" for="sala">¿En sala de cómputo?</label>
                                        <div class="col-6">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" id="sala">
                                                <label class="custom-control-label" for="sala"></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button class="btn btn-secondary" type="button" id="prev-button">Anterior</button>
                        <button class="btn btn-secondary" type="button" id="next-button" disabled data-toggle="modal" data-target="#confirmationModal">Proponer reposición</button>
                    </div>
                </div>
            </div>
        </div>
        
    
        <div class="modal fade" id="modal_confirm" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col">
                                <p class="font-weight-bold">¿Estás seguro de que quieres borrar la reposición?</p>
                                <p>Esta acción no se puede deshacer.</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="id_borrar" value="">
                        <button type="button" class="btn btn-outline-primary btn-borrar"><?php echo $ICO["aceptar"];?> Borrar</button>
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal" aria-label="Close"><?php echo $ICO["cancelar"];?> Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <? include "import/html_footer.php"; ?>
    
    <?php
    //--Manejo de errores y mensajes de exito
    if(isset($_GET["error"]) && is_numeric($_GET["error"])){
        switch ($_GET["error"]){
            case 0: $errorDesc = "No se reciberon los datos de la reposición."; break;
            case 1: $errorDesc = "Ocurrió un error al insertar los datos de la reposición/cambio."; break;
            case 2: $errorDesc = "Ocurrió un error al actualizar los datos de la reposición/cambio."; break;
            case 3: $errorDesc = "No tienes permisos para realizar esa acción."; break;
            case 4: $errorDesc = "Ocurrió un error al cargar los datos de la reposición/cambio."; break;
            case 6: $errorDesc = "La reposición/cambio que buscas no existe. Consulta la lista de reopsiciones disponibles en esta sección."; break;
            case 7: $errorDesc = "La reposición/cambio se empalma con el horario del grupo y no se puede guardar."; break;
            case 8: $errorDesc = "El salón de la reposición está siendo utilizado ese día a esa hora y no se puede guardar."; break;
            case 9: $errorDesc = "El profesor está asigndo a otra clase o reposición el mismo día a la misma hora y no se puede guardar."; break;
            case 10: $errorDesc = "El profesor está asigndo a una materia el mismo día a la misma hora y no se puede guardar."; break;
            case 11: $errorDesc = "No hay clases asignadas para esa materia y grupo en la fecha de falta."; break;
        }
    }
    if(isset($_GET["ok"]) && is_numeric($_GET["ok"])){
        switch ($_GET["ok"]){
            case 0: $successDesc = "La reposición se guardó correctamente."; break;
            case 1: $successDesc = "La reposición se actualizó correctamente."; break;
        }
    }
    require_once 'js/messages.php';
    ?>
    <script>
    <?php if(isset($errorDesc)){ ?>
    triggerMessage("<?php echo $errorDesc;?>", "Error");
    <?php } else if(isset($successDesc)){ ?>
    triggerMessage("<?php echo $successDesc;?>", "Éxito", "success");
    <?php } ?>

    var vacaciones=[
        <?php
        $vacaciones_rs = $db->query('SELECT diasfestivos_dia from diasfestivos d where :periodo = any(d.periodos_id)', [':periodo' => $user->periodo_id ]); 
        
            foreach($vacaciones_rs as $v){ echo '"'.$v["diasfestivos_dia"].'",';}
        ?>
    ];
    var _dias_asistencia = [];//ya registró asistencia, cambia con ajax
    var _dia_valido = 0;
    var _fecha_manhana = "<?php echo $fecha_man; ?>";
    var _periodo_fecha_inicial = "<?php echo date("d/m/Y", strtotime($periodo_rs["periodo_fecha_inicio"])); ?>";
    var _periodo_fecha_final = "<?php echo date("d/m/Y", strtotime($periodo_rs["periodo_fecha_fin"])); ?>";
    var datepickerOptions_filtro = { dateFormat: "dd/mm/yy", minDate:_periodo_fecha_inicial, maxDate:_periodo_fecha_final};

    var datepickerOptions = { dateFormat: "dd/mm/yy", minDate:_periodo_fecha_inicial, maxDate:_periodo_fecha_final,
        beforeShowDay: function(date) {
            var day = date.getDay();
            var dateString = $.datepicker.formatDate("yy-mm-dd", date);
            if (day === _dia_valido) {// 0 representa el domingo
                if (vacaciones.indexOf(dateString) !== -1 || _dias_asistencia.indexOf(dateString) !== -1) 
                    return [false];
                else
                    return [true];
            }else{
                return [false];
            }
            
        }
    };
    var datepickerOptions_future = { dateFormat: "dd/mm/yy", minDate:_fecha_manhana, maxDate:_periodo_fecha_final,
        beforeShowDay: function(date) {
            var day = date.getDay();
            var dateString = $.datepicker.formatDate("yy-mm-dd", date);
            if (day === 0) {// 0 representa el domingo
                return [false];
            } else {
                if (vacaciones.indexOf(dateString) !== -1) {
                    return [false];
                } else {
                    return [true];
                }
            }
            
        }
    };

    function diaAAno(fecha_str){//de dd/mm/yyyy a yyyy-mm-dd 
        if(fecha_str.charAt(2) == "/" && fecha_str.charAt(5) == "/"){//dd/mm/yyyy
            var fecha_arr = fecha_str.split("/");
            return fecha_arr[2]+"-"+fecha_arr[1]+"-"+fecha_arr[0];
        }
        return fecha_str;
    }
    function fechaMayor(fechaI, fechaF) {//cual es mayor >0 I mayor   <0 F mayor
        return (Date.parse(diaAAno(fechaI)) - Date.parse(diaAAno(fechaF)));
    }

    function validaFechas(){
        if(fechaMayor($('#filtro_inicial').val().trim(), $('#filtro_final').val().trim()) > 0){
            $('#filtro_final').addClass("is-invalid");
            return false;
        }
        return true;
    }

    function submitForm(){
        var myBtn = $('#submitBtn');
        var error = false;
        
        $("#gpo").removeClass("is-invalid");
        invalidDatalist("#materia", false);
        $("#fecha_inicial").removeClass("is-invalid");
        $("#fecha_falta").removeClass("is-invalid");
        $("#fecha_cambio").removeClass("is-invalid");

        
        if($("#tipo").val() == 1){//reposición
            if($("#fecha_falta").val() == ""){
                $("#fecha_falta").addClass("is-invalid");
                error = true;
            }
            if($("#fecha_inicial").val() == ""){//fecha reposición
                $("#fecha_inicial").addClass("is-invalid");
                error = true;
            }    
        }else{
            if($("#fecha_cambio").val() == ""){
                $("#fecha_cambio").addClass("is-invalid");
                error = true;
            }
        }
        if($("#horario").val().trim() == "" || $("#horario").val() === null){
            invalidDatalist("#horario", true);
            error = true;
        }
        
        if(myBtn.data("tipo") == 2 ){
            $('#formaModal').prop("action", "./action/reposicion_update.php");
        }else{
            $('#formaModal').prop("action", "./action/reposicion_insert.php");
        }
        return !error;
    }

    function cambiaTipo(tipo){
        if (tipo == 1){//reposición
            $(".repo_block").show();
            $(".cambio_block").hide();
            $(".repo_block").find("input[type=text]").attr("required", true);
            $(".cambio_block").find("input[type=text]").removeAttr("required");
            $("#hora_nombre").text("Hora reposición *");
        }else{//Cambio de salón
            $(".repo_block").hide();
            $(".cambio_block").show();
            $(".repo_block").find("input[type=text]").removeAttr("required");
            $(".cambio_block").find("input[type=text]").attr("required", true);
            $("#hora_nombre").text("Hora cambio *");
            var hora = $("#dlMateria ul li.selected").data("hr");
            var min = $("#dlMateria ul li.selected").data("min");
            $("#hora_ini").val(hora)
            $("#min_ini").val(min)

        }
    }
    
    $(document).ready(function(){
        $(".prof-selected").hide();
        //fecha de clase
        $(".date-picker" ).datepicker(datepickerOptions);
        $(".date-picker" ).datepicker( $.datepicker.regional[ "es" ] );

        //fecha de clase
        $(".date-picker-filtro" ).datepicker(datepickerOptions_filtro);
        $(".date-picker-filtro" ).datepicker( $.datepicker.regional[ "es" ] );

        //fecha nueva
        $(".date-picker-future" ).datepicker(datepickerOptions_future);
        $(".date-picker-future" ).datepicker( $.datepicker.regional[ "es" ] );
        
        
        function creaOpcion(id_horario, dia, hora, min, nombre, gpo, duracion){
            return '<li data-id="'+id_horario+'" data-dia="'+dia+'" data-hr="'+hora+'" data-min="'+min+'" data-gpo="'+gpo+'" data-duracion="'+duracion+'">'+nombre+'</li>';
        }

        $('#filtro_final').focus(function(){
            $("#filtro_final").removeClass("is-invalid");
        });

        function obtieneProf(pid){
            return $.ajax({
                url:  './action/reposicion_profesor_materias.php',
                type: 'POST', 
                dataType: 'json',
                data: { id: pid, },
                //async: false,
                success: function(result) {
                    if(result["error"]!= "" &&  result["error"] !== undefined){
                        triggerMessage(result["error"], "Error");
                        $("#modal").modal('hide');
                        $(".prof-selected").hide();
                    }else{
                        $(".prof-selected").show();
                        $("#dlMateria ul").html("");
                        for(i=0; i<result["materias"].length; i++){
                            var html = creaOpcion(result["materias"][i]["horario_id"],
                                result["materias"][i]["horario_dia"],
                                result["materias"][i]["horario_hora"],
                                result["materias"][i]["horario_min"],
                                result["materias"][i]["materia_nombre"],
                                result["materias"][i]["grupo"],
                                result["materias"][i]["duracion"]
                                );
                            $("#dlMateria ul").append(html);
                        }
                    }
                },
                error: function(jqXHR, textStatus, errorThrown ){
                    triggerMessage(errorThrown, "Error");
                }
            });//ajax
        }

        $(document).on( "click", "#dlProfesor ul li", function(event){//cambia datalist
            var pid = $(this).data('id');
            //busca materias del profesor
            var profCarga = obtieneProf(pid);
            profCarga.done(function(){
                $("#dlMateria ul li:first").click();
            });
        });
        
        
        //Actualiza días elegibles de calendario
        $(document).on( "click", "#dlMateria ul li", function(event){//manda al frente de todos
            _dia_valido = $(this).data('dia');//variable global
            var grupo = $(this).data("gpo");
            var duracionMateria = $(this).data("duracion");

            $(".date-picker" ).datepicker(datepickerOptions);
            var hora = $(this).data("hr");
            var min = $(this).data("min");
            $("#hora_ini").val(hora)
            $("#min_ini").val(min)

            return $.ajax({
                url:  './action/asistenciasprofesor_select.php',
                type: 'POST', 
                dataType: 'json',
                data: { "id": $("#prof").val(), "hor": $(this).data("id") },
                //async: false,
                success: function(result) {
                    if(result["error"]!= "" &&  result["error"] !== undefined){
                        triggerMessage(result["error"], "Error");
                        $('#modal').modal("hide");
                    }else{
                        _dias_asistencia = result["asistenciaArr"];
                        //Cambiar ciclo [6] y bloque [8]
                        $("#ciclo").val(parseInt(grupo[6]));
                        $("#bloque").val(parseInt(grupo[8])-1);
                        
                        $('#duracion option').each(function() {
                            if ($(this).data("duracion") === duracionMateria) {
                                // Selecciona la opción correspondiente en el select de "duracion"
                                $(this).prop('selected', true);
                            }
                        });
                    }

                },
                error: function(jqXHR, textStatus, errorThrown ){
                    triggerMessage(errorThrown, "Error");
                }
            });//ajax
            
            
        });
        
        $("#dlTipo ul li").click(function(){//cambia datalist
            cambiaTipo($(this).data('id'));
            $(".date-picker" ).datepicker(datepickerOptions);
        });
        $("#dlAula ul li").click(function(){//cambia datalist
            if($(this).data("id") == 1){
                $("#salon-editar").hide();
                $("#dlSalon").val("");
                $("#salon").val("");

            }else{
                $("#salon-editar").show();
            }
            
        });

        $('#modal_confirm').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var id = button.parents("tr").data("id");
            $("#id_borrar").val(id);
        });
        
        $(".btn-borrar").click(function(){
            var r_id =  $("#id_borrar").val();
            $.ajax({
                url:  './action/reposicion_delete.php',
                type: 'POST', 
                dataType: 'json',
                data: { id: r_id},
                success: function(result) {
                    if(result["error"]!= "" &&  result["error"] !== undefined){
                        triggerMessage(result["error"], "Error");
                    }else{
                        triggerMessage(result["ok"], "Éxito", "success");
                        $("#id"+r_id).remove();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown ){
                    triggerMessage(errorThrown, "Error");
                }
            });//ajax
            $('#modal_confirm').modal("hide");
        });

        
        $('#modal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var tipo = button.data('tipo'); // 1 alta, 2 edicion
            var modal = $(this);
            
            $("#modal .is-invalid").removeClass("is-invalid");
            //$(this).find(".form-control:first-child").focus();
            

            $("#errorBox").collapse('hide');
            $("#errorBox_text").html("");
            if(tipo == 1){//alta
                $("#submitBtn").data('tipo', 1);
                $("#modalLabel").html("Crear Reposición");
                modal.find("input[type=text]").val("");
                modal.find("#alumnos").val("15");
                $("#plan").attr("readonly", false);
                $("#sem").attr("readonly", false);
                $("#gpo").attr("readonly", false);
                
                //$("#prof").attr("readonly", false);
                disableDatalist("#horario", false);
                disableDatalist("#tipo", false);
                if($("#prof").length>0)
                    disableDatalist("#prof", false);
                setDatalistFirst("#tipo");
                setDatalistFirst("#aula");
                setDatalistFirst("#horario");
                $("#dlMateria ul li:first").click();
                
            }else{//editar
                $("#submitBtn").data('tipo', 2);
                $("#modalLabel").html("Editar Reposición");
                $("#plan").attr("readonly", true);
                $("#sem").attr("readonly", true);
                $("#gpo").attr("readonly", true);
                //$("#materia").attr("readonly", true);
                disableDatalist("#horario");
                disableDatalist("#tipo");
                disableDatalist("#prof");
                /*if($("#prof").length>0)
                    disableDatalist("#prof");
                $("#prof").attr("readonly", true);*/
                var r_id = $(button).parents("tr").data("id");
                $("#id").val(r_id);
                $.ajax({
                    url:  './action/reposicion_select.php',
                    type: 'POST', 
                    dataType: 'json',
                    data: { id: r_id },
                    async: true,
                    success: function(result) {
                        if(result["error"]!= "" &&  result["error"] !== undefined){
                            triggerMessage(result["error"], "Error");
                            $("#modal").modal('hide');
                        }else{
                            //setDatalist("#prof", result["profesor"]);
                            setDatalist("#prof", result["profesor"]);
                            
                            var profCarga = obtieneProf(result["profesor"]);

                            //$('#salon').val(result["salon"]);
                            $("#fecha_falta").val(result["fecha_clase"]);
                            $('#hora_ini').val(result["hora_ini"]);
                            $('#min_ini').val(result["min_ini"]);
                            $('#comentario').val(result["comentario"]);
                            $('#alumnos').val(result["alumnos"]);
                            $('#ciclo').val(result["ciclo"]);
                            $('#bloque').val(result["bloque"]);
                            
                            if(result["tipo"]){
                                setDatalist("#tipo", 1);
                                cambiaTipo(1);
                                $("#fecha_inicial").val(result["fecha_nueva"]);
                            }else{
                                setDatalist("#tipo", 2);
                                cambiaTipo(2);
                                $("#fecha_cambio").val(result["fecha_nueva"]);
                            }
                            _dia_valido = parseInt(result["dia"]);
                            $(".date-picker" ).datepicker(datepickerOptions);
                            $("#dlTipo ul li:selected").click();
                            
                            
                            profCarga.done(function(){
                                setDatalist("#horario", result["horario"]);// No se actualiza TODO
                            });
                            setDatalist("#aula", result["aula"]);
                            modal.modal('show');
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown ){
                        triggerMessage(errorThrown, "Error");
                        $("#modal").modal('hide');
                        //$('#messageBox')[0].scrollIntoView({ block: "end" });
                    }
                });//ajax
            }
        });//show
        
    });

    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
<script src="js/messages.js"></script>
<script type="module" src="js/reposiciones.js"></script>
</body>

</html>