done fetch booking data from BE

public/css/main.css

@@ -282,21 +282,22 @@ p {
     overflow: hidden;
 }
 
-.booking-item{
+.field-item{
     padding-top: 80%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    cursor: pointer;
 }
 
-.booking-details{
+.field-details{
     height: 100%;
     width: 100%;
     top:0;
     left:0
 }
 
-.booking-overlay{
+.field-overlay{
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
     padding: 1.688rem 3.625rem;
@@ -305,15 +306,57 @@ p {
     height: fit-content;
 }
 
-.booking-item.active .booking-overlay{
+.field-c.active .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
 
-.booking-item:hover .booking-overlay{
+.field-item:hover .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.location-overlay{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    padding: 1.688rem 3.625rem;
+    transition: all 300ms ease-in-out;
+    height: 100%;
+}
+
+
+#field-location-container:has(> :last-child:nth-child(2)){
+   display: none !important;
+}
+
+#field-container:has(> :last-child:nth-child(2)){
+    display: none !important;
+ }
+
+
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.select-field.active .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
+.location-item:hover .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
 .container-contactus{
     padding-left: 6.5rem;
     padding-right: 6.5rem;

public/js/api/API.js

@@ -0,0 +1,142 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+/*!*********************************!*\
+  !*** ./resources/js/api/API.js ***!
+  \*********************************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ API)
+/* harmony export */ });
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var server_url = "https://thebola.club";
+var API = /*#__PURE__*/function () {
+  function API() {
+    _classCallCheck(this, API);
+    this.prefix = server_url;
+    this.url = "/api";
+    this.test = 200;
+  }
+  _createClass(API, [{
+    key: "listState",
+    value: function listState(_ref) {
+      var _ref$_callback = _ref._callback,
+        _callback = _ref$_callback === void 0 ? function () {} : _ref$_callback;
+      var url = "".concat(this.prefix).concat(this.url, "/public/event/location/state");
+      fetch(url).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
+  }, {
+    key: "listLocation",
+    value: function listLocation(_ref2) {
+      var state = _ref2.state,
+        city = _ref2.city,
+        _ref2$_callback = _ref2._callback,
+        _callback = _ref2$_callback === void 0 ? function () {} : _ref2$_callback;
+      var url = "".concat(this.prefix).concat(this.url, "/public/event/location/field?") + new URLSearchParams({
+        state: state,
+        city: city
+      });
+      fetch(url).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
+  }, {
+    key: "listField",
+    value: function listField(_ref3) {
+      var state = _ref3.state,
+        city = _ref3.city,
+        field_name = _ref3.field_name,
+        _ref3$_callback = _ref3._callback,
+        _callback = _ref3$_callback === void 0 ? function () {} : _ref3$_callback;
+      var url = "".concat(this.prefix).concat(this.url, "/public/event/location?") + new URLSearchParams({
+        state: state,
+        city: city,
+        field_name: field_name
+      });
+      fetch(url).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
+  }, {
+    key: "enquiry",
+    value: function enquiry(_ref4, _callback) {
+      var email = _ref4.email,
+        name = _ref4.name,
+        message = _ref4.message;
+      var url = "".concat(this.prefix).concat(this.url, "/public/enquiry");
+      fetch(url, {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json;charset=utf-8'
+        },
+        body: JSON.stringify({
+          contact_email: email,
+          contact_name: name,
+          message: message
+        })
+      }).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
+  }]);
+  return API;
+}();
+
+/******/ })()
+;

public/mix-manifest.json

@@ -3,6 +3,7 @@
     "/js/jquery.js": "/js/jquery.js",
     "/js/main.js": "/js/main.js",
     "/js/aos.js": "/js/aos.js",
+    "/js/api/API.js": "/js/api/API.js",
     "/css/main.css": "/css/main.css",
     "/css/aos.css": "/css/aos.css",
     "/css/normalize.css": "/css/normalize.css",

resources/css/main.css

@@ -275,21 +275,22 @@ p {
     overflow: hidden;
 }
 
-.booking-item{
+.field-item{
     padding-top: 80%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    cursor: pointer;
 }
 
-.booking-details{
+.field-details{
     height: 100%;
     width: 100%;
     top:0;
     left:0
 }
 
-.booking-overlay{
+.field-overlay{
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
     padding: 1.688rem 3.625rem;
@@ -297,15 +298,57 @@ p {
     height: fit-content;
 }
 
-.booking-item.active .booking-overlay{
+.field-c.active .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
 
-.booking-item:hover .booking-overlay{
+.field-item:hover .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.location-overlay{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    padding: 1.688rem 3.625rem;
+    transition: all 300ms ease-in-out;
+    height: 100%;
+}
+
+
+#field-location-container:has(> :last-child:nth-child(2)){
+   display: none !important;
+}
+
+#field-container:has(> :last-child:nth-child(2)){
+    display: none !important;
+ }
+
+
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.select-field.active .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
+.location-item:hover .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
 .container-contactus{
     padding-left: 6.5rem;
     padding-right: 6.5rem;

resources/js/api/API.js

@@ -1,5 +1,3 @@
-//import some server backend
-//set app url from env file
 const server_url = "https://thebola.club";
 
 export default class API {
@@ -9,11 +7,58 @@ export default class API {
         this.test = 200;
     }
 
-    listLocation(_page, _pagesize, _callback) {
+    listState({_callback = () => {}}){
+        const url = `${this.prefix}${this.url}/public/event/location/state`
 
-        let url =  `${this.prefix}${this.url}/public/event/location?`
+        fetch(url)
+            .then(response => response.json())
+            .then(data => _callback(data))
+            .catch(err => console.log(err))
 
-        console.log(url)
+    }
+
+    listLocation({ state, city, _callback = () => {}}) {
+
+        const url = `${this.prefix}${this.url}/public/event/location/field?` + new URLSearchParams({
+            state, city
+        })
+
+        fetch(url)
+            .then(response => response.json())
+            .then(data => _callback(data) )
+            .catch(err => console.log(err))
+    }
+
+    listField({state, city, field_name, _callback = () => {}}){
+
+        const url = `${this.prefix}${this.url}/public/event/location?` + new URLSearchParams({
+            state, city, field_name
+        })
+
+        fetch(url)
+            .then(response => response.json())
+            .then(data => _callback(data) )
+            .catch(err => console.log(err))
+
+    }
+
+    enquiry({ email, name, message }, _callback){
+
+        let url = `${this.prefix}${this.url}/public/enquiry`;
 
+        fetch(url,{
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json;charset=utf-8',
+            },
+            body: JSON.stringify({
+                contact_email: email,
+                contact_name: name,
+                message
+            })
+        } )
+            .then(response => response.json())
+            .then(data => _callback(data) )
+            .catch(err => console.log(err))
     }
 }

resources/js/main.js

@@ -1,59 +1,10 @@
 import AOS from "aos";
 import jQuery from "jquery";
-import queryString from "query-string";
-//import API from './api/api';
-
-const server_url = "https://thebola.club";
-
-export default class API {
-    constructor() {
-        this.prefix = server_url;
-        this.url = "/api";
-        this.test = 200;
-    }
-
-    listLocation({ _search, _page = 1, _pagesize = 20, _callback = () => {} }) {
-
-        let url = `${this.prefix}${
-            this.url
-        }/public/event/location?${queryString.stringify({
-            _search,
-            _page,
-            _pagesize,
-        })}`;
-
-
-        fetch(url)
-            .then(response => response.json())
-            .then(data => _callback(data) )
-            .catch(err => console.log(err))
-    }
-
-    enquiry({ email, name, message }, _callback){
-
-        let url = `${this.prefix}${this.url}/public/enquiry`;
-
-        fetch(url,{
-            method: "POST",
-            headers: {
-                'Content-Type': 'application/json;charset=utf-8',
-            },
-            body: JSON.stringify({
-                contact_email: email,
-                contact_name: name,
-                message
-            })
-        } )
-            .then(response => response.json())
-            .then(data => _callback(data) )
-            .catch(err => console.log(err))
-    }
-}
+import API from './api/api';
 
 const $ = jQuery;
 const api = new API();
 
-var bookingList = [];
 var bookingRules = [];
 
 setTimeout(() => {
@@ -111,62 +62,141 @@ $(document).ready(function () {
     //check if booking section exist in any page
     let bookingContainer = $('#booking-section');
     if(bookingContainer.length > 0){
-        api.listLocation({
-            _search: "",
-            _page: 1,
-            _pagesize: 20,
-            _callback: (data) => {
-                console.log("fetch")
-                localStorage.setItem('thebola-booking', JSON.stringify(data))
-                bookingList = data;
-
-                // set date max and min
-                let { maxDate, minDate } = createDateInputWithRange(14)
-                $('#input-booking-date').attr("min", minDate)
-                $('#input-booking-date').attr("max", maxDate)
-
-            },
-        });
+
+        api.listState({
+            _callback: ({state_city}) => {
+
+                const selectLocationInput = $("#select-location");
+
+                $(selectLocationInput).children(".select-value").remove()
+
+                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()
+
     }
 
+    $("#select-location").on('change', function(){
 
-    $(".booking-item").on("click", function () {
+        resetDate()
+        resetRules()
+        resetField()
 
-        let fieldID = $(this).data('fieldid');
-        // remove all child active class, then add active on clicked
-        let bookingContainer = $('.booking-container');
-        $(bookingContainer).find(".booking-item").removeClass("active")
-        $(this).addClass("active");
+        if(this.value !== "default" ){
+            let {state, city} = JSON.parse(this.value);
 
-        // remove option child
-        $("#input-booking-slot").children(".select-value").remove();
+            api.listLocation({
+                state,
+                city,
+                _callback: ({field_location}) => {
 
-        //ensure everything exist
-        if(bookingList === undefined || bookingList.length == 0){
-            bookingList = localStorage.getItem('thebola-booking')
-        }
+                    let template = $('#field-location-template')
+                    let container = $(template).parent()
+
+                    //reset eveything
+                    $(container).children(".select-field").remove()
+
+                    try{
 
-        if(fieldID && bookingList){
+                        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)
 
-            let { results } = bookingList;
-            let slots = results.filter( data => data.id == fieldID )
-            let { rules } = slots[0].slot_rules
-            bookingRules = rules
+                        });
 
-        }else{
-            console.log("no booking data")
+                    }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()
+
+        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"));
-            $("#input-booking-slot").children(".select-value").remove();
+            resetRules()
 
             setTimeout(() => {
 
@@ -196,21 +226,28 @@ $(document).ready(function () {
     }
 
     function getDayNameFromInput(inputElement) {
-        // Get the value of the input element
-        var selectedDate = inputElement.value;
 
-        // Create a new Date object from the input date string
+        var selectedDate = inputElement.value;
         var date = new Date(selectedDate);
-
-        // Array of day names
         var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-
-        // Get the day of the week (0 for Sunday, 1 for Monday, ..., 6 for Saturday)
         var dayIndex = date.getDay();
-
-        // Return the name of the day corresponding to the day index
         return dayNames[dayIndex];
+
+    }
+
+    function resetField(){
+        $('#field-container').children(".select-field").remove()
     }
 
+    function resetDate(){
+        $('#input-booking-date').val("")
+    }
+
+    function resetRules(){
+        $("#input-booking-slot").children(".select-value").remove();
+    }
+
+
+
 
 });

resources/views/booking.antlers.html

@@ -8,36 +8,34 @@
 </section>
 <section id="booking-section">
     <div class="text-light section-5">
-        <div class="row g-0 booking-container">
+        <div class="row g-0 booking-container text-center">
 
-            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="1" class="position-relative booking-item" style="background-image: url(./assets/group-6770.jpg);">
-                    <div class="position-absolute d-flex flex-wrap booking-details">
-                        <div class="mt-auto booking-overlay">
-                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD A </p>
-                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
-                        </div>
-                    </div>
-                </div>
+            <div class="col-12 position-relative px-3 mb-5">
+                <select id="select-location" class="db-input" id="cars" name="cars">
+                    <option value="default" selected>Select City and State</option>
+                  </select>
             </div>
 
-            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="2" class="position-relative booking-item" style="background-image: url(./assets/group-6771.jpg);">
-                    <div class="position-absolute d-flex flex-wrap booking-details">
-                        <div class="mt-auto booking-overlay">
-                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD B </p>
-                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+            <div id="field-location-container" class="container-fluid p-0 col-12 row text-center my-5">
+                <p class="db-h5 text-highlight title">SELECT LOCATION</p>
+                <div id="field-location-template" class="col-xl-4 position-relative p-0 p-lg-3 animate__animated animate__fadeIn" style="display: none;">
+                    <div class="position-relative location-item field-location-img">
+                        <div class="position-absolute d-flex flex-wrap field-details">
+                            <div class="mt-auto d-flex location-overlay"></div>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="3" class="position-relative booking-item" style="background-image: url(./assets/group-6772.jpg);">
-                    <div class="position-absolute d-flex flex-wrap booking-details">
-                        <div class="mt-auto booking-overlay">
-                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD C </p>
-                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+            <div id="field-container" class="container-fluid p-0 col-12 row my-5">
+                <p class="db-h5 text-highlight">SELECT FIELD</p>
+                <div id="field-template" class="col-xl-4 position-relative p-0 p-lg-3 animate__animated animate__fadeIn field-c" style="display: none;">
+                    <div class="position-relative field-item field-img">
+                        <div class="position-absolute d-flex flex-wrap field-details">
+                            <div class="mt-auto field-overlay text-start">
+                                <p class="text-highlight db-h5 fw-bold m-0 field-text"></p>
+                                <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+                            </div>
                         </div>
                     </div>
                 </div>

resources/views/layout.antlers.html

@@ -14,6 +14,7 @@
         <script src="{{ mix src='js/jquery.js' }}"></script>
         <script src="{{ mix src='js/aos.js' }}" defer></script>
         <script src="{{ mix src='js/main.js' }}"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     </head>
     <body style="background-color: black;">
 

webpack.mix.js

@@ -20,7 +20,7 @@ mix.js('resources/js/bootstrap.bundle.js', 'public/js')
 mix.js('resources/js/jquery.js', 'public/js')
 mix.js('resources/js/main.js', 'public/js')
 mix.js('resources/js/aos.js', 'public/js')
-
+mix.js('resources/js/api/API.js', 'public/js/api')
 
 if (mix.inProduction()) {
    mix.version();