thebola-cms/resources/js/main.js

import AOS from "aos";
import jQuery from "jquery";
import API from './api/api';

const $ = jQuery;
const api = new API();

var bookingRules = [];

setTimeout(() => {
    console.log("AOS init");
    AOS.init();
}, 500);

$(document).ready(function () {


    $('.article-carousel-item').on('click', function(){

        let redirectlink = $(this).data('href')
        location.href = redirectlink;
    })

    $('#contact-form').on('submit', function(e){
        e.preventDefault();
        let name = $(this).find("#name").val();
        let email = $(this).find("#email").val();
        let message = $(this).find("#message").val();
        let submitButton = $(this).find('#submitButton');
        let loadingSpan = document.createElement('span');

        $(submitButton).prop("disabled",true);
        $(loadingSpan).attr("role", "status");
        $(loadingSpan).attr("aria-hidden", "true");
        $(loadingSpan).addClass("spinner-border spinner-border-sm");
        submitButton.text("Sending ");
        $(submitButton).append(loadingSpan)

        const _callback = (resp) => {

            let {status} = resp
            if(status === "Success"){
                submitButton.text("Success");
                $("#name").val("");
                $("#email").val("");
                $("#message").val("");
            } else {
                submitButton.text("Fail");
            }

            setTimeout(()=>{
                $(submitButton).prop("disabled",false);
                submitButton.text("Submit");
            },1000)
        }

        api.enquiry({name, email, message}, _callback)

    })

    // this section is for booking page
    //check if booking section exist in any page
    let bookingContainer = $('#booking-section');
    if(bookingContainer.length > 0){

        api.listState({
            _callback: ({state_city}) => {

                const selectLocationInput = $("#select-location");
                if(Array.isArray(state_city)){
                    state_city.forEach(({state, city}, i) => {
                        let newOption = document.createElement('option');
                        $(newOption).attr("id", `location_${i}`)
                        $(newOption).attr("value",JSON.stringify({state,city}))
                        $(newOption).addClass("select-value")
                        newOption.text = `${city}, ${state}`
                        $(selectLocationInput).append(newOption)
                    });
                }

                $(selectLocationInput).on('change', ()=>{
                    resetField()
                })

            }
        })

        // set date max and min
        let { maxDate, minDate } = createDateInputWithRange(14)
        let inputDate = $('#input-booking-date')
        $(inputDate).attr("min", minDate)
        $(inputDate).attr("max", maxDate)
        resetDate()

    }

    $("#booknow-btn").on('click', function(){
        document.getElementById("download-container").scrollIntoView();
    })

    $("#select-location").on('change', function(){

        resetDate()
        resetRules()
        resetField()
        $("#select-location").children("#default-input-select-location").remove()

        setTimeout(() => {
            document.getElementById("field-location-container").scrollIntoView({ behavior: "smooth", block: "end", inline: "end" });
        }, 300);


        if(this.value !== "default" ){
            let {state, city} = JSON.parse(this.value);

            api.listLocation({
                state,
                city,
                _callback: ({field_location}) => {

                    let template = $('#field-location-template')
                    let container = $(template).parent()

                    //reset eveything
                    $(container).children(".select-field").remove()

                    try{

                        field_location.forEach(({field_name, city, state, photo_path}) => {
                            let newField = $(template).clone()
                            $(newField).css('display','block')
                            $(newField).removeAttr("id")
                            $(newField).addClass("select-field")
                            $(newField).find('.field-location-text').text("")
                            $(newField).on('click', ()=>{ handleClickFieldLocation(city, state, field_name, newField) })
                            $(newField).find('.field-location-img').attr("style", `background-image:url(https://thebola.club/files/${photo_path})`)
                            $(container).append(newField)

                        });

                    }catch(err){
                        console.log(err)
                    }
                },
            });
        }

    })


    const handleClickFieldLocation = function (city, state, field_name, refElem) {

        $("#field-location-container").find(".select-field").removeClass("active")
        $(refElem).addClass("active")
        resetDate()
        resetRules()
        resetField()

        setTimeout(() => {
            document.getElementById("field-container").scrollIntoView();
        }, 300);

        api.listField({state, city, field_name, _callback:({results})=>{

            let container = $('#field-container')
            let template = $('#field-template')
            try{

                results.forEach(({location_name, photo_path, slot_rules}) => {

                    let newField = $(template).clone()
                    $(newField).css('display','block')
                    $(newField).removeAttr("id")
                    $(newField).addClass("select-field")
                    $(newField).find('.field-text').text(location_name)
                    $(newField).on('click', ()=>{ handleClickField(slot_rules, newField)})
                    $(newField).find('.field-img').attr("style", `background-image:url(https://thebola.club/files/${photo_path})`)
                    $(container).append(newField)

                });

            }catch(err){
                console.log(err)
            }

        }})

    }

    const handleClickField = function (slot_rules,refElem){

        // remove all child active class, then add active on clicked
        let fieldContainer = $('#field-container');
        $(fieldContainer).find(".select-field").removeClass("active")
        $(refElem).addClass("active");
        resetRules()
        resetDate()
        bookingRules = slot_rules.rules


    }

    $('#input-booking-date').change(function() {


        if(bookingRules){

            // render rule of slot base on current input value date
            var dayName = getDayNameFromInput(document.getElementById("input-booking-date"));
            resetRules()

            setTimeout(() => {

                // append slot list
                bookingRules[dayName].forEach(({end_time, start_time, price, id}) => {
                    let newOption = document.createElement('option');
                    $(newOption).attr("id", id)
                    $(newOption).addClass("select-value")
                    newOption.text = `${start_time} - ${end_time} (RM ${price})`
                    $("#input-booking-slot").append(newOption)
                });

            }, 1000);

        }
    });

    function createDateInputWithRange(days) {

        var today = new Date();

        var futureDate = new Date(today.getTime() + days * 24 * 60 * 60 * 1000);
        var maxDate = futureDate.toISOString().split('T')[0];
        let minDate = today.toISOString().split('T')[0];

        return { maxDate, minDate };
    }

    function getDayNameFromInput(inputElement) {

        var selectedDate = inputElement.value;
        var date = new Date(selectedDate);
        var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var dayIndex = date.getDay();
        return dayNames[dayIndex];

    }

    function resetField(){
        $('#field-container').children(".select-field").remove()
    }

    function resetDate(){
        let { maxDate, minDate } = createDateInputWithRange(14)
        $('#input-booking-date').val(minDate)
    }

    function resetRules(){
        $("#input-booking-slot").children(".select-value").remove();
    }




});