@extends('layout')

@section('title', 'Consulta Vacaciones | ')

@section('content')

<link rel="stylesheet" href="{{asset('/css/app.css')}}">

<!-- Product section -->
<section class="py-5">
    <div class="container mt-3">
        <div class="row align-items-center">
            <div class="col-md-12 text-center py-2">
                <br>
                <h2><strong>Solicitud De Vacaciones</strong></h3>
            </div>
            <div class="mb-5">
            </div>
            <div class="col-md-6">
                 <img class="card-img-top mb-3 mb-md-0 shadow-lg mb-4 rounded" src="{{url('images/consideraciones-vacaciones.png')}}"   alt="condideraciones para solicitar vacaciones" />
            </div>
            <div class="col-md-6">
                
                <form method="POST" action="{{route('holidays.store')}}" onsubmit="return validateHolidayDate()" autocomplete="off">
                    @csrf
                    {{-- modal de carga --}}
                    <div id="loadHoliday" style="display: none">
                        <div  style="display: flex; justify-content: center; align-items: center; background-color:black; 
                                position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100%; height: 100%; opacity: .40">
                        <div class="la-ball-pulse la-2x">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-3">
                            <label for="id" class="font-weight-bold">Identificación</label>
                            <input class="form-control form-control-sm" type="text" id="id" name="id" onblur="searchEmploye()" required>
                            <input type="hidden" id="emailEmploye" name="emailEmploye">
                            <input type="hidden" id="emailBusinessEmploye" name="emailBusinessEmploye">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="name" class="font-weight-bold">Nombre Colaborador</label>
                            <input class="form-control form-control-sm" type="text" id="name" name="name" readonly>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="project" class="font-weight-bold">Proyecto</label>
                            <input class="form-control form-control-sm" type="text" id="project" name="project" readonly>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md">
                            <label for="projectDescription" class="font-weight-bold">Puesto</label>
                            <input class="form-control form-control-sm" type="text" id="projectDescription" name="projectDescription" readonly>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="campus" class="font-weight-bold">Sede</label>
                            <input class="form-control form-control-sm" type="text" id="campus" name="campus" readonly>
                        </div>
                        <div class="form-group col-md-8">
                            <label for="boss" class="font-weight-bold">Nombre del jefe inmediato </label>
                            <select id="boss" name="boss" class="form-control form-control-sm" required>
                                <option selected></option>
                            </select>
                            <input type="hidden" id="emailBoss" name="emailBoss">
                        </div>
                    </div>

                    <div class="alert alert-info" role="alert" id="available" style="display: none;">
                        Usted tiene <strong><em id="days_holiday" name="days_holiday"></em> </strong> días disponibles de vacaciones.
                        <input type="hidden" id="days_holiday_data" name="days_holiday_data">
                        <div id="notice" style="display: none">
                            <ul> 
                                <li><small>Por tener más de 30 días acumulados, puede solicitar el pago de vacaciones en dinero siempre y cuando cumpla con las condicones necesarias</small></li> 
                                
                                <li style="list-style-type: none">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="vacationPay">
                                        <small class="form-check-label" for="vacationPay">Marque esta opción si desea solicitar el pago de sus vacaciones</small>
                                    </div>
                                </li> 

                                <li style="list-style-type: none; display: none" id="divDaysPay" >
                                    <small>Ingrese cuantos días desea sean pagados en dinero</small>
                                    <input type="text" name="daysPay" id="daysPay" size="2" style="font-size: 11px">
                                </li> 
                            </ul>
                        </div>
                    </div>

                    <div class="alert alert-danger" role="alert" id="notAvailable" style="display: none;">
                        <strong>Solicitud rechazada</strong>
                        <ul> 
                            <li><small>Usted cuenta con <strong><em id="days_notHoliday" name="days_notHoliday"></em> </strong> días </small></li> 
                            <li><small>Para solicitar vacaciones debe contar con <strong> 5 </strong> o más días </small></li>
                        </ul>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="startDateHoliday" class="font-weight-bold">Fecha inicio vacaciones</label>
                            <input class="form-control form-control-sm" type="date" id="startDateHoliday" name="startDateHoliday" onblur="calculateDays()" required
                                min=2025-12-17                            >
                        </div>
                        <div class="form-group col-md-6">
                            <label for="endDateHoliday" class="font-weight-bold">Fecha fin vacaciones</label>
                            <input class="form-control form-control-sm" type="date" id="endDateHoliday" name="endDateHoliday" onblur="calculateDays()" required
                                min=2025-12-17                            >
                        </div>
                        <input type="hidden" id="dateComeBack" name="dateComeBack">
                    </div>

                    <div class="form-row align-items-end">
                        <div class="form-group col-md-6">
                            <label for="moneyAdvance" class="font-weight-bold">¿Requiere anticipo de dinero?</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="moneyAdvance" id="moneyAdvance1" value="Si" required>
                                <label class="form-check-label" for="moneyAdvance1">
                                Si
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="moneyAdvance" id="moneyAdvance2" value="No">
                                <label class="form-check-label" for="moneyAdvance2">
                                No
                                </label>
                            </div>
                        </div>
                        <div class="form-group col-md-6 text-center">
                            <button class="btn btn-block btn-info btn-sm" id="btnSubmitHoliday" name="btnSubmitHoliday">Enviar solicitud</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</section>

