$(document).ready(function () {
    select_time_func();

    // $(".process-slider").slick({
    //     slidesToShow: 4,
    //     slidesToScroll: 1,
    //     autoplay: true,
    //     autoplaySpeed: 2000,
    //     dots: false,
    //     arrows: false,
    //     responsive: [
    //         {
    //             breakpoint: 950,
    //             settings: {
    //                 slidesToShow: 2,
    //                 slidesToScroll: 1,
    //                 infinite: true,
    //                 dots: false,
    //                 arrows: false,
    //                 autoplay: true,
    //                 autoplaySpeed: 2000
    //             }
    //         }
    //     ]
    // });

    var mobile_img = $(".mobile-plant-img");

    setTimeout(showSequentially(0), 1000);

    function showSequentially(index) {
        if (index < mobile_img.length) {
            // Fade in the image
            $(mobile_img[index]).css({ top: 0, opacity: 1 });

            // Call the function recursively for the next image
            setTimeout(function () {
                showSequentially(index + 1);
            }, 500); // Adjust the timeout value as needed
        }
    }


    // select preferred langauge
    let lang_btn = $(".lang-select-btn");
    lang_btn.on("click", function () {
        let lang_val = $(this).data("lang");
        lang_btn.removeClass("lang-selected");
        $(this).addClass("lang-selected");
        $("#selected-lang").val(lang_val);
    });

    // 3 - select preferred tour date & time
    let select_date = $("#select-datepicker");
    select_date.on("input", function () {
        let selected_date = new Date($(this).val() + 'T00:00:00');
        selected_date.getTimezoneOffset();
        let selected_day = selected_date.getDay();

        let display_month = selected_date.toLocaleString('en-US', { month: 'long' });
        let display_day = selected_date.toLocaleString('en-US', { day: 'numeric' });
        let display_weekday = selected_date.toLocaleString('en-US', { weekday: 'long' });
        let display_year = selected_date.toLocaleString('en-US', { year: 'numeric' });
        let full_display_year = display_month + " " + display_day + " " + display_year + ", " + display_weekday;

        let display_selected_date = $("#dispay-selected-date");

        display_selected_date.text(full_display_year);

        // 0 - sunday, 1 - monday, 2 - tuesday, 3 - wednesday, 4 - thursday, 5 - friday, 6 - saturday

        let draw_time = "<div class='col-6'>";
        draw_time += "<div class='n-p n-select-btn' data-time='1'>10 AM</div>";
        draw_time += "</div>";
        draw_time += "<div class='n-p n-select-btn' data-time='2'>3 AM</div>";
        draw_time += "</div>";

        if (selected_day === 2 || selected_day == 4) {
            const year = selected_date.getFullYear();
            const month = String(selected_date.getMonth() + 1).padStart(2, '0'); // Month is zero-based
            const day = String(selected_date.getDate()).padStart(2, '0');
            const formatted_date = year + "-" + month + "-" + day;
            let csrf_token = $("#csrf-token").val();
            $("#selected-date").val(formatted_date);

            let data_obj = {
                formatted_date, csrf_token
            };
            $.ajax({
                url: "/get-times-plant-tour-api",
                method: "post",
                data: data_obj,
                success: function (response) {
                    let result = JSON.parse(response);
                    if (result.status) {
                        $("#time-picker").empty();
                        $("#time-picker").append(result['result']);
                        select_time_func();
                    } else {
                        alert("Error. Please try it again");
                        return false;
                    }
                }
            });

        } else {
            let message = "Apart from Tuesdays and Thursdays, there are no scheduled plant tours available.";
            $("#time-picker").text(message);
            $("#selected-date").val("");
            $("#selected-time").val("");
        }
    });

    // 4 - how many people do you have in your group?
    let plus_part = $(".plus-part");
    let minus_part = $(".minus-part");
    let nof_people = $("#nof-people");

    plus_part.on("click", function () {

        let current_nof_people = nof_people.val();
        current_nof_people++;
        if (current_nof_people >= 0 && current_nof_people <= 40) {
            nof_people.val(current_nof_people);
        }
    });

    minus_part.on("click", function () {
        let current_nof_people = nof_people.val();
        if (current_nof_people == 0 || current_nof_people < 0) {
            nof_people.val(0);
        } else {
            current_nof_people--;
            nof_people.val(current_nof_people);
        }
    });

    // 5 - request tour
    let request_tour_btn = $("#request-tour-btn");
    request_tour_btn.on("click", function () {
        let name = $("#name").val().trim();
        let email = $("#email").val().trim();
        let phone = $("#phone").val().trim();
        let selected_lang = $("#selected-lang").val();
        let selected_time = $("#selected-time").val();
        let selected_date = $("#selected-date").val();
        let nof_people = $("#nof-people").val().trim();
        let csrf_token = $("#csrf-token").val();

        let data_obj = {
            name, email, phone, selected_lang, selected_time, selected_date, nof_people, csrf_token
        };

        $.each(data_obj, function (key, value) {
            if (value !== undefined && value !== null && value !== '') {
                if (key == "nof_people") {
                    if (value == 0 || value > 20 || value < 0) {
                        alert("Please enter the correct number of people in your group");
                        return false;
                    }
                }
            } else {
                switch (key) {
                    case "name":
                        alert("Enter your name");
                        break;
                    case "email":
                        alert("Enter your email");
                        break;
                    case "phone":
                        alert("Enter your phone number");
                        break;
                    case "selected_lang":
                        alert("Please select your preferred langauge");
                        break;
                    case "selected_time":
                        alert("Please select your preferred time");
                        break;
                    case "nof_people":
                        alert("Please enter the number of people in your group");
                        break;
                }
                return false;
            }
        });

        if (nof_people > 20) {
            alert("The number of visitors cannot exceed 20 people.");
            return false;
        }

        alert("Currently, the plant tour is unavailable. We will provide an update as soon as it becomes available.");

        /*
        $.ajax({
            url: "/plant-tour-submit-api",
            method: "POST",
            data: data_obj,
            success: function (response) {
                let result = JSON.parse(response);
                if (result.status) {
                    alert("You have succesfully submitted.");
                    location.reload();
                } else {
                    alert("Error. Please try it again.");
                }
            }
        });
        */

    });

});

function select_time_func() {
    let n_select_btn = $(".time-select-btn");
    n_select_btn.on("click", function () {
        let time_val = $(this).data("time");
        n_select_btn.removeClass("time-selected");
        $(this).addClass("time-selected");
        $("#selected-time").val(time_val);
    });
}