@extends('layouts.app')

@section('content')

        <article>
            
            <div class="calendar-cont">
                <div class="calendar-body">
                    <div class="wrapper">
                        <div class="calendar-header">
                            <div class="calendar-header-left">
                                <h2 id="current-year"></h2>
                            </div>
                            <div class="calendar-header-center">
                                <h2 id="current-month"></h2>
                            </div>
                            <div class="calendar-header-right">
                                <button id="prev" class="calendar-header-bt-left"><i class="bi bi-caret-left-fill"></i></button>
                                <button id="next" class="calendar-header-bt-right"><i class="bi bi-caret-right-fill"></i></button>
                            </div>
                        </div>
                        <div class="calendar">
                            <ul class="weeks">
                                <li>Lunes</li>
                                <li>Martes</li>
                                <li>Miercoles</li>
                                <li>Jueves</li>
                                <li>Viernes</li>
                                <li>Sabado</li>
                                <li>Domingo</li>
                            </ul>
                            <ul class="days"></ul>
                        </div>
                    </div>
                    <div class="calendar-detalle-cont">
                        <div class="calendar-detalle-dia" id="detalle-title"></div>
                        <hr>
                        <div class="calendar-detalle-body" id="detalle-body">

                        </div>
                    </div>
                </div>
            </div>
        </article>
        <div class="loader-back" id="loader-back">
            <div class="loader" id="loader"></div>
        </div>
    <script>
        const daysTag = document.querySelector(".days"),
        currentMonth = document.getElementById("current-month"),
        currentYear = document.getElementById("current-year"),
        prevNextIcon = [document.getElementById("next"), document.getElementById("prev")];

        // getting new date, current year and month
        let date = new Date(),
        currYear = date.getFullYear(),
        currMonth = date.getMonth();

        // storing full name of all months in array
        const months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

        const renderCalendar = () => {
            let firstDayofMonth = new Date(currYear, currMonth, 0).getDay(), // getting first day of month
            lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(), // getting last date of month
            lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(), // getting last day of month
            lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate(); // getting last date of previous month
            let liTag = "";

            for (let i = firstDayofMonth; i > 0; i--) { // creating li of previous month last days
                liTag += `<li class="inactive">${lastDateofLastMonth - i + 1}</li>`;
            }

            for (let i = 1; i <= lastDateofMonth; i++) { // creating li of all days of current month
                // adding active class to li if the current day, month, and year matched
                let isToday = i === date.getDate() && currMonth === new Date().getMonth() 
                            && currYear === new Date().getFullYear() ? "active" : "";
                liTag += `<li onclick="selectDay(${currYear}, ${currMonth + 1}, ${i})" id='${currYear}-${currMonth}-${i}' class="${isToday}">${i}</li>`;
                
            }
            currentMes=currMonth + 1
            console.log(currYear)
            if(currentMes>date.getMonth()+2 || currYear<date.getFullYear()){
                document.getElementById("loader-back").style.display="none"
            }
            else{
                let data={
                    'month': currentMes,
                    'year': currYear
                    }
                fetch("{{route('datosCalendario')}}", {
                    headers:{
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "X-Requested-With": "XMLHttpRequest",
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    method:'POST',
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(function(result){
                    // console.log(JSON.stringify(result.num_inc))
                    for (let i = 1; i <= lastDateofMonth; i++) {
                        text=""
                        
                        n=0
                        while (n < result.num_inc[i-1].num_inc && n<10) {
                            text+=`<i style="color: #d44e4e" class="bi bi-circle-fill"></i>`
                            n ++;
                        }
                        n=0
                        while (n < result.num_eve[i-1].num_eve && n<10) {
                            text+=`<i style="color: #8ed4f5" class="bi bi-circle-fill"></i>`
                            n ++;
                        }
                        document.getElementById(currYear + "-" + currMonth + "-" + i).innerHTML+=`<div class='calendar-iconos'>`+ text + `</div>`
                        if(i==30){
                        document.getElementById("loader-back").style.display="none"
                    }
                    }   
                                     
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
                

            for (let i = lastDayofMonth; i < 6; i++) { // creating li of next month first days
                liTag += `<li class="inactive">${i - lastDayofMonth + 1}</li>`
            }
            currentMonth.innerText = `${months[currMonth]} `; // passing current mon and yr as currentMonth text
            currentYear.innerText = `${currYear} `;
            daysTag.innerHTML = liTag;
        }

        window.addEventListener('load', function() {
            renderCalendar();
        });
        

        prevNextIcon.forEach(icon => { // getting prev and next icons
            icon.addEventListener("click", () => { // adding click event on both icons
                // if clicked icon is previous icon then decrement current month by 1 else increment it by 1
                currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;

                if(currMonth < 0 || currMonth > 11) { // if current month is less than 0 or greater than 11
                    // creating a new date of current year & month and pass it as date value
                    date = new Date(currYear, currMonth, new Date().getDate());
                    currYear = date.getFullYear(); // updating current year with new date year
                    currMonth = date.getMonth(); // updating current month with new date month
                } else {
                    date = new Date(); // pass the current date as date value
                }
                document.getElementById("loader-back").style.display="block"
                renderCalendar(); // calling renderCalendar function
            });
        });

        function filterFunction() {
            var input, filter, ul, li, a, i;
            input = document.getElementById("input_search");
            filter = input.value.toUpperCase();
            div = document.getElementById("incidencias");
            a = div.getElementsByTagName("a");
            for (i = 0; i < a.length; i++) {
                txtValue = a[i].textContent || a[i].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                a[i].style.display = "";
                } else {
                a[i].style.display = "none";
                }
            }
        }

        function selectInc(id){
            document.getElementById("input_search").value=id
            document.getElementById("input_search").innerHTML=document.getElementById("select_"+id).innerHTML
            console.log(id)
        }

        function delay(milliseconds){
            return new Promise(resolve => {
                setTimeout(resolve, milliseconds);
            });
        }
        
        function selectDay(year, month, day){
            document.getElementById("detalle-body").innerHTML=
            `<div class="text-center"><div class="spinner-border" style="width: 30px; height: 30px;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div></div>`
            document.getElementById("detalle-title").innerHTML=day + " de " + months[month-1] + " del " + year
            console.log(year + "-" + month + "-" + day)
                let data={
                    'day': year + "-" + month + "-" + day
                    }
                    fetch("{{route('datosDia')}}", {
                    headers:{
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "X-Requested-With": "XMLHttpRequest",
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    method:'POST',
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(function(result){
                    console.log(result)
                    text_dia=`
                    <button onclick="nuevoEvento()" class="nuevo-evento-bt" id="nuevo-evento-bt">
                    <i class="bi bi-calendar-plus"></i> Añadir un nuevo evento
                    </button>
                    <div id="nuevo-evento-cont" class="nuevo-evento-cont">
                        <label for="">Nombre del evento</label>
                        <input id="nombre-evento" type="text">
                        <label for="">Descripcion del evento</label>
                        <textarea name="desc-evento" id="desc-evento" cols="30" rows="10"></textarea>
                        <label for="">Hora</label><input id="hora" type="time"/>
                        <div id="incidencias" class="incidencias-list-content">
                            <input type="text" placeholder="Buscar.." id="input_search" onfocus="document.getElementById('incidencias-list-options').style.height='150px'" onfocusout="document.getElementById('incidencias-list-options').style.height='0px'" onkeyup="filterFunction()">
                            <div class="incidencias-list-options" id="incidencias-list-options">`
                                result.incidencias_all.forEach(incidencia=>{
                                    text_dia+=`<button id="select_${incidencia.id}" onclick="selectInc(${incidencia.id})">NEC_${incidencia.id} | ${incidencia.titulo}</button>`
                                })
                    text_dia+=`</input></div>
                        </div>
                        <div class="nuevo-evento-tools-cont">
                            <button class="nuevo-evento-tool"><i class="bi bi-share-fill"></i> Compartir</button>
                        </div>
                        <button class="nuevo-evento-guardar" onclick="crearEvento(${year},  ${month}, ${day})">Guardar</button>
                    </div>`                    
                    if(result.incidencias.length>0 || result.eventos.length>0){
                        result.incidencias.forEach(incidencia=>{
                            text_dia+=`<div class="evento-detalle-dia" onclick="window.location.href='necesidad?id='+${incidencia.id}"><i class="bi bi-alarm detalle-dia-point"></i>Fecha limite de NEC_${incidencia.id}</div>`
                        })

                        result.eventos.forEach(evento=>{
                            text_dia+=
                            `<div onclick="expandEvento(${evento.id})" id="${evento.id}" class="evento-cont">
                                <div class="evento-cont-title">
                                    <i style="color: #8ed4f5;" class="bi bi-calendar-event detalle-dia-point"></i>
                                    <span>${evento.name}</span>
                                    <i id="icon_${evento.id}" class="bi bi-chevron-right"></i>
                                </div>
                                
                                <div id="desc_${evento.id}" class="evento-cont-desc">
                                    <strong>Hora:</strong> ${evento.hora.slice(0, 5)}
                                    <br>
                                    <strong>Descripcion:</strong>
                                    <br>
                                    ${evento.descripcion}
                                </div>
                            </div>`;
                        })
                    }
                    else{
                        text_dia=`<button onclick="nuevoEvento()" class="nuevo-evento-bt" id="nuevo-evento-bt"><i class="bi bi-calendar-plus"></i> Añadir un nuevo evento</button><div id="nuevo-evento-cont" class="nuevo-evento-cont"><label for="">Nombre del evento</label><input id="nombre-evento" type="text"><label for="">Descripcion del evento</label><textarea name="desc-evento" id="desc-evento" cols="30" rows="10"></textarea><label for="">Hora</label><input id="hora" type="time"/><button class="nuevo-evento-guardar" onclick="crearEvento(${year},  ${month}, ${day})">Guardar</button></div><div class="text-center"><span class='message-detalle-dia'><i class="bi bi-exclamation-circle"></i> No hay ningun evento este dia</span></div>`
                    }
                    document.getElementById("detalle-body").innerHTML=text_dia
                })
        }

        selectDay({{date("Y")}}, {{date("n")}}, {{date("d")}})

        function nuevoEvento(){
            document.getElementById("nuevo-evento-cont").style.height="500px"
            document.getElementById("nuevo-evento-bt").style.borderBottomLeftRadius="0px"
            document.getElementById("nuevo-evento-bt").style.borderBottomRightRadius="0px"
            document.getElementById("nuevo-evento-cont").style.border="1px solid rgba(107, 107, 107, 0.17)"
            document.getElementById("nuevo-evento-cont").style.boxShadow="rgba(107, 107, 107, 0.17) 0px 0px 4px 1px"
            document.getElementById("nuevo-evento-cont").style.padding="10px"
            document.getElementById("nuevo-evento-bt").style.boxShadow="rgba(107, 107, 107, 0.17) 0px 0px 4px 1px"
        }

        function crearEvento(año, mes, dia){
            let data={
                'fecha': año + "-" + mes + "-" + dia,
                'hora': document.getElementById("hora").value,
                'nombre': document.getElementById("nombre-evento").value,
                'descripcion': document.getElementById("desc-evento").value
                }
                console.log(data)
                fetch("{{route('crearEvento')}}", {
                headers:{
                "Content-Type": "application/json",
                "Accept": "application/json, text-plain, */*",
                "X-Requested-With": "XMLHttpRequest",
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                method:'POST',
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(function(result){
                selectDay(año, mes, dia)
                renderCalendar()
            })
            .catch(function (error) {
                
                });
        }

        function expandEvento(id){
            document.getElementById("icon_"+id).style.rotate="90deg"
            document.getElementById("desc_"+id).style.maxHeight="fit-content"
            document.getElementById("desc_"+id).style.padding="15px"
            document.getElementById(id).setAttribute("onclick", "contraerEvento("+id+")")
        }

        function contraerEvento(id){
            document.getElementById("icon_"+id).style.rotate="0deg"
            document.getElementById("desc_"+id).style.maxHeight="0px"
            document.getElementById("desc_"+id).style.padding="0px"
            document.getElementById(id).setAttribute("onclick", "expandEvento("+id+")")
        }

    </script>
@endsection