var app_currentDateDisplay = document.querySelector('#app-date');
var appDatePrevious = document.querySelector('#app-date-previous');
var appDateNext = document.querySelector('#app-date-next');

if(moment) {
    // ***********************
    // Appointment Form Script
    // ***********************
    var app_todaysDate = moment();

    // On Load
    document.addEventListener("DOMContentLoaded", function(event) { 
        displayDate(app_todaysDate);
        checkPrev(app_todaysDate);
    });

    // On NextDate Click
    appDateNext.addEventListener("click", function() {
        app_todaysDate = moment(app_todaysDate).add(1, 'days');
        displayDate(app_todaysDate);
        checkPrev(app_todaysDate);
    });

    // On PreviousDate Click
    appDatePrevious.addEventListener("click", function() {
        if(!moment(app_todaysDate).isSameOrBefore(moment())) {
            app_todaysDate = moment(app_todaysDate).subtract(1, 'days');
            displayDate(app_todaysDate);
            checkPrev(app_todaysDate);
        } else {
            checkPrev(app_todaysDate);
        }
    });

    function displayDate(d) {
        let date = moment(d).format("dddd, MMMM Do YYYY");
        app_currentDateDisplay.value = date;
        showAppointmentTime(moment(d).format("dddd"));
    }

    function checkPrev(d) {
        if(moment(d).isSameOrBefore(moment())) {
            appDatePrevious.classList.add("disabled");
        } else {
            appDatePrevious.classList.remove("disabled");
        }
    }


    // ***********************
    // Time slots calculations using moment.js
    // ***********************
    function isInMorning(slotTime, checkTime) {
        return checkTime.some((br) => {
            return slotTime >= moment(br[0], "hh:mm") && slotTime < moment(br[1], "hh:mm");
        });
    }

    function isInAfternoon(slotTime, checkTime) {
        return checkTime.some((br) => {
            return slotTime >= moment(br[0], "hh:mm") && slotTime < moment(br[1], "hh:mm");
        });
    }

    function isInEvening(slotTime, checkTime) {
        return checkTime.some((br) => {
            return slotTime >= moment(br[0], "hh:mm") && slotTime < moment(br[1], "hh:mm");
        });
    }

    function showAppointmentTime(day){
        const appointmentDetails = document.getElementById(`slot_${day}`).dataset;

        var slot_start_time = appointmentDetails.startTime;
        var slot_end_time = appointmentDetails.endTime;
        var slot_is_closed = appointmentDetails.slotIsClosed;
        // console.log(slot_start_time,' to ',slot_end_time ,"is closed -> ",slot_is_closed);
        // var slot_start_time = document.querySelector("#slot_start_time").value;
        // var slot_end_time = document.querySelector("#slot_end_time").value;
        if(slot_is_closed == 0){
            document.getElementById("app-time-slots-container").classList.remove('hide');
            document.getElementById("app-time-slots-container-closed").classList.add('hide');

            var x = {
                nextSlot: 30,
                morningTime: [
                    ['07:00' , '12:00']
                ],
                afternoonTime: [
                    ['12:00' , '16:00']
                ],
                eveningTime: [
                    ['16:00' , '23:00']
                ],
                startTime: '07:00',
                endTime: '23:00'
            };
        
            if(slot_start_time && slot_end_time) {
                x.startTime = moment(slot_start_time, 'hh:mm A').format("HH:mm");
                x.endTime = moment(slot_end_time, 'hh:mm A').format("HH:mm");
            }
        
            var slotTime = moment(x.startTime, "hh:mm");
            var endTime = moment(x.endTime, "hh:mm");
        
            let m_times = [];
            let a_times = [];
            let e_times = [];
            var m_slots_string = "";
            var a_slots_string = "";
            var e_slots_string = "";
        
            while (slotTime < endTime)
            {
                if (isInMorning(slotTime, x.morningTime)) {
                    m_times.push(slotTime.format("hh:mm"));
                    m_slots_string += '<li class="slot active"> ' + slotTime.format("LT") + ' </li>';
                }
        
                if (isInAfternoon(slotTime, x.afternoonTime)) {
                    a_times.push(slotTime.format("hh:mm"));
                    a_slots_string += '<li class="slot active"> ' + slotTime.format("LT") + ' </li>';
                }
        
                if (isInEvening(slotTime, x.eveningTime)) {
                    e_times.push(slotTime.format("hh:mm"));
                    e_slots_string += '<li class="slot active"> ' + slotTime.format("LT") + ' </li>';
                }
        
                slotTime = slotTime.add(x.nextSlot, 'minutes');
            }
        
            document.querySelector('#populate_morning_slots').innerHTML = m_slots_string;
            document.querySelector('#populate_afternoon_slots').innerHTML = a_slots_string;
            document.querySelector('#populate_evening_slots').innerHTML = e_slots_string;

            // Now On Slot Click Modal With Selected Date And Time
            // custom script
            var slotelements = document.querySelectorAll(".slot");
            var app_timings = document.querySelector("#app-timings");
            var app_form = document.querySelector('#app-form');
            var back_to_app_form = document.querySelector('#back_to_app_form');


            for (var i = 0; i < slotelements.length; i++) {
                slotelements[i].addEventListener("click", function() {
                    var modal_title = document.querySelector("#appointment-modal-title");
                    var booking_date = document.querySelector('#app-date').value;

                    app_timings.setAttribute("style","display: none;");
                    app_form.setAttribute("style","display: block;");

                    modal_title.innerHTML = "Book Appointment on  <br>" + booking_date + " at " + this.innerHTML + ".";

                    // pass date and time to hiddenfield in modal
                    document.querySelector("#b_date_message").value = booking_date;
                    document.querySelector("#b_time_message").value = this.innerHTML;
                });
            }

            back_to_app_form.addEventListener("click", function() {
                app_timings.setAttribute("style","display: block;");
                app_form.querySelector('form#book-appointment-form').reset();
                let grValue = $('form#book-appointment-form div[data-grecapid]').attr('data-grecapid')
                // console.log('grepaptcha -> ',grValue);
                grecaptcha.reset(grValue)
                app_form.setAttribute("style","display: none;");
            });
        }else{
            // console.log('is closed');
            document.getElementById("app-time-slots-container").classList.add('hide');
            document.getElementById("app-time-slots-container-closed").classList.remove('hide');
        }
    }

} else {
    console.log("This package required moment.js as it's dependency");
}