<%-- 
    Document   : vistaDobleDisponibilidad
    Created on : 17-nov-2018, 8:48:37
    Author     : sistem20user
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="pe.siso.horario.Beans.PeriodoAcademico"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>VISTA DOBLE DISPONIBILIDAD</title>
        <link rel="stylesheet" href="../assets/css/jquery-ui.css" />
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="css/snackbar.css" rel="stylesheet" type="text/css"/>
        <link href="css/alert.css" rel="stylesheet" type="text/css"/>

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

        <!--jquery-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!--axios-->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

        <%
                HttpSession session_actual = request.getSession(true);
                PeriodoAcademico periodo=(PeriodoAcademico)session_actual.getAttribute("periodo");
        %>
        <style type="text/css">
            @media print {
                #divBusqueda {display:none}
                #lblTitulo{text-align: center;font-size: 40px;font-weight: bold}
            }
            td{
            border : 3px solid;
            text-align : center;
           }
           
           
           body{
            background-image: url(../assets/images/fondo-trismegisto.png);
            height: 500px;
            max-width: 100%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
 
           }
           
           
           body::after {
            content: "";
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            z-index: -1;
            position: fixed;
            }

            .colorVerde{
                background-color: #96d089;
            }
            
            .colorRojo{
                background-color: #d0766f;
            }
            
            .colorAzul{
                background-color: #59a1da;
            }
     
            
            
        </style>

        <script type="text/javascript" language="javascript">

            function alertDGC(mensaje)
            {
                var dgcTiempo = 500
                var ventanaCS = '<div class="dgcAlert"><div class="dgcVentana"><div class="dgcCerrar"></div><div class="dgcMensaje">' + mensaje + '<br><div class="dgcAceptar">Aceptar</div></div></div></div>';
//						var bodyCS='<input type="text" value="prueba">';
                $('body').append(ventanaCS);
//						$('body').append(bodyCS);
                var alVentana = $('.dgcVentana').height();
                var alNav = $(window).height();
                var supNav = $(window).scrollTop();
                $('.dgcAlert').css('height', $(document).height());
                $('.dgcVentana').css('top', ((alNav - alVentana) / 2 + supNav - 100) + 'px');
                $('.dgcAlert').css('display', 'block');
                $('.dgcAlert').animate({opacity: 1}, dgcTiempo);
                $('.dgcCerrar,.dgcAceptar').click(function (e) {
                    $('.dgcAlert').animate({opacity: 0}, dgcTiempo);
                    setTimeout("$('.dgcAlert').remove()", dgcTiempo);
                });
            }

        </script>


    </head>


    <body>
       
        <script>
            window.alert = function (message) {
                alertDGC(message);
            };
        </script>
        <div class="container">
            <div class="row" id="divBusqueda">
                <div class="col s8 offset-s2">
                    <div class="card">
                        <div class="card-content">
                            <span class="card-title" style="font-weight: bold">Buscar disponibilidad</span>
                            <div class="row">
                                <div class="input-field col s6">
                                    <select id="cbArea" onchange="listarPlana(this);desactivarBuscar();desactivarPrint();">
                                    </select>
                                    <label>Area:</label>
                                </div>
                                <div class="input-field col s6">
                                    <select id="cbPlana" onchange="activarBuscar();">
                                    </select>
                                    <label>Plana:</label>
                                </div>
                            </div>
                        </div>
                        <div class="card-action center">
                            <a class="waves-effect waves-light btn blue" id="btnBuscar" onclick="activarPrint();"><i class="material-icons left">search</i>BUSCAR</a>


                            <a class="waves-effect waves-light btn" id="btnImprimir" onclick="pintarTDRed();window.print();" style="background-color: #5478a2;"><i class="material-icons dp48 left">print</i>IMPRIMIR</a><br>
                            <!--							<a class="btn btn-app btn-light btn-xs align-left" onclick="window.print();" target="_blank" id="iconoImprimir">
                                                                                            <i class="ace-icon fa fa-print bigger-160"></i>-->
                            <label>Zona:</label>	
                            <select id="cmbZonas" onchange="listarDisponibilidad();activarPrint();">
                            </select>

                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col s12">
                    <div class="card">
                        <div class="card-content">
                            <span class="card-title" id="lblTitulo">Lista de docentes y disponibilidad</span>

                            <div class="row">
                                <div id="divListaDisponibilidad">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Structure -->

        </div>

    </div>
    <!-- The actual snackbar -->
    <div id="snackbar">Se bloqueo el dia correctamente..</div>
    <div id="snackbar2">Desbloqueado.</div>
    <script>