<script>

    //Metodo asincrono, muestra los datos del empleado segun la identificacion
    async function searchEmploye(){

        if($('input[name="id"]').val() != ""){

            var promise = $.ajax({
                url:'/consulta/vacaciones/empleado',
                method: 'POST',
                data:{
                    param1: $('input[name="id"]').val(),
                    _token: $('input[name="_token"]').val()
                }
            }).done(function(res){

                var data1 = JSON.parse(res);

                if(data1.length == 0){

                    Swal.fire({
                        icon: 'error',
                        html:
                            '<b>Error</b></br>' +
                            'La identifiación no se encontro o no esta registrada</br>' + 
                            'por favor valide e intente nuevamente</br>',
                        showCloseButton: true,
                        showConfirmButton: false,
                    });
                    
                    clearFields();
                    return false;
                }

                //data console log
                console.log(data1);
                //console.log((data1[0].NOMBRE))
    
                /* muestra los dias disponibles de vacaciones*/
                if(parseInt(data1[0].VACS_PENDIENTES) < 5){
    
                    $("#days_notHoliday").text(parseInt(data1[0].VACS_PENDIENTES));
                    $("#notAvailable").slideDown("slow");
                    $("#available").slideUp("slow");
                    $("#notice").slideUp("slow");
                    $("#btnSubmitHoliday").attr('disabled','disabled');
    
                }else{
                    if(parseInt(data1[0].VACS_PENDIENTES) >= 30){

                        $("#days_holiday").text(parseInt(data1[0].VACS_PENDIENTES));
                        $("#available").slideDown("slow");
                        $("#notice").slideDown("slow");
                        $("#notAvailable").slideUp("slow");
                        $("#btnSubmitHoliday").removeAttr('disabled');

                    }else{

                        $("#days_holiday").text(parseInt(data1[0].VACS_PENDIENTES));
                        $("#available").slideDown("slow");
                        $("#notice").slideUp("slow");
                        $("#notAvailable").slideUp("slow");
                        $("#btnSubmitHoliday").removeAttr('disabled');

                    }

                    
                }
                
                $("#id").val(data1[0].IDENTIFICACION);
                $("#emailEmploye").val(data1[0].E_MAIL);
                $("#emailBusinessEmploye").val(data1[0].E_MAIL_COORP);
                $("#name").val(data1[0].NOMBRE);
                $("#project").val(data1[0].DEPARTAMENTO);
                $("#projectDescription").val(data1[0].DESCRIPCION);
                $("#campus").val(data1[0].UBICACION);
    
            });
            // Luego de buscar al empleado, se extrae el proyecto al que pertenece
            // y se consulta un listado de posibles jefes inmediatos
            promise.then(function(){

                if($('input[name="project"]').val() == ""){
                    return false;
                }

                $.ajax({
                    url:'/consulta/vacaciones/empleado',
                    method: 'POST',
                    data:{
                        param2: $('input[name="project"]').val(),
                        param3: $('input[name="projectDescription"]').val(),
                        _token: $('input[name="_token"]').val()
                    }
                }).done(function(res2){

                    var data2 = JSON.parse(res2);
                    console.log(data2);

                    $("#boss").empty();
                    $('#boss').append('<option value=""></option>');
    
                    for (key in data2) {
                        $('#boss').append('<option value="' + data2[key].IDENTIFICACION + '">' + data2[key].NOMBRE + '</option>');
                    }
    
                });

            })

        }else{

            clearFields();

        }

    }

    const clearFields = () => {
        $("#name").val("");
        $("#project").val("");
        $("#days_holiday_data").val("");
        $("#dateComeBack").val("");
        $("#projectDescription").val("");
        $("#campus").val("");
        $("#notAvailable").slideUp("slow");
        $("#available").slideUp("slow");
        $("#boss").empty();
        $('#boss').append('<option value=""></option>');
    }

    //funcion para validar los dias de vacaciones
    const validateHolidayDate = () => {

        const loading = document.getElementById('loadHoliday');
        const btnSubmitHoliday = document.getElementById('btnSubmitHoliday');

        btnSubmitHoliday.disabled = true;
        loading.style.display = "block";

        var startDateHoliday = new Date($("#startDateHoliday").val() + ' 00:00:00');
        var endDateHoliday = new Date($("#endDateHoliday").val() + ' 00:00:00');
        //días causados/habilitados
        var daysEnabled = parseInt($("#days_holiday").text());
        //días solicitados
        var daysRequested = parseInt($("#days_holiday_data").val());
        var daysPay = "";

        if (endDateHoliday < startDateHoliday){

            Swal.fire({
                icon: 'error',
                html:
                    '<b>Error validando fechas</b></br>' +
                    'La fecha <strong>fin</strong> de vacaciones debe ser posterior </b> a la fecha <strong>inicio</strong> de vacaciones</br>' + 
                    'Por favor valide e intente nuevamente</br>',
                showCloseButton: true,
                showConfirmButton: false,
            })

            loading.style.display = "none"
            btnSubmitHoliday.disabled = false;

            return false;
        }

        var checkboxPay = document.getElementById('vacationPay');
        
        if(daysEnabled >= 30){

            if(checkboxPay.checked) {

                daysPay = parseInt($("#daysPay").val());
                console.log(daysPay);

                if(daysRequested > daysEnabled){

                    Swal.fire({
                        icon: 'warning',
                        html:
                            '<b>Advertencia!</b></br>' +
                            'Los días <b>solicitados</b> superan los días <b>causados</b></br>' + 
                            'Por favor valida e intente nuevamente</br>',
                        showCloseButton: true,
                        showConfirmButton: false,
                    })

                    loading.style.display = "none";
                    btnSubmitHoliday.disabled = false;

                    return false;
                }else{
                    if(daysPay >= (daysEnabled/2) || daysPay > daysRequested){
                        Swal.fire({
                            icon: 'warning',
                            html:
                                '<b>Advertencia!</b></br>' +
                                'No se cumple la condición para el pago de vacaciones, se debe garantizar el disfrute de la mitad de los días en tiempo</br>' + 
                                'Por favor valida e intente nuevamente</br>',
                            showCloseButton: true,
                            showConfirmButton: false,
                        })

                        loading.style.display = "none";
                        btnSubmitHoliday.disabled = false;

                        return false;

                    }else{
                        console.log(daysPay >= (daysEnabled/2))
                        console.log("envio de solicitud, con dias a pagar");
                        console.log('dias a pagar: '+ daysPay);
                        console.log('dias de vacaciones: '+ daysRequested);
                        console.log('dias causados: '+ daysEnabled);
                        console.log('APROBADO');
                        return true;
                    }
                }
            }
            else {
                console.log("no quiere pago de vacaciones en dinero")
                if(daysRequested > daysEnabled){

                    Swal.fire({
                        icon: 'warning',
                        html:
                            '<b>Advertencia!</b></br>' +
                            'Los días <b>solicitados</b> superan los días <b>causados</b></br>' + 
                            'Por favor valida e intente nuevamente</br>',
                        showCloseButton: true,
                        showConfirmButton: false,
                    })

                    loading.style.display = "none";
                    btnSubmitHoliday.disabled = false;

                    return false;
                }else{
                        console.log("envio de solicitud, sin dias a pagar");
                        console.log('dias de vacaciones: '+ daysRequested);
                        console.log('dias causados: '+ daysEnabled);
                        console.log('APROBADO');
                        return true;
                }
            }
        }else if (daysEnabled >= 5){  
            console.log(daysRequested > daysEnabled);
            if(daysRequested > daysEnabled){
                console.log(daysRequested);
                console.log(daysEnabled);
                Swal.fire({
                    icon: 'warning',
                    html:
                        '<b>Advertencia!</b></br>' +
                        'Los días <b>solicitados</b> superan los días <b>causados</b></br>' + 
                        'Por favor valida e intente nuevamente</br>',
                    showCloseButton: true,
                    showConfirmButton: false,
                })

                loading.style.display = "none";
                btnSubmitHoliday.disabled = false;

                return false;
            }else{
                console.log("envio de solicitud, normal");
                console.log('dias de vacaciones: '+ daysRequested);
                console.log('dias causados: '+ daysEnabled);
                console.log('APROBADO');
                return true;
            }
        }else{
            Swal.fire({
                icon: 'error',
                html:
                    '<b>Solicitud rechazada</b></br>' +
                    'Para solicitar vacaciones debe contar con <b>5</b> o más días</br>',
                showCloseButton: true,
                showConfirmButton: false,
            })

            loading.style.display = "none";
            btnSubmitHoliday.disabled = false;

            return false;
        }
    }

    async function calculateDays(){

        const loading = document.getElementById('loadHoliday');
        const btnSubmitHoliday = document.getElementById('btnSubmitHoliday');
        
        // si la fecha inicio vacaciones esta vacia, no se realiza el calculo
        if(!$("#startDateHoliday").val() || !$("#endDateHoliday").val()){

            return false;
        }

        var startDateHoliday = new Date($("#startDateHoliday").val() + ' 00:00:00');
        var endDateHoliday = new Date($("#endDateHoliday").val() + ' 00:00:00');
        var response

        // consulta asincrona de los dias festivos en la tabla festivos de la DB
        $.ajax({
                url:'/consulta/festivosColombia',
                method: 'POST',
                data:{
                    _token: $('input[name="_token"]').val()
                }
            }).done(function(res){

            response = JSON.parse(res);  
            
            //console.log(response);
            var sw = 1;
            var cont = 0;
            var day = startDateHoliday;
            var dayComeBack = endDateHoliday;
            var festivoColombia;

            if (endDateHoliday < startDateHoliday){

                Swal.fire({
                    icon: 'error',
                    html:
                        '<b>Error validando fechas</b></br>' +
                        'La fecha <strong>fin</strong> de vacaciones debe ser posterior </b> a la fecha <strong>inicio</strong> de vacaciones</br>' + 
                        'Por favor valide e intente nuevamente</br>',
                    showCloseButton: true,
                    showConfirmButton: false,
                })

                loading.style.display = "none"
                btnSubmitHoliday.disabled = false;

                return false;

            }         

            // ciclo para contar los días solicitados de vacaciones y validar la lista (variable response) de festivos,
            // esta funcion cuenta de lunes a sabados, ignorando dias festivos y domingos ya que estos no se cuentan.
            do {

                // variable day es la fecha de incio
                // variable endDateHoliday es la fecha de fin vacaciones
                // la variable day va a ir incrementando (sumando dias hasta llegar a la fecha fin)
                // si ambas variables son iguales el ciclo termina, asignando sw = 0
                if(day.getTime() == endDateHoliday.getTime())
                {   //console.log("fechas iguales");
                    sw = 0
                }else
                {
                    sw = 1
                    //console.log(sw);
                }
                
                var festivo = false;
                for (let i = 0; i < response.length; i++) {
                    
                    festivoColombia = new Date(response[i].date);
                    if(day.getTime() == festivoColombia.getTime()){
                        festivo = true;
                    }  
                }

                // si no es nestivo o domingo va acumulando los días.
                if(festivo != true && day.getDay() != 0){
                    cont = ++cont;
                }

                // aumenta 1 día
                day.setDate(day.getDate() + 1);

            } while (sw == 1);  

            // !!! NO CAMBIAR DE POSICION LA LINEA DE ABAJO, ya que cont vuelve y se inicializa en 0 y se pierden los dias
            //que se calcularon !!!
            $("#days_holiday_data").val(cont);

            console.log(cont);
            sw = 1; 
            cont = 0;

            // funcion para calcular el día en que regresa el empleado de sus vacaciones
            // se emplea para evitar que el dia de regreso sea un día festivo o domingo y
            // muestre el día mas cercano si se da el caso.
            do{

                // la variable day ya se encuentra con un valor = a la fecha fin
                if(day.getDay() == 0){
                    //console.log("es domingo!"); y aumenta 1 día.
                    day.setDate(day.getDate() + 1);
                }

                var festivo = false;

                for (let i = 0; i < response.length; i++) {
                    festivoColombia = new Date(response[i].date);
                    if(day.getTime() == festivoColombia.getTime()){
                        festivo = true;
                    }  
                }

                if(festivo == true){
                    //se aumenta 1 día
                    day.setDate(day.getDate() + 1);
                }

                // se crea un contador para controlar el ciclo, ya que no hay mas de 4 festivos seguidos
                cont = cont + 1;
                if(cont == 3 && festivo == false){
                    sw = 0;
                }

            } while (sw == 1);

            // se lleva el valor a la variable dateComeBack la fecha de regreso.
            let formatted_date = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate()
            $("#dateComeBack").val(formatted_date);
            console.log(formatted_date)
        })
    }

    $('#vacationPay').change(function () {
        if($(this).prop('checked') == true) {
            $("#divDaysPay").slideDown("slow");
            document.getElementById('daysPay').required = true;
        }
        else {
            $("#divDaysPay").slideUp("slow");
            $("#daysPay").val("");
            document.getElementById('daysPay').required = false;
        }
    });

    jQuery(document).ready(function(){
        // Listen for the input event.
        jQuery("#daysPay").on('input', function (evt) {
            // Allow only numbers.
            jQuery(this).val(jQuery(this).val().replace(/[^0-9]/g, ''));
        });
    });

</script>

@endsection