@extends('layouts.app')

@section('content')

    <div>
    @include('common.errors')
        <script>
            var properties = [];
            var id_houses = [];
            var bookings = [];
            var blocks = [];
            var date_bookings = [];
            var date_blocks = [];
            var ruolo = $('#a_category').val();
            var house_description = [];
            var house_sorting = [];
            
            $( function(){

                $('#properties option').each(function(i){ //raccoglie l'oggetto con tutte le proprietà presente nella 1a SELECT
                    properties[i] = $(this).val(); 
                    var house = $(this).text().split("/");
                    
                    id_houses[i] = house[0];
                    house_description[i] = house[1];
                    house_sorting[i] = house[2];
                });
                
                $('#bookings option').each(function(x){ //raccoglie l'oggetto con tutte le proprietà presente nella 2a SELECT
                    bookings[x] = $(this).val();
                    date_bookings[x] = $(this).text();
                });
                
                $('#blocks option').each(function(x){ //raccoglie l'oggetto con tutte le proprietà presente nella 3a SELECT
                    blocks[x] = $(this).val();
                    date_blocks[x] = $(this).text();
                });
                
            //  var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                var days = ['0','1','2','3','4','5','6'];
                   
                cal_months_labels = ['January', 'February', 'March', 'April',
                 'May', 'June', 'July', 'August', 'September',
                 'October', 'November', 'December'];
             
               
                
                // these are the days of the week for each month, in order
                cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

                // this is the current date
                cal_current_date = new Date();
                
                months_colors = ['rgba(249, 66, 97, 1)','rgba(211, 180, 247, 1)', ' rgba(156, 155, 248, 1)', 'rgba(248, 145, 126, 1)',
                 'rgba(248, 242, 180, 1)', 'rgba(134, 238, 179, 1)', 'rgba(211, 180, 247, 1)', 'rgba(156, 155, 248, 1)', 'rgba(248, 145, 126, 1)',
                 'rgba(248, 242, 180, 1)', 'rgba(211, 180, 247, 1)', 'rgba(249, 66, 97, 1)'];

                function Calendar(month, year) {
                    this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
                    this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
                    this.html = '';
                }

                Calendar.prototype.generateHTML = function () {

                    // get first day of month
                    //var firstDay = new Date((new Date().getFullYear(), 0, 1));
                    //var firstDay = new Date(this.year, this.month, 1);
                    //var startingDay = firstDay.getDay();

                    // find number of days in month
                    var monthLength = cal_days_in_month[this.month];

                    // compensate for leap year
                    if (this.month == 1) { // February only!
                        if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) {
                            monthLength = 29;
                        }
                    }

                    // do the header
                    var html = "<div id='firstTable'>";
                    html += '<div class="table-responsive col-md-3" style="padding:0"><table id="calendarMonthsTable" class="table" style="width:100%;overflow:hidden;">';
                    html += '<tr><td width="100%"><p style="font-weight:bold;color:rgba(91, 192, 222, 1);width:11em;margin:0;">CALENDARIO</p></td><td width="100%" height="20"><p style="font-weight:bold;color:rgba(91, 192, 222, 1);width:11em;margin:0;"></p></td></tr>';
                    for(var x=0; x < properties.length; x++){
                        html += '<tr>';
                        if(isOdd(parseInt(house_sorting[x])) == 1){ //se dispari colora di azzurro
                            html += '<td style="background-color:#CCE8FF;font-size:0.6em;padding:9px;">'+house_description[x]+'</td>';
                            html += '<td style="background-color:#CCE8FF;border-left:1px solid grey;font-size:0.6em;padding:9px;">'+properties[x]+'</td>'; // inserisco i nomi delle proprietà
                        }else{
                            html += '<td style="font-size:0.6em;padding:9px;">'+house_description[x]+'</td>';
                            html += '<td style="border-left:1px solid grey;font-size:0.6em;padding:9px;">'+properties[x]+'</td>'; // inserisco i nomi delle proprietà
                        }
                        html += '</tr>';
                    }
                    html += '</table></div>';   //FINE DELLA PRIMA TABELLA (NOMI DELLE PROPRIETA')
                    html += '<div class="col-md-9 scrolled-td-table-wrapper" style="padding:0"><table id="calendarTable" class="table table-striped table-bordered nowrap display stripe fixed_headers row-border order-column" style="width:100%;margin-bottom:0;" cellspacing="0"><tr>';
                    var year = this.year;    
                    for(var cal=0; cal<cal_months_labels.length; cal++){
                        var monthName = cal_months_labels[cal];
                        var monthLength = cal_days_in_month[cal];
                        var temp = cal+1;
                        html += '<th id="month'+ temp +'" height="20" style="background-color:' + months_colors[cal]+';height:100%; border-style:solid; border-width:medium; border-color:white;" colspan="'+monthLength+'">';                    
                        html += '<div align=center style="style="height:100%,font-weight:bold;font-size:70%;>';                    
                        html += '<font color="black">'+monthName + "&nbsp;" + year + '</font>';
                        html += '</div>';  
                        html += '</th>';

                    }//end of month title calendar loop

                    html += '</tr><tr>';
                    for(var x=0; x<properties.length; x++){
                        html += '</tr><tr>';
                       
                        for(var y=0; y<cal_months_labels.length; y++){  //ciclo dei mesi 1 -> 12       
                            var currentTime = new Date();
                            var year = currentTime.getFullYear(); //anno corrente
                            
                            var now = new Date(year, y, 1); //anno - mese - giorno
                            var firstDayOfMonth = days[ now.getDay() ];  //seleziona il 1* giorno del mese (0 = Sunday)
                            
                            var firstSunday = 7 - firstDayOfMonth;
                                    
                            var day = 1;
                            var month_number = y;
                            
                            month_number = month_number + 1;
                            var month = "" + month_number;
                            if ( month.length == 1){ 
                                month = 0 + month;
                            }
                            
                            var monthLength = cal_days_in_month[y];
                           
                            for(var cal=0; cal < monthLength; cal++){ //ciclo dei giorni 1 -> 30
                                var formatDay = "" + day;
                                if ( formatDay.length == 1){
                                    formatDay = 0 + formatDay;
                                }

                                if (  cal == 0 && parseInt(firstDayOfMonth) == 0 ){
                                    html += '<td class="tdDaySunday" style="border-style=solid;border-width: 3px 3px 3px 3px;border-color: blue;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                }else{
                                    if (  cal == parseInt(firstSunday) || cal == parseInt(firstSunday)+7 || cal == parseInt(firstSunday)+14 || cal == parseInt(firstSunday)+21 || cal == parseInt(firstSunday)+28 ){
                                        html += '<td class="tdDaySunday" style="border-style=solid;border-width: 3px 3px 3px 3px;border-color: blue;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                    }else{
                                        html += '<td style="border:1px solid black;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                    }
                                }
                                html += day;

                                html += '</td>';;

                                day++;
                              // fill in the days
                            }//end of calendar
                            lastMonthLength = monthLength;
                        }//end of calendar loop
                    } // loop proprietà
                    html += '</tr></table></div>'; //FINE DELLA SECONDA TABELLA (GIORNI DEL CALENDARIO)
                    html += '<div class="col-md-3"></div>';
                    html += '<div class="col-md-9" style="padding:0"><table id="subMonths" class="table" style="overflow:hidden;"><tr>'; //CREAZIONE DEI MESI SOTTO IL CALENDARIO

                    for(var cal=0; cal<cal_months_labels.length; cal++){
                        var monthName = cal_months_labels[cal];
                        var monthLength = cal_days_in_month[cal];
                        var temp = cal+1;
                        html += '<th id="subMonth'+temp+'" style="background-color:'+months_colors[cal]+';border-style:solid;border-width:medium;border-color:white;" colspan="'+monthLength+'">';                    
                        html += '<div align=center>';                    
                        html += '<font color="black">'+monthName+"&nbsp;"+this.year+'</font>';
                        html += '</div>';  
                        html += '</th>';
                    }//end 
                    html += '</tr></table></div>';
                    html += '<div align="center"><button id="next_year" class="btn btn-md btn-info">ANNO SUCCESSIVO</button></div><br>';
                    html += '</div>'; //chiusura della firstTable
                   
                    this.html = html;
                }
                
                Calendar.prototype.getHTML = function () {
                    return this.html;
                }
                
                var cal = new Calendar();
                cal.generateHTML();
                //document.getElementById("calendar").innerHTML = cal.getHTML();
                $(".wmd-view").after( cal.getHTML()); // PORTA TUTTO IL CODICE HTML ALL'INTERNO DI QUESTO DIV
                
                var idDayIn;
                var idDaOut;
                
                for(var z=0; z<bookings.length; z++){  //CARICO LE PRENOTAZIONI IN VERDE SUL CALENDARIO
                    var newDate = date_bookings[z].split("/");
                    
                    var dateFormat1 = newDate[0];
                    var dateFormat2 = newDate[1];
                    
                    var date1 = new Date( dateFormat1 );
                    var date2 = new Date( dateFormat2 );
                    
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    
                    var checkinBooking = dateFormatFn(newDate[0]);
                    var checkoutBooking = dateFormatFn(newDate[1]);
                    var checkin = dateFormatFn(newDate[0]).replace("-","");
                    var checkout = dateFormatFn(newDate[1]).replace("-","");
                    
                    idDayIn = "#" + bookings[z]+checkin.replace("-","");
                    idDaOut = "#" + bookings[z]+checkout.replace("-","");

                    $(idDayIn).css("background-color","green");
                    var valDate = $(idDayIn).html();
                    $(idDayIn).html('<a href="#" style="color:black" onclick="getDataBooking('+newDate[2]+')">'+valDate+'</a>');
                    $(idDaOut).css("background-color","green");
                    
                    var splitDataIn = checkinBooking.split("-");
                    var splitDataOut = checkoutBooking.split("-");
                    for(var k=1; k<diffDays; k++){
                        var iterator = parseInt(splitDataIn[0])+k; //ad ogni ciclo aumento il numero del giorno
                       
                        if ( iterator.toString().length == 1){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                       
                        idDayIn =  "#" + bookings[z] + iterator + splitDataIn[1] + splitDataIn[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDayIn).css("background-color","red");
                    }
                    for(var k=diffDays-1; k>1; k--){ // RISOLVE PROBLEMA DI PRENOTAZIONE A CAVALLO TRA 2 MESI
                        var iterator = parseInt(splitDataOut[0])-k;
                      
                        if ( iterator.toString().length == 1 ){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                      
                        idDaOut =  "#" + bookings[z] + iterator + splitDataOut[1] + splitDataOut[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDaOut).css("background-color","red");
                    }
                }
                for(var z=0; z<blocks.length; z++){ //CARICO I BLOCCHI IN GIALLO SUL CALENDARIO
                    var newDate = date_blocks[z].split("/");
                    
                    var dateFormat1 = newDate[0];
                    var dateFormat2 = newDate[1];
                    
                    var date1 = new Date( dateFormat1 );
                    var date2 = new Date( dateFormat2 );
                    
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    
                    var checkinBooking = dateFormatFn(newDate[0]);
                    var checkoutBooking = dateFormatFn(newDate[1]);
                    var checkin = dateFormatFn(newDate[0]).replace("-","");
                    var checkout = dateFormatFn(newDate[1]).replace("-","");
                    
                    idDayIn = "#" + blocks[z]+checkin.replace("-","");
                    idDaOut = "#" + blocks[z]+checkout.replace("-","");
        
                    $(idDayIn).css("background-color","green");
                    $(idDaOut).css("background-color","green");
                    
                    var splitDataIn = checkinBooking.split("-");
                    var splitDataOut =checkoutBooking.split("-");
                    for(var k=1; k<diffDays; k++){
                        var iterator = parseInt(splitDataIn[0])+k;
                       
                        if ( iterator.toString().length == 1){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                       
                        idDayIn =  "#" + blocks[z] + iterator + splitDataIn[1] + splitDataIn[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre

                        $(idDayIn).css("background-color","yellow");
                    }
                    for(var k=diffDays-1; k>1; k--){ // RISOLVE PROBLEMA DI PRENOTAZIONE A CAVALLO TRA 2 MESI
                        var iterator = parseInt(splitDataOut[0])-k;
                      
                        if ( iterator.toString().length == 1 ){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                      
                        idDaOut =  "#" + bookings[z] + iterator + splitDataOut[1] + splitDataOut[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDaOut).css("background-color","red");
                    }
                }
                /****** GESTIONE MOVIMENTI SCROLLBAR ******/
                $("#calendarTable").scroll(function(){
                    $("#calendarMonthsTable").scrollTop($("#calendarTable").scrollTop());
                    $("#subMonths").scrollLeft($("#calendarTable").scrollLeft());
                });
                
                var widthNav = $(".navbar").width() + "px";
                var widthTable = $("#calendarTable tbody").width() + "px";
                $(".wmd-view-topscroll").css("width", widthNav);
                $("#calendarTable").css("width", widthNav);
                $(".scroll-div1").css("width", widthTable);
                
                for(var cal=0; cal < 12; cal++){ //ASSOCIO LA STESSA LUNGHEZZA DEI PRIMI DIV DEI MESI AI SECONDI
                   var temp = cal + 1;
                   var test = "#month"+temp;
                   var widthMonth = $(test).find("div").width() + "px";

                   var test1 = "#subMonth"+temp;
                   $(test1).find("div").css("width", widthMonth);
                }//
            }); 
            
            $( function(){ // SECONDO ANNO
                $('#properties option').each(function(i){ //raccoglie l'oggetto con tutte le proprietà presente nella 1a SELECT
                    properties[i] = $(this).val(); 
                    var house = $(this).text().split("/");
                    
                    id_houses[i] = house[0];
                    house_description[i] = house[1];
                    house_sorting[i] = house[2];
                });
                
                $('#bookings option').each(function(x){ //raccoglie l'oggetto con tutte le proprietà presente nella 2a SELECT
                    bookings[x] = $(this).val();
                    date_bookings[x] = $(this).text();
                });
                
                $('#blocks option').each(function(x){ //raccoglie l'oggetto con tutte le proprietà presente nella 3a SELECT
                    blocks[x] = $(this).val();
                    date_blocks[x] = $(this).text();
                });
                
            //  var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                var days = ['0','1','2','3','4','5','6'];
                
                cal_months_labels = ['January', 'February', 'March', 'April',
                 'May', 'June', 'July', 'August', 'September',
                 'October', 'November', 'December'];

                // these are the days of the week for each month, in order
                cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

                // this is the current date
                cal_current_date = new Date();
                
                months_colors = ['rgba(249, 66, 97, 1)','rgba(211, 180, 247, 1)', ' rgba(156, 155, 248, 1)', 'rgba(248, 145, 126, 1)',
                 'rgba(248, 242, 180, 1)', 'rgba(134, 238, 179, 1)', 'rgba(211, 180, 247, 1)', 'rgba(156, 155, 248, 1)', 'rgba(248, 145, 126, 1)',
                 'rgba(248, 242, 180, 1)', 'rgba(211, 180, 247, 1)', 'rgba(249, 66, 97, 1)'];

                function Calendar(month, year) {
                    this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
                    this.year = (isNaN(year) || year == null) ? parseInt(cal_current_date.getFullYear())+1 : year; 
                    /***** parseInt(cal_current_date.getFullYear())+1 permette di gestire il calendario dell'anno successivo  ***/
                    this.html = '';
                }

                Calendar.prototype.generateHTML = function () {
                    // get first day of month
                    //var firstDay = new Date((new Date().getFullYear(), 0, 1));
                    //var firstDay = new Date(this.year, this.month, 1);
                    //var startingDay = firstDay.getDay();

                    // find number of days in month
                    var monthLength = cal_days_in_month[this.month];

                    // compensate for leap year
                    if (this.month == 1) { // February only!
                        if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) {
                            monthLength = 29;
                        }
                    }

                    var html = "<div id='secondTable' class='hide'>";
                    html += '<div class="col-md-3" style="padding:0"><table id="calendarMonthsTable2" class="table" style="width:100%;overflow:hidden;">';
                    html += '<tr><td height="20"><p style="font-weight:bold;color:rgba(91, 192, 222, 1);width:11em;margin:0;">CALENDARIO</p></td><td height="20"><p style="font-weight:bold;color:rgba(91, 192, 222, 1);width:11em;margin:0;"></p></td></tr>';
                    for(var x=0; x < properties.length; x++){
                        html += '<tr>';
                        if(isOdd(parseInt(house_sorting[x])) == 1){ //se dispari colora di azzurro
                            html += '<td style="background-color:#CCE8FF;font-size:0.6em;padding:9px;">'+house_description[x]+'</td>';
                            html += '<td style="background-color:#CCE8FF;border-left:1px solid grey;font-size:0.6em;padding:9px;">'+properties[x]+'</td>'; // inserisco i nomi delle proprietà
                        }else{
                            html += '<td style="font-size:0.6em;padding:9px;">'+house_description[x]+'</td>';
                            html += '<td style="border-left:1px solid grey;font-size:0.6em;padding:9px;">'+properties[x]+'</td>'; // inserisco i nomi delle proprietà
                        }
                        html += '</tr>';
                    }
                    html += '</table></div>';   //FINE DELLA SECONDA TABELLA
                    html += '<div class="col-md-9 scrolled-td-table-wrapper" style="padding:0"><table id="calendarTable2" class="table table-striped table-bordered nowrap display stripe fixed_headers row-border order-column" style="width:100%;margin-bottom:0;" cellspacing="0"><tr>';
                    var year = this.year; 
                   
                    for(var cal=0; cal<cal_months_labels.length; cal++){
                        var monthName = cal_months_labels[cal];
                        var monthLength = cal_days_in_month[cal];
                        var temp = cal+1;
                        html += '<th id="month2'+ temp +'" height="20" style="background-color:' + months_colors[cal]+';height:100%; border-style:solid; border-width:medium; border-color:white;" colspan="'+monthLength+'">';                    
                        html += '<div align=center style="style="height:100%,font-weight:bold;font-size:70%;>';                    
                        html += '<font color="black">'+monthName + "&nbsp;" + year + '</font>';
                        html += '</div>';  
                        html += '</th>';

                    }//end of month title calendar loop

                    html += '</tr><tr>';
                    for(var x=0; x<properties.length; x++){
                        html += '</tr><tr>';
                       
                        for(var y=0; y<cal_months_labels.length; y++){  //ciclo dei mesi 1 -> 12       
                            var currentTime = new Date();
                            var year = parseInt(currentTime.getFullYear()) + 1;  //anno successivo
                            
                            var now = new Date(year, y, 1); //anno - mese - giorno
                            var firstDayOfMonth = days[ now.getDay() ];  //seleziona il 1* giorno del mese (0 = Sunday)
                            
                            var firstSunday = 7 - firstDayOfMonth;
                                    
                            var day = 1;
                            var month_number = y;
                            
                            month_number = month_number + 1;
                            var month = "" + month_number;
                            if ( month.length == 1){ 
                                month = 0 + month;
                            }
                            
                            var monthLength = cal_days_in_month[y];
                           
                            for(var cal=0; cal < monthLength; cal++){ //ciclo dei giorni 1 -> 30
                                
                                var formatDay = "" + day;
                                if ( formatDay.length == 1){
                                    formatDay = 0 + formatDay;
                                }

                                if (  cal == 0 && parseInt(firstDayOfMonth) == 0 ){
                                    html += '<td class="tdDaySunday" style="border-style=solid;border-width: 3px 3px 3px 3px;border-color: blue;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                }else{
                                    if (  cal == parseInt(firstSunday) || cal == parseInt(firstSunday)+7 || cal == parseInt(firstSunday)+14 || cal == parseInt(firstSunday)+21 || cal == parseInt(firstSunday)+28 ){
                                        html += '<td class="tdDaySunday" style="border-style=solid;border-width: 3px 3px 3px 3px;border-color: blue;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                    }else{
                                        html += '<td style="border:1px solid black;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                    }
                                }
                                html += day;
                                html += '</td>';;
                                day++;
                              // fill in the days
                            }//end of calendar
                            lastMonthLength = monthLength;
                        }//end of calendar loop
                    } // loop proprietà
                    html += '</tr></table></div>';
                    html += '<div class="col-md-3"></div>';
                    html += '<div class="col-md-9" style="padding:0"><table id="subMonths2" class="table" style="overflow:hidden;"><tr>'; //CREAZIONE DEI MESI SOTTO IL CALENDARIO

                    for(var cal=0; cal<cal_months_labels.length; cal++){
                        var monthName = cal_months_labels[cal];
                        var monthLength = cal_days_in_month[cal];
                        var temp = cal+1;
                        html += '<th id="subMonth2'+temp+'" style="background-color:'+months_colors[cal]+'; border-style:solid;border-width:medium;border-color:white;" colspan="'+monthLength+'">';                    
                        html += '<div align=center>';                    
                        html += '<font color="black">'+monthName+"&nbsp;"+this.year+'</font>';
                        html += '</div>';  
                        html += '</th>';
                    }//end 
                    html += '</tr></table></div>';
                    html += '<div align="center"><button id="previous_year" class="btn btn-md btn-info">ANNO PRECEDENTE</button>';
                    html += '<button style="margin-left:5em" id="next_next_year" class="btn btn-md btn-info">ANNO SUCCESSIVO</button></div><br>';
                    html += '<div align="center"></div><br>';
                    html += '</div>'; //chiusura della firstTable
                    
                    this.html = html;
                }
               
                Calendar.prototype.getHTML = function () {
                    return this.html;
                }
                
                var cal = new Calendar();
                cal.generateHTML();
             
                $(".wmd-view").after( cal.getHTML()); // PORTA TUTTO IL CODICE HTML ALL'INTERNO DI QUESTO DIV
                
                var idDayIn;
                var idDaOut;
                
                for(var z=0; z<bookings.length; z++){  //CARICO LE PRENOTAZIONI IN VERDE SUL CALENDARIO
                    var newDate = date_bookings[z].split("/");
                    
                    var dateFormat1 = newDate[0];
                    var dateFormat2 = newDate[1];
                    
                    var date1 = new Date( dateFormat1 );
                    var date2 = new Date( dateFormat2 );
                    
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    
                    var checkinBooking = dateFormatFn(newDate[0]);
                    var checkoutBooking = dateFormatFn(newDate[1]);
                    var checkin = dateFormatFn(newDate[0]).replace("-","");
                    var checkout = dateFormatFn(newDate[1]).replace("-","");
                    
                    idDayIn = "#" + bookings[z]+checkin.replace("-","");
                    idDaOut = "#" + bookings[z]+checkout.replace("-","");

                    $(idDayIn).css("background-color","green");
                    var valDate = $(idDayIn).html();
                    $(idDayIn).html('<a href="#" style="color:black" onclick="getDataBooking('+newDate[2]+')">'+valDate+'</a>');
                    $(idDaOut).css("background-color","green");
                    
                    var splitDataIn = checkinBooking.split("-");
                    var splitDataOut =checkoutBooking.split("-");
                    for(var k=1; k<diffDays; k++){
                        var iterator = parseInt(splitDataIn[0])+k; //ad ogni ciclo aumento il numero del giorno
                       
                        if ( iterator.toString().length == 1){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                       
                        idDayIn = "#" + bookings[z] + iterator + splitDataIn[1] + splitDataIn[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDayIn).css("background-color","red");
                    }
                    for(var k=diffDays-1; k>0; k--){ // RISOLVE PROBLEMA DI PRENOTAZIONE A CAVALLO TRA 2 MESI
                        var iterator = parseInt(splitDataOut[0])-k;
                      
                        if ( iterator.toString().length == 1 ){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                      
                        idDaOut =  "#" + bookings[z] + iterator + splitDataOut[1] + splitDataOut[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDaOut).css("background-color","red");
                    }
                }
                for(var z=0; z<blocks.length; z++){ //CARICO I BLOCCHI IN GIALLO SUL CALENDARIO
                    var newDate = date_blocks[z].split("/");
                    
                    var dateFormat1 = newDate[0];
                    var dateFormat2 = newDate[1];
                    
                    var date1 = new Date( dateFormat1 );
                    var date2 = new Date( dateFormat2 );
                    
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    
                    var checkinBooking = dateFormatFn(newDate[0]);
                    var checkoutBooking = dateFormatFn(newDate[1]);
                    var checkin = dateFormatFn(newDate[0]).replace("-","");
                    var checkout = dateFormatFn(newDate[1]).replace("-","");
                    
                    idDayIn = "#" + blocks[z]+checkin.replace("-","");
                    idDaOut = "#" + blocks[z]+checkout.replace("-","");
        
                    $(idDayIn).css("background-color","green");
                    $(idDaOut).css("background-color","green");
                    
                    var splitDataIn = checkinBooking.split("-");
                    var splitDataOut =checkoutBooking.split("-");
                    for(var k=1; k<diffDays; k++){ // colora i blocchi di giallo
                        var iterator = parseInt(splitDataIn[0])+k;
                       
                        if ( iterator.toString().length == 1){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                       
                        idDayIn =  "#" + blocks[z] + iterator + splitDataIn[1] + splitDataIn[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre

                        $(idDayIn).css("background-color","yellow");
                    }
                    for(var k=diffDays-1; k>1; k--){ // RISOLVE PROBLEMA DI PRENOTAZIONE A CAVALLO TRA 2 MESI
                        var iterator = parseInt(splitDataOut[0])-k;
                      
                        if ( iterator.toString().length == 1 ){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                      
                        idDaOut =  "#" + bookings[z] + iterator + splitDataOut[1] + splitDataOut[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDaOut).css("background-color","red");
                    }
                }
                /****** GESTIONE MOVIMENTI SCROLLBAR ******/
                $("#calendarTable2").scroll(function(){
                    $("#calendarMonthsTable2").scrollTop($("#calendarTable2").scrollTop());
                    $("#subMonths2").scrollLeft($("#calendarTable2").scrollLeft());
                });
                
                var widthNav = $(".navbar").width() + "px";
                var widthTable = $("#calendarTable2 tbody").width() + "px";
                $(".wmd-view-topscroll").css("width", widthNav);
                $("#calendarTable2").css("width", widthNav);
                $(".scroll-div1").css("width", widthTable);
                
                for(var cal=0; cal < 12; cal++){ //ASSOCIO LA STESSA LUNGHEZZA DEI PRIMI DIV DEI MESI AI SECONDI
                   var temp = cal + 1;
                   var test = "#month"+temp;
                   var widthMonth = $(test).find("div").width() + "px";
                   
                   var test2 = "#subMonth2"+temp;
                   $(test2).find("div").css("width", widthMonth);
                }//
            });
            $( function(){ // TERZO ANNO
                $('#properties option').each(function(i){ //raccoglie l'oggetto con tutte le proprietà presente nella 1a SELECT
                    properties[i] = $(this).val(); 
                    var house = $(this).text().split("/");
                    
                    id_houses[i] = house[0];
                    house_description[i] = house[1];
                    house_sorting[i] = house[2];
                });
                
                $('#bookings option').each(function(x){ //raccoglie l'oggetto con tutte le proprietà presente nella 2a SELECT
                    bookings[x] = $(this).val();
                    date_bookings[x] = $(this).text();
                });
                
                $('#blocks option').each(function(x){ //raccoglie l'oggetto con tutte le proprietà presente nella 2a SELECT
                    blocks[x] = $(this).val();
                    date_blocks[x] = $(this).text();
                });
                
            //  var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                var days = ['0','1','2','3','4','5','6'];
                
                cal_months_labels = ['January', 'February', 'March', 'April',
                 'May', 'June', 'July', 'August', 'September',
                 'October', 'November', 'December'];

                // these are the days of the week for each month, in order
                cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

                // this is the current date
                cal_current_date = new Date();
                
                months_colors = ['rgba(249, 66, 97, 1)','rgba(211, 180, 247, 1)', ' rgba(156, 155, 248, 1)', 'rgba(248, 145, 126, 1)',
                 'rgba(248, 242, 180, 1)', 'rgba(134, 238, 179, 1)', 'rgba(211, 180, 247, 1)', 'rgba(156, 155, 248, 1)', 'rgba(248, 145, 126, 1)',
                 'rgba(248, 242, 180, 1)', 'rgba(211, 180, 247, 1)', 'rgba(249, 66, 97, 1)'];

                function Calendar(month, year) {
                    this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
                    this.year = (isNaN(year) || year == null) ? parseInt(cal_current_date.getFullYear())+2 : year; 
                    /***** parseInt(cal_current_date.getFullYear())+1 permette di gestire il calendario dell'anno successivo  ***/
                    this.html = '';
                }

                Calendar.prototype.generateHTML = function () {
                    // get first day of month
                    //var firstDay = new Date((new Date().getFullYear(), 0, 1));
                    //var firstDay = new Date(this.year, this.month, 1);
                    //var startingDay = firstDay.getDay();

                    // find number of days in month
                    var monthLength = cal_days_in_month[this.month];

                    // compensate for leap year
                    if (this.month == 1) { // February only!
                        if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) {
                            monthLength = 29;
                        }
                    }

                    var html = "<div id='thirdTable' class='hide'>";
                    html += '<div class="col-md-3" style="padding:0"><table id="calendarMonthsTable3" class="table" style="width:100%;overflow:hidden;">';
                    html += '<tr><td height="20"><p style="font-weight:bold;color:rgba(91, 192, 222, 1);width:11em;margin:0;">CALENDARIO</p></td><td height="20"><p style="font-weight:bold;color:rgba(91, 192, 222, 1);width:11em;margin:0;"></p></td></tr>';
                    for(var x=0; x<properties.length; x++){ 
                        html += '<tr>';
                        if(isOdd(parseInt(house_sorting[x])) == 1){ //se dispari colora di azzurro
                            html += '<td style="background-color:#CCE8FF;font-size:0.6em;padding:9px;">'+house_description[x]+'</td>';
                            html += '<td style="background-color:#CCE8FF;border-left:1px solid grey;font-size:0.6em;padding:9px;">'+properties[x]+'</td>'; // inserisco i nomi delle proprietà
                        }else{
                            html += '<td style="font-size:0.6em;padding:9px;">'+house_description[x]+'</td>';
                            html += '<td style="border-left:1px solid grey;font-size:0.6em;padding:9px;">'+properties[x]+'</td>'; // inserisco i nomi delle proprietà
                        }
                        html += '</tr>';
                    }
                    html += '</table></div>';  //FINE DELLA TERZA TABELLA
                    html += '<div class="col-md-9 scrolled-td-table-wrapper" style="padding:0"><table id="calendarTable3" class="table table-striped table-bordered nowrap display stripe fixed_headers row-border order-column" style="width:100%;margin-bottom:0;" cellspacing="0"><tr>';
                    var year = this.year; 
                   
                    for(var cal=0; cal<cal_months_labels.length; cal++){
                        var monthName = cal_months_labels[cal];
                        var monthLength = cal_days_in_month[cal];
                        var temp = cal+1;
                        html += '<th id="month2'+ temp +'" height="20" style="background-color:' + months_colors[cal]+';height:100%; border-style:solid; border-width:medium; border-color:white;" colspan="'+monthLength+'">';                    
                        html += '<div align=center style="style="height:100%,font-weight:bold;font-size:70%;>';                    
                        html += '<font color="black">'+monthName + "&nbsp;" + year + '</font>';
                        html += '</div>';  
                        html += '</th>';
                    }//end of month title calendar loop

                    html += '</tr><tr>';
                    for(var x=0; x<properties.length; x++){
                        html += '</tr><tr>';
                       
                        for(var y=0; y<cal_months_labels.length; y++){  //ciclo dei mesi 1 -> 12       
                            var currentTime = new Date();
                            var year = parseInt(currentTime.getFullYear()) + 2;  //anno successivo
                            
                            var now = new Date(year, y, 1); //anno - mese - giorno
                            var firstDayOfMonth = days[ now.getDay() ];  //seleziona il 1* giorno del mese (0 = Sunday)
                            
                            var firstSunday = 7 - firstDayOfMonth;
                                    
                            var day = 1;
                            var month_number = y;
                            
                            month_number = month_number + 1;
                            var month = "" + month_number;
                            if ( month.length == 1){ 
                                month = 0 + month;
                            }
                            
                            var monthLength = cal_days_in_month[y];
                           
                            for(var cal=0; cal < monthLength; cal++){ //ciclo dei giorni 1 -> 30
                                
                                var formatDay = "" + day;
                                if ( formatDay.length == 1){
                                    formatDay = 0 + formatDay;
                                }

                                if (  cal == 0 && parseInt(firstDayOfMonth) == 0 ){
                                    html += '<td class="tdDaySunday" style="border-style=solid;border-width: 3px 3px 3px 3px;border-color: blue;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                }else{
                                    if (  cal == parseInt(firstSunday) || cal == parseInt(firstSunday)+7 || cal == parseInt(firstSunday)+14 || cal == parseInt(firstSunday)+21 || cal == parseInt(firstSunday)+28 ){
                                        html += '<td class="tdDaySunday" style="border-style=solid;border-width: 3px 3px 3px 3px;border-color: blue;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                    }else{
                                        html += '<td style="border:1px solid black;font-size:0.6em" id="'+id_houses[x] + formatDay + month +  year +'">';
                                    }
                                }
                                html += day;
                                html += '</td>';;
                                day++;
                              // fill in the days
                            }//end of calendar
                            lastMonthLength = monthLength;
                        }//end of calendar loop
                    } // loop proprietà
                    html += '</tr></table></div>';
                    html += '<div class="col-md-3"></div>';
                    html += '<div class="col-md-9" style="padding:0"><table id="subMonths3" class="table" style="overflow:hidden;"><tr>'; //CREAZIONE DEI MESI SOTTO IL CALENDARIO

                    for(var cal=0; cal<cal_months_labels.length; cal++){
                        var monthName = cal_months_labels[cal];
                        var monthLength = cal_days_in_month[cal];
                        var temp = cal+1;
                        html += '<th id="subMonth3'+temp+'" style="background-color:'+months_colors[cal]+'; border-style:solid;border-width:medium;border-color:white;" colspan="'+monthLength+'">';                    
                        html += '<div align=center>';                    
                        html += '<font color="black">'+monthName+"&nbsp;"+this.year+'</font>';
                        html += '</div>';  
                        html += '</th>';
                    }//end 
                    html += '</tr></table></div>';
                    html += '<div align="center"><button id="previous_previous_year" class="btn btn-md btn-info">ANNO PRECEDENTE</button></div><br>';
                    html += '</div>'; //chiusura della firstTable
                    
                    this.html = html;
                }
               
                Calendar.prototype.getHTML = function () {
                    return this.html;
                }
                
                var cal = new Calendar();
                cal.generateHTML();
             
                $(".wmd-view").after( cal.getHTML()); // PORTA TUTTO IL CODICE HTML ALL'INTERNO DI QUESTO DIV
                
                var idDayIn;
                var idDaOut;
                
                for(var z=0; z<bookings.length; z++){  //CARICO LE PRENOTAZIONI IN VERDE SUL CALENDARIO
                    var newDate = date_bookings[z].split("/");
                    
                    var dateFormat1 = newDate[0];
                    var dateFormat2 = newDate[1];
                    
                    var date1 = new Date( dateFormat1 );
                    var date2 = new Date( dateFormat2 );
                    
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    
                    var checkinBooking = dateFormatFn(newDate[0]);
                    var checkoutBooking = dateFormatFn(newDate[1]);
                    var checkin = dateFormatFn(newDate[0]).replace("-","");
                    var checkout = dateFormatFn(newDate[1]).replace("-","");
                    
                    idDayIn = "#" + bookings[z]+checkin.replace("-","");
                    idDaOut = "#" + bookings[z]+checkout.replace("-","");

                    $(idDayIn).css("background-color","green");
                    var valDate = $(idDayIn).html();
                    $(idDayIn).html('<a href="#" style="color:black" onclick="getDataBooking('+newDate[2]+')">'+valDate+'</a>');
                    $(idDaOut).css("background-color","green");
                    
                    var splitDataIn = checkinBooking.split("-");
                    var splitDataOut =checkoutBooking.split("-");
                    for(var k=1; k<diffDays; k++){
                        var iterator = parseInt(splitDataIn[0])+k; //ad ogni ciclo aumento il numero del giorno
                       
                        if ( iterator.toString().length == 1){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                       
                        idDayIn = "#" + bookings[z] + iterator + splitDataIn[1] + splitDataIn[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDayIn).css("background-color","red");
                    }
                    for(var k=diffDays-1; k>0; k--){ // RISOLVE PROBLEMA DI PRENOTAZIONE A CAVALLO TRA 2 MESI
                        var iterator = parseInt(splitDataOut[0])-k;
                      
                        if ( iterator.toString().length == 1 ){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                      
                        idDaOut =  "#" + bookings[z] + iterator + splitDataOut[1] + splitDataOut[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDaOut).css("background-color","red");
                    }
                }
                for(var z=0; z<blocks.length; z++){ //CARICO I BLOCCHI IN GIALLO SUL CALENDARIO
                    var newDate = date_blocks[z].split("/");
                    
                    var dateFormat1 = newDate[0];
                    var dateFormat2 = newDate[1];
                    
                    var date1 = new Date( dateFormat1 );
                    var date2 = new Date( dateFormat2 );
                    
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    
                    var checkinBooking = dateFormatFn(newDate[0]);
                    var checkoutBooking = dateFormatFn(newDate[1]);
                    var checkin = dateFormatFn(newDate[0]).replace("-","");
                    var checkout = dateFormatFn(newDate[1]).replace("-","");
                    
                    idDayIn = "#" + blocks[z]+checkin.replace("-","");
                    idDaOut = "#" + blocks[z]+checkout.replace("-","");
        
                    $(idDayIn).css("background-color","green");
                    $(idDaOut).css("background-color","green");
                    
                    var splitDataIn = checkinBooking.split("-");
                    var splitDataOut =checkoutBooking.split("-");
                    for(var k=1; k<diffDays; k++){ // colora i blocchi di giallo
                        var iterator = parseInt(splitDataIn[0])+k;
                       
                        if ( iterator.toString().length == 1){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                       
                        idDayIn =  "#" + blocks[z] + iterator + splitDataIn[1] + splitDataIn[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre

                        $(idDayIn).css("background-color","yellow");
                    }
                    for(var k=diffDays-1; k>1; k--){ // RISOLVE PROBLEMA DI PRENOTAZIONE A CAVALLO TRA 2 MESI
                        var iterator = parseInt(splitDataOut[0])-k;
                      
                        if ( iterator.toString().length == 1 ){ iterator = "0"+ iterator; }; // se il giorno è composto da una sola cifra aggiunge lo zero
                      
                        idDaOut =  "#" + bookings[z] + iterator + splitDataOut[1] + splitDataOut[2];  // creazione del nome ID: idProprietà + giorno + mese + anno in 4 cifre
                       
                        $(idDaOut).css("background-color","red");
                    }
                }
                /****** GESTIONE MOVIMENTI SCROLLBAR ******/
                $("#calendarTable3").scroll(function(){
                    $("#calendarMonthsTable3").scrollTop($("#calendarTable3").scrollTop());
                    $("#subMonths3").scrollLeft($("#calendarTable3").scrollLeft());
                });
                
                var widthNav = $(".navbar").width() + "px";
                var widthTable = $("#calendarTable3 tbody").width() + "px";
                $(".wmd-view-topscroll").css("width", widthNav);
                $("#calendarTable3").css("width", widthNav);
                $(".scroll-div1").css("width", widthTable);
                
                for(var cal=0; cal < 12; cal++){ //ASSOCIO LA STESSA LUNGHEZZA DEI PRIMI DIV DEI MESI AI SECONDI
                   var temp = cal + 1;
                   var test = "#month"+temp;
                   var widthMonth = $(test).find("div").width() + "px";
                   
                   var test2 = "#subMonth3"+temp;
                   $(test2).find("div").css("width", widthMonth);
                }//
                $("#next_year").on("click", function(){ // presente nella prima tabella
                    $("#firstTable").addClass("hide");
                    $("#secondTable").removeClass("hide");
                });
                $("#previous_year").on("click", function(){ // presente nella seconda tabella
                    $("#secondTable").addClass("hide"); 
                    $("#firstTable").removeClass("hide");
                });
                $("#next_next_year").on("click", function(){ // presente nella seconda tabella
                    $("#secondTable").addClass("hide");
                    $("#thirdTable").removeClass("hide");
                });
                $("#previous_previous_year").on("click", function(){ // presente nella terza tabella
                    $("#thirdTable").addClass("hide");
                    $("#secondTable").removeClass("hide");
                });
                //$("#next_year").trigger("click"); Permette di aprire di default l'anno successivo
            });
        </script>
        @if ($properties)
        <div class="form-group">
        <label for="comboboxCalendar" class="col-sm-3 control-label">Selezionare la proprietà desiderata:</label>
        <div class="col-sm-3" style="text-align: center">
            <select name="id_house" class="form-control" id="comboboxCalendar">
                <option value=""></option>
                <option value="0">ALL PROPERTIES</option>
                @foreach ($properties as $property)
                <option value="{{ $property->h_id }}">{{ $property->h_title }}</option>
                @endforeach
            </select>
        </div>

        <!-- id_owner -->
        <input type="hidden" name="id_owner" id="prenotazione-id_owner" value="">
        <div class="col-sm-1" id="position"></div>
        </div>
        @endif
        <div id="loadingTemplate" class="col-md-12 hide" align='center'>
            <img src='{{URL::asset('/img/loading.gif')}}' alt="error" height="90" width="90">
        </div>
        <div id="container">
            <div id="wmd-view" class="wmd-view col-md-12"></div>
        </div>
        <div id="bookingModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Info prenotazione</h4>
                    </div>
                    <div class="modal-body">
                        <p id="property_name"></p>
                        <p id="canale"></p>
                        
                        <p id="n_nights"></p>
                        <p id="n_guests"></p>
                        <p id="guest_name"></p>
                        <p id="guest_nation"></p>
                        <p id="netto"></p>
                        <p id="cs"></p>
                        <p id="tot_with_cs"></p>
                        <p id="prezzo_proprieta"></p>
                        
                        <p id="balance"></p>
                        <p id="info_balance"></p>
                        <p id="incasso_balance"></p>
                        
                        <p id="cleaning_cost"></p>
                        <p id="info_pulizie"></p>
                        <p id="balance_pulizie"></p>
                        <p id="paid_cleaning"></p>
                        
                        <p id="deposit"></p>
                        <p id="info_deposit"></p>
                        <p id="rimborso"></p>
                        <p id="tassa_turistica"></p>
                        <p id="tassa_kh"></p>
                        <p id="phone"></p>
                        <p id="note"></p>
                        <p id="note_kh"></p>
                        <p id="special_request"></p>
                        <p id="arrival_time"></p>
                        
                        <p id="email"></p>
                        <p id="smartfee_perc"></p>
                        <p id="smart_fee"></p>
                        <p id="bb_saldo"></p>
                        <p id="cash_saldo"></p>
                        <p id="position"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
                    </div>
                </div>
           </div>
        </div>
        <select class="form-control hide" id="properties">
                @foreach ($houses as $house)
            <option id="c_h_title0" value="{{ $house->h_title }}">{{ $house->h_id }}/{{ $house->h_description }}/{{ $house->h_sorting }}</option>
            <script>
                var tempValue = $("#c_h_title0").val();
                var tempArray = tempValue.split("-");
                $("#c_h_title0").val(tempArray[0]);
            </script>
                @endforeach
        </select>
        <select class="form-control hide" id="bookings">

        @foreach ($bookings as $booking)
            <option value="{{ $booking->id_house }}">{{ $booking->p_date_start }}/{{ $booking->p_date_end }}/{{ $booking->p_id }}</option>
        @endforeach
        </select>
        <select  class="form-control hide" id="blocks">

        @foreach ($blocks as $block)
            <option value="{{ $block->id_house }}">{{ $block->p_date_start }}/{{ $block->p_date_end }}/{{ $block->p_id }}</option>
        @endforeach
        </select>
    </div>
    <input type="hidden" id="url_route" value="{{ URL::route("ajaxCalendar") }}">
    <input type="hidden" id="url_calendar_route" value="{{ URL::route("ajaxCalendarFilter") }}">
    <input type="hidden" name="_tokenCalendar" value="{{ csrf_token() }}">
    <input type="hidden" name="id_user" id="id_user" value="{{ $logged -> a_id}}">
    <script>
        $(window).load(function() { //prenotazioni in partenza da Novembre 2018
            $("#calendarTable").scrollLeft($("#calendarTable").scrollLeft() + 7900);
        });
    </script>
@endsection