//			$("#btnBuscar").attr('disabled','disabled');
        function desactivarBuscar() {
            $("#btnBuscar").attr('disabled', 'disabled');
        }
        function activarBuscar() {
            $("#btnBuscar").attr('disabled', false);
        }



        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect;
        document.addEventListener('DOMContentLoaded', function () {
            listarArea()
            listarZona()
//				setTimeout(function(){ alert("HOLA MASCOTA"); }, 5000);

            document.querySelector('#btnBuscar').addEventListener('click', function () {

                let cmbZonas = $("#cmbZonas option:selected").text();
                if (cmbZonas === "[SELECCIONE]") {
                    listarDisponibilidad()
                } else {
                    listarDisponibilidad()
                }


            })

        });
        function listarArea() {
            axios.get('../ServletArea?Accion=cargarAreaJson')
                    .then(data => {

                        let option = '<option value="">[SELECCIONE]</option>'
                        data.data.forEach(v => {
                            option += '<option value="' + v.codigoArea + '">' + v.nombreArea + '</option>'
                        })


                        document.querySelector('#cbArea').innerHTML = option
                        instances.init(elems)
                    })
        }

        function listarZona() {
            axios.get('../ServletZona?Accion=cargarZonaJson')
                    .then(data => {
                        let option = '<option value="">[SIN ZONA]</option><option value="T">TODAS LAS ZONAS</option>'

                        data.data.forEach(v => {
                            option += '<option value="' + v.codigoZona + '">' + v.nombreZona + '</option>'
                        })
                        document.querySelector('#cmbZonas').innerHTML = option
                        instances.init(elems)
                    })

        }


        function listarDisponibilidad() {


            let codigoPlana = document.querySelector('#cbPlana').value
            let codigoPeriodo = '<%= periodo!=null?periodo.getCodigoPeriodo():""%>'
            console.log(codigoPeriodo)
            let codigoZona = document.querySelector('#cmbZonas').value
//        let distritos=new ZonaDistritoServices();

            if (codigoPlana && codigoPeriodo && codigoZona) {


                let json = {
                    codigoPlana,
                    codigoPeriodo,
                    codigoZona
                }
                
                peticionWith3Parameters(json);
                
           } else {

                let codigoPeriodo2 = '<%= periodo!=null?periodo.getCodigoPeriodo():""%>'

//		let codigoPlana2 = document.querySelector('#cbPlana').value

                let json2 = {
                    codigoPlana,
                    codigoPeriodo2
                }

                peticionSimple(json2);
            }


        }

        function peticionSimple(json) {

            $.ajax({
                url: '../ServletHorario?Accion=listarVistaDobleDisponibilidadSinZona',
                type: 'POST',
                dataType: 'json',
                data: {
                    json: JSON.stringify(json)
                },
                success: function (data, textStatus, jqXHR) {


                    let html = ''
                    let nTurno = []
                    let nDia = []
                    let mensaje = 'No registrado'
                    data.data.forEach(function (docente) {

                        if (typeof (docente.celular && docente.distrito) == "undefined") {

                            html += '<table>'
                            html += '<div class="divider"></div>'
                            html += '<div class="section">'

                            html += '<h6 id="nombreDocente">' + docente.nombre + '<span></span><span></span><span style="margin-left:650px;font-size:20px;color:#6C7807"><i class="small material-icons" title="Puesto" style="color:black;">grade</i><strong>No registrado</strong></span></h6>'
                            html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'

                            html += '<tr>'
                            html += '<p>Celular: No registrado</p>'
                            html += '<p>Distrito: No registrado</p>'
                            html += '<p>Direccion: No registrado</p>'
                            html += '<p>Correo: No registrado</p>'

                            html += '</tr>'

                            html += '<br>'




                            if (docente.disponibilidad) {

                                let disponibilidad = docente.disponibilidad.split('-') || []
                                let diasM = []
                                let diasT = []
                                let aulasM = []
                                let aulasT = []

                                if (docente.arrayAulas) {
                                    docente.arrayAulas.forEach(v => {
                                        if (v.turno == '1') {
                                            aulasM.push(v)
                                        } else if (v.turno == '2') {
                                            aulasT.push(v)
                                        }
                                    })
                                }

                                let diasin = docente.diasin.split('-') || []
                                let diasMS = []
                                let diasTS = []

                                diasin.forEach(function (b) {
                                    let nTurnoS = b.split('#')[0]
                                    let nDiaS = b.split('#')[1]

                                    if (nTurnoS == '1') {
                                        diasMS.push(nDiaS)
                                    } else if (nTurno == '2') {
                                        diasTS.push(nDiaS)
                                    }

                                })


                                let bloqueo = docente.bloqueo.split('-') || []
                                let diasMB = []
                                let diasTB = []
                                let aulasMB = []
                                let aulasTB = []

                                bloqueo.forEach(function (b) {
                                    let nTurno = b.split('#')[0]
                                    let nDia = b.split('#')[1]

                                    if (nTurno == '1') {
                                        diasMB.push(nDia)
                                    } else if (nTurno == '2') {
                                        diasTB.push(nDia)
                                    }

                                })


                                disponibilidad.forEach(function (d) {
                                    let turno = d.split('#')[0]
                                    let dia = d.split('#')[1]

                                    if (turno == '1') {
                                        diasM.push(dia)
                                    } else if (turno == '2') {
                                        diasT.push(dia)
                                    }
                                })

                                html += '<p class="col s12">'
                                html += '<table class="centered" id="tableDisponibilidad">'
                                html += '<thead>'
                                html += '<tr>'
                                html += '<td>TURNO</td>'
                                html += '<td id="dia">LUNES</td>'
                                html += '<td id="dia">MARTES</td>'
                                html += '<td id="dia">MIERCOLES</td>'
                                html += '<td id="dia">JUEVES</td>'
                                html += '<td id="dia">VIERNES</td>'
                                html += '<td id="dia">SABADO</td>'
                                html += '</tr>'
                                html += '</thead>'
                                html += '<tbody>'


                                html += '<tr>'
                                html += '<td id="turno">M</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasM.map(a => {
                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })

                                    if (diasM.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde" onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasMB.some(t => t == (i + 1))) {

                                        html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasMS.some(r => r == (i + 1))) {

                                        html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else {

                                        html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`
                                    }
                                }


                                html += '</tr>'

                                html += '<tr>'
                                html += '<td id="turno">T</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasT.map(a => {

                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })
                                    if (diasT.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde"  onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasTB.some(t => t == (i + 1))) {

                                        html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasTS.some(q => q == (i + 1))) {

                                        html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else {


                                        html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    }
                                }

                                html += '</tr>'

                                html += '</tbody>'
                                html += '</table>'
                                html += '</p>'


                            } else {
                                html += '<p>EL DOCENTE NO TIENE DISPONIBILIDAD REGISTRADA</p>'
                            }
                            html += `</div>`

                        } 
                        else {

                            html += '<div class="divider"></div>'
                            html += '<div class="section">'

                            html += '<h6 id="nombreDocente" style="font-weight:bold;">' + docente.nombre + '</h6>'
                            html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'
                            
                            
                            html +='<div class="form-control">'
                            html +='<div class="card grey lighten-2">'
                             html += '<div class="card-content black-text">'
                             //PRIMERA FILA
                             html += '<div class="row" style="margin-bottom:0px">'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">local_phone</i> <strong>' + docente.celular + '</strong></div>'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">school</i><strong> Puesto Nro: '+docente.puesto+'</strong></div>'
                                 html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_weak</i> <strong>Exa. Encuesta: '+docente.notaEncuesta+'</strong></div>'
                            html += '</div>'

                       //SEGUNDA FILA
                              html += '<div class="row" style="margin-bottom:0px">'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">room</i> <strong>' + docente.distrito + '</strong></div>'
                                 html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_strong</i> <strong> Exa. Academico: '+docente.examenNota+'</strong></div>'
                              html += '</div>'
                        //TERCERA  FILA      
                                 
                                 html += '<div class="row" style="margin-bottom:0px">'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">email</i> <strong>' + docente.correo + '</strong></div>'
                                 html += '<div class="input-field col s6"><i class="material-icons dp48">home</i> <strong>' + docente.direccion + '</strong></div>'
                                  
                              html += '</div>'
                                 
                               html += '</div>'
                               html += '</div>'
                               
                            html += '</div>'
                            
                            html += '<p></p>'
               
                            html += '<br>'




                            if (docente.disponibilidad) {

                                let disponibilidad = docente.disponibilidad.split('-') || []
                                let diasM = []
                                let diasT = []
                                let aulasM = []
                                let aulasT = []

                                if (docente.arrayAulas) {
                                    docente.arrayAulas.forEach(v => {
                                        if (v.turno == '1') {
                                            aulasM.push(v)
                                        } else if (v.turno == '2') {
                                            aulasT.push(v)
                                        }
                                    })
                                }

                                let diasin = docente.diasin.split('-') || []
                                let diasMS = []
                                let diasTS = []

                                diasin.forEach(function (b) {
                                    let nTurnoS = b.split('#')[0]
                                    let nDiaS = b.split('#')[1]

                                    if (nTurnoS == '1') {
                                        diasMS.push(nDiaS)
                                    } else if (nTurno == '2') {
                                        diasTS.push(nDiaS)
                                    }

                                })


                                let bloqueo = docente.bloqueo.split('-') || []
                                let diasMB = []
                                let diasTB = []
                                let aulasMB = []
                                let aulasTB = []

                                bloqueo.forEach(function (b) {
                                    let nTurno = b.split('#')[0]
                                    let nDia = b.split('#')[1]

                                    if (nTurno == '1') {
                                        diasMB.push(nDia)
                                    } else if (nTurno == '2') {
                                        diasTB.push(nDia)
                                    }

                                })


                                disponibilidad.forEach(function (d) {
                                    let turno = d.split('#')[0]
                                    let dia = d.split('#')[1]

                                    if (turno == '1') {
                                        diasM.push(dia)
                                    } else if (turno == '2') {
                                        diasT.push(dia)
                                    }
                                })

                                html += '<p class="col s12">'
                                html += '<table class="centered">'
                                html += '<thead>'
                                html += '<tr>'
                                html += '<td>TURNO</td>'
                                html += '<td id="dia">LUNES</td>'
                                html += '<td id="dia">MARTES</td>'
                                html += '<td id="dia">MIERCOLES</td>'
                                html += '<td id="dia">JUEVES</td>'
                                html += '<td id="dia">VIERNES</td>'
                                html += '<td id="dia">SABADO</td>'
                                html += '</tr>'
                                html += '</thead>'
                                html += '<tbody>'


                                html += '<tr>'
                                html += '<td id="turno">M</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasM.map(a => {
                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })

                                    if (diasM.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde" onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `

                                    } else if (diasMB.some(t => t == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    } else if (diasMS.some(r => r == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    } else {

                                        html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '
                                    }
                                }


                                html += '</tr>'

                                html += '<tr>'
                                html += '<td id="turno">T</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasT.map(a => {

                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })
                                    if (diasT.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde"  onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `


                                    } else if (diasTB.some(t => t == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    } else if (diasTS.some(q => q == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td>'

                                    } else {


                                        html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    }
                                }

                                html += '</tr>'

                                html += '</tbody>'
                                html += '</table>'
                                html += '</p>'

                            } 
                            else {
                                html += '<p>EL DOCENTE NO TIENE DISPONIBILIDAD REGISTRADA</p>'
                            }

                            html += `</div>`
                        }
                    })
                    document.querySelector('#divListaDisponibilidad').innerHTML = html
                }
            })

        }


       function peticionWith3Parameters(json) {

            $.ajax({
                url: '../ServletHorario?Accion=listarVistaDobleDisponibilidad',
                type: 'POST',
                dataType: 'json',
                data: {
                    json: JSON.stringify(json)
                },
                success: function (data, textStatus, jqXHR) {


                    let html = ''
                    let nTurno = []
                    let nDia = []
                    let mensaje = 'No registrado'
                    data.data.forEach(function (docente) {
                        if (typeof (docente.celular && docente.distrito) == "undefined") {

                            html += '<table>'
                            html += '<div class="divider"></div>'
                            html += '<div class="section">'

                            html += '<h6 id="nombreDocente">' + docente.nombre + '<span></span><span></span><span style="margin-left:650px;font-size:20px;color:#6C7807"><i class="small material-icons" title="Puesto" style="color:black;">grade</i><strong>No registrado</strong></span></h6>'
                            html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'

                            html += '<tr>'
                            html += '<p>Celular: No registrado</p>'
                            html += '<p>Distrito: No registrado</p>'
                            html += '<p>Direccion: No registrado</p>'
                            html += '<p>Correo: No registrado</p>'
                            html += '<p>Zona: No registrado</p>'
                            html += '</tr>'

                            html += '<br>'




                            if (docente.disponibilidad) {

                                let disponibilidad = docente.disponibilidad.split('-') || []
                                let diasM = []
                                let diasT = []
                                let aulasM = []
                                let aulasT = []

                                if (docente.arrayAulas) {
                                    docente.arrayAulas.forEach(v => {
                                        if (v.turno == '1') {
                                            aulasM.push(v)
                                        } else if (v.turno == '2') {
                                            aulasT.push(v)
                                        }
                                    })
                                }

                                let diasin = docente.diasin.split('-') || []
                                let diasMS = []
                                let diasTS = []

                                diasin.forEach(function (b) {
                                    let nTurnoS = b.split('#')[0]
                                    let nDiaS = b.split('#')[1]

                                    if (nTurnoS == '1') {
                                        diasMS.push(nDiaS)
                                    } else if (nTurno == '2') {
                                        diasTS.push(nDiaS)
                                    }

                                })


                                let bloqueo = docente.bloqueo.split('-') || []
                                let diasMB = []
                                let diasTB = []
                                let aulasMB = []
                                let aulasTB = []

                                bloqueo.forEach(function (b) {
                                    let nTurno = b.split('#')[0]
                                    let nDia = b.split('#')[1]

                                    if (nTurno == '1') {
                                        diasMB.push(nDia)
                                    } else if (nTurno == '2') {
                                        diasTB.push(nDia)
                                    }

                                })


                                disponibilidad.forEach(function (d) {
                                    let turno = d.split('#')[0]
                                    let dia = d.split('#')[1]

                                    if (turno == '1') {
                                        diasM.push(dia)
                                    } else if (turno == '2') {
                                        diasT.push(dia)
                                    }
                                })

                                html += '<p class="col s12">'
                                html += '<table class="centered" id="tableDisponibilidad">'
                                html += '<thead>'
                                html += '<tr>'
                                html += '<td>TURNO</td>'
                                html += '<td id="dia">LUNES</td>'
                                html += '<td id="dia">MARTES</td>'
                                html += '<td id="dia">MIERCOLES</td>'
                                html += '<td id="dia">JUEVES</td>'
                                html += '<td id="dia">VIERNES</td>'
                                html += '<td id="dia">SABADO</td>'
                                html += '</tr>'
                                html += '</thead>'
                                html += '<tbody>'


                                html += '<tr>'
                                html += '<td id="turno">M</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasM.map(a => {
                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })

                                    if (diasM.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde" onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasMB.some(t => t == (i + 1))) {

                                        html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasMS.some(r => r == (i + 1))) {

                                        html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else {

                                        html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`
                                    }
                                }


                                html += '</tr>'

                                html += '<tr>'
                                html += '<td id="turno">T</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasT.map(a => {

                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })
                                    if (diasT.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde"  onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasTB.some(t => t == (i + 1))) {

                                        html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else if (diasTS.some(q => q == (i + 1))) {

                                        html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    } else {


                                        html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

                                    }
                                }

                                html += '</tr>'
                                html += '</tbody>'
                                html += '</table>'
                                html += '</p>'


                            } else {
                                html += '<p>EL DOCENTE NO TIENE DISPONIBILIDAD REGISTRADA</p>'
                            }
                            html += `</div>`

                        } 
                        
                          else {

                            html += '<div class="divider"></div>'
                            html += '<div class="section">'

                            html += '<h6 id="nombreDocente" style="font-weight:bold;">' + docente.nombre + '<span></span><span></span> <span> </span>&nbsp;&nbsp; <a href="javascript:updateObservacion(this.value);" value=' + docente.observacion + '>' + docente.observacion + '</a></span></h6>'
                            html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'
                            
                              html +='<div class="form-control">'
                            html +='<div class="card grey lighten-2">'
                             html += '<div class="card-content black-text">'
                             //PRIMERA FILA
                             html += '<div class="row" style="margin-bottom:0px">'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">local_phone</i> <strong>' + docente.celular + '</strong></div>'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">school</i><strong> Puesto Nro:  '+docente.puesto+'</strong></div>'
                                 html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_weak</i> <strong>Exa. Encuesta '+docente.notaEncuesta+'</strong></div>'
                            html += '</div>'

                       //SEGUNDA FILA
                              html += '<div class="row" style="margin-bottom:0px">'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">room</i> <strong>' + docente.distrito + '</strong></div>'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">room</i> <strong>' + docente.zona + '</strong></div>'
                                 html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_strong</i> <strong> Exa. Academico '+docente.examen+'</strong></div>'
                              html += '</div>'
                        //TERCERA  FILA      
                                 
                                 html += '<div class="row" style="margin-bottom:0px">'
                                 html += '<div class="input-field col s3"><i class="material-icons dp48">email</i> <strong>' + docente.correo + '</strong></div>'
                                 html += '<div class="input-field col s6"><i class="material-icons dp48">home</i> <strong>' + docente.direccion + '</strong></div>'
                                  
                              html += '</div>'
                               html += '</div>'
                               html += '</div>'
                            html += '</div>'
                          
                            
                            html += '<p></p>'
                            html += '<br>'




                            if (docente.disponibilidad) {

                                let disponibilidad = docente.disponibilidad.split('-') || []
                                let diasM = []
                                let diasT = []
                                let aulasM = []
                                let aulasT = []

                                if (docente.arrayAulas) {
                                    docente.arrayAulas.forEach(v => {
                                        if (v.turno == '1') {
                                            aulasM.push(v)
                                        } else if (v.turno == '2') {
                                            aulasT.push(v)
                                        }
                                    })
                                }

                                let diasin = docente.diasin.split('-') || []
                                let diasMS = []
                                let diasTS = []

                                diasin.forEach(function (b) {
                                    let nTurnoS = b.split('#')[0]
                                    let nDiaS = b.split('#')[1]

                                    if (nTurnoS == '1') {
                                        diasMS.push(nDiaS)
                                    } else if (nTurno == '2') {
                                        diasTS.push(nDiaS)
                                    }

                                })


                                let bloqueo = docente.bloqueo.split('-') || []
                                let diasMB = []
                                let diasTB = []
                                let aulasMB = []
                                let aulasTB = []

                                bloqueo.forEach(function (b) {
                                    let nTurno = b.split('#')[0]
                                    let nDia = b.split('#')[1]

                                    if (nTurno == '1') {
                                        diasMB.push(nDia)
                                    } else if (nTurno == '2') {
                                        diasTB.push(nDia)
                                    }

                                })


                                disponibilidad.forEach(function (d) {
                                    let turno = d.split('#')[0]
                                    let dia = d.split('#')[1]

                                    if (turno == '1') {
                                        diasM.push(dia)
                                    } else if (turno == '2') {
                                        diasT.push(dia)
                                    }
                                })

                                html += '<p class="col s12">'
                                html += '<table class="centered">'
                                html += '<thead>'
                                html += '<tr>'
                                html += '<td>TURNO</td>'
                                html += '<td id="dia">LUNES</td>'
                                html += '<td id="dia">MARTES</td>'
                                html += '<td id="dia">MIERCOLES</td>'
                                html += '<td id="dia">JUEVES</td>'
                                html += '<td id="dia">VIERNES</td>'
                                html += '<td id="dia">SABADO</td>'
                                html += '</tr>'
                                html += '</thead>'
                                html += '<tbody>'


                                html += '<tr>'
                                html += '<td id="turno">M</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasM.map(a => {
                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })

                                    if (diasM.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde" onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `

                                    } else if (diasMB.some(t => t == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    } else if (diasMS.some(r => r == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    } else {

                                        html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '
                                    }
                                }


                                html += '</tr>'

                                html += '<tr>'
                                html += '<td id="turno">T</td>'

                                for (let i = 0; i < 6; i++) {
                                    let aulas = aulasT.map(a => {

                                        if (a.dia == i + 1) {
                                            return a.sede + ' - ' + a.aulas
                                        }
                                    })
                                    if (diasT.some(d => d == (i + 1))) {

                                        html += `<td class="colorVerde"  onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `


                                    } else if (diasTB.some(t => t == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    } else if (diasTS.some(q => q == (i + 1))) {

                                        html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td>'

                                    } else {

                                        html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

                                    }
                                }

                                html += '</tr>'

                                html += '</tbody>'
                                html += '</table>'
                                html += '</p>'

                            } else {
                                html += '<p>EL DOCENTE NO TIENE DISPONIBILIDAD REGISTRADA</p>'
                            }


                            html += `
                                                                                                    </div>
                                                                                                                                    `




                        }


                    })
                    document.querySelector('#divListaDisponibilidad').innerHTML = html
                }
            })

        }

        function btnDesactivarHorario(codDocente) {


            let question = confirm("¿Esta seguro de eliminar su horario ?");
            if (question) {
                console.log(codDocente)
                var periodo = "<%=periodo!=null?periodo.getCodigoPeriodo():""%>";

                desactivarHorario(codDocente, periodo)


            } else {
                console.log("cancel")
            }


        }

        function desactivarHorario() {

        }

        function colorChange(obj){


            let periodo = '<%= periodo!=null?periodo.getCodigoPeriodo():""%>'

            let codigoDoc = $(obj).parents('div.section').find('#codDocente').text();
            let nombreDoc = $(obj).parents('div.section').find('#nombreDocente').text();

            let turno = $(obj).parents('tr').find('#turno').text();

            let numeroTurno = 0;
            if (turno === "T") {
                numeroTurno = 2
            } else if (turno === "M") {
                numeroTurno = 1
            }


            let dia = $(obj).parent().children().index(obj);


            if ($(obj).hasClass('colorAzul')) {

                let question = confirm("¿Esta seguro de querer desbloquear el dia " + convertirDia(dia) + " ?");
                if (question) {

                    $.ajax({
                        url: '../ServletHorario?Accion=rollbackDisponibilidad',
                        type: 'POST',
                        data: {
                            codDocente: codigoDoc,
                            diaBloquear: dia,
                            periodo: periodo,
                            turno: numeroTurno

                        },
                        success: function (data, textStatus, jqXHR) {

                            if (data.trim() == 2) {

                                if ($(obj).hasClass('colorAzul')) {
                                    $(obj).removeClass('colorAzul');
                                    $(obj).addClass('colorRojo');
                                    mostrarSnackBarDesbloqueo();
                                }

                            } else if (data.trim() == 3) {
                                if ($(obj).hasClass('colorAzul')) {

                                    $(obj).removeClass('colorAzul');

                                    $(obj).addClass('colorVerde');
                                    mostrarSnackBarDesbloqueo();
                                }

                            }


                        }
                    })
                }

            } else {


                let question = confirm("¿Esta seguro de querer bloquear el dia " + convertirDia(dia) + " ?");

                if (question) {

                    //aqui realizar peticion AJAX
                    $.ajax({
                        url: '../ServletHorario?Accion=updateDisponibilidad',
                        type: 'POST',
                        data: {
                            codDocente: codigoDoc,
                            diaBloquear: dia,
                            periodo: periodo,
                            turno: numeroTurno

                        },
                        success: function (data, textStatus, jqXHR) {

                            if (data.trim() == 1) {

                                if ($(obj).hasClass('colorVerde')) {

                                    $(obj).removeClass('colorVerde');
                                    $(obj).addClass('colorAzul');
                                    mostrarSnackBar();
                                } else {
                                    $(obj).removeClass('colorRojo');
                                    $(obj).addClass('colorAzul');
                                    mostrarSnackBar();
                                }

                            } else {
                                console.log("error");
                            }


                        }
                    })




                } else {
                    window.exit();
                }
            }
//				$(obj).parents('tr').find('#changed').removeClass('red');
//				$(obj).parents('tr').find('#changed').addClass('blue');

        }

        function convertirDia(dia) {
            let diaLetras = "";
            switch (dia) {
                case 1:
                    diaLetras = "Lunes";
                    break;
                case 2:
                    diaLetras = "Martes";
                    break;
                case 3:
                    diaLetras = "Miercoles";
                    break;
                case 4:
                    diaLetras = "Jueves";
                    break;
                case 5:
                    diaLetras = "Viernes";
                    break;
                case 6:
                    diaLetras = "Sabado";
                    break;
                default :
                    break;

            }

            return diaLetras;
        }

        function mostrarSnackBar() {
            // Get the snackbar DIV
            var x = document.getElementById("snackbar");

            // Add the "show" class to DIV
            x.className = "show";

            // After 3 seconds, remove the show class from DIV
            setTimeout(function () {
                x.className = x.className.replace("show", "");
            }, 3000);
        }
        function mostrarSnackBarDesbloqueo() {
            // Get the snackbar DIV
            var x = document.getElementById("snackbar2");

            // Add the "show" class to DIV
            x.className = "show";

            // After 3 seconds, remove the show class from DIV
            setTimeout(function () {
                x.className = x.className.replace("show", "");
            }, 3000);
        }

        function listarPlana(select) {

            let codigoArea = select.value
            axios.get('../ServletPlana?Accion=cargarPlanaJson&codigoArea=' + codigoArea)
                    .then(data => {

                        let option = '<option value="">[SELECCIONE]</option>'
                        data.data.forEach(v => {
                            option += '<option value="' + v.cod_pla + '">' + v.nom_pla + '</option>'
                        })
                        document.querySelector('#cbPlana').innerHTML = option

                        instances.init(elems)
                        $("#btnBuscar").attr('enabled', 'enabled');
                    })
        }

        function pintarTDRed() {
            //alert("holii");
            $(".red").text("X");
        }

        function desactivarPrint() {
            $("#btnImprimir").attr('disabled', 'disabled');
        }
        function activarPrint() {
            $("#btnImprimir").attr('disabled', false);
        }

        function updateObservacion(obs) {
            let textObs = prompt("Ingresar Observación");
            if (textObs != null) {

                $.ajax({
                    type: 'POST',
                    url: '../ServletHorario?accion=updateObservacion',
                    data: {
                        observacion: textObs
                    }, success: function (data, textStatus, jqXHR) {
                        alert("Actualizado exitosamente !")
                    }
                })

            }
        }


    </script>
    <script src="js/pages/webSocketHorario.js" type="text/javascript"></script>



</body>
</html>


