done UX animation on booking

public/js/main.js

@@ -11001,7 +11001,6 @@ $(document).ready(function () {
       _callback: function _callback(_ref) {
         var state_city = _ref.state_city;
         var selectLocationInput = $("#select-location");
-        $(selectLocationInput).children(".select-value").remove();
         if (Array.isArray(state_city)) {
           state_city.forEach(function (_ref2, i) {
             var state = _ref2.state,
@@ -11032,10 +11031,17 @@ $(document).ready(function () {
     $(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(function () {
+      document.getElementById("field-location-container").scrollIntoView();
+    }, 300);
     if (this.value !== "default") {
       var _JSON$parse = JSON.parse(this.value),
         state = _JSON$parse.state,
@@ -11080,6 +11086,9 @@ $(document).ready(function () {
     resetDate();
     resetRules();
     resetField();
+    setTimeout(function () {
+      document.getElementById("field-container").scrollIntoView();
+    }, 300);
     api.listField({
       state: state,
       city: city,
@@ -11161,7 +11170,10 @@ $(document).ready(function () {
     $('#field-container').children(".select-field").remove();
   }
   function resetDate() {
-    $('#input-booking-date').val("");
+    var _createDateInputWithR2 = createDateInputWithRange(14),
+      maxDate = _createDateInputWithR2.maxDate,
+      minDate = _createDateInputWithR2.minDate;
+    $('#input-booking-date').val(minDate);
   }
   function resetRules() {
     $("#input-booking-slot").children(".select-value").remove();

resources/js/main.js

@@ -67,9 +67,6 @@ $(document).ready(function () {
             _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');
@@ -97,11 +94,21 @@ $(document).ready(function () {
 
     }
 
+    $("#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();
+        }, 300);
+
 
         if(this.value !== "default" ){
             let {state, city} = JSON.parse(this.value);
@@ -149,6 +156,10 @@ $(document).ready(function () {
         resetRules()
         resetField()
 
+        setTimeout(() => {
+            document.getElementById("field-container").scrollIntoView();
+        }, 300);
+
         api.listField({state, city, field_name, _callback:({results})=>{
 
             let container = $('#field-container')
@@ -240,7 +251,8 @@ $(document).ready(function () {
     }
 
     function resetDate(){
-        $('#input-booking-date').val("")
+        let { maxDate, minDate } = createDateInputWithRange(14)
+        $('#input-booking-date').val(minDate)
     }
 
     function resetRules(){

resources/views/booking.antlers.html

@@ -12,7 +12,7 @@
 
             <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>
+                    <option id="default-input-select-location" value="default">Select City and State</option>
                   </select>
             </div>
 
@@ -51,7 +51,9 @@
                       </select>
                 </div>
                 <div class="col-lg-2 my-5 my-lg-0 d-flex">
-                    <a href="https://play.google.com/store/apps/details?id=club.thebola.app" target="_blank" class="nav-link db-btn mx-auto mt-auto" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem;">Book Now</a>
+                    <button id="booknow-btn" class="nav-link db-btn mx-auto mt-auto">
+                        Book Now
+                    </button>
                 </div>
             </div>
 
@@ -64,9 +66,8 @@
             <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Our Mobile Apps Is Coming Soon!</p>
             <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Soon all of the amazing features that we provide here will be available in<br/> an exclusive app for both android and iOS.</p>
         </div>
-        <div class="container-fluid d-flex flex-wrap justify-content-center">
-            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
-            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 200px;">
-        </div>
+
+        {{ partial:partials/appsdownload }}
+
     </div>
 </section>

resources/views/home.antlers.html

@@ -103,9 +103,6 @@
             <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Our Mobile Apps Is Coming Soon!</p>
             <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Soon all of the amazing features that we provide here will be available in<br/> an exclusive app for both android and iOS.</p>
         </div>
-        <div class="container-fluid d-flex flex-wrap justify-content-center">
-            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
-            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 200px;">
-        </div>
+        {{ partial:partials/appsdownload }}
     </div>
 </section>

resources/views/partials/_appsdownload.antlers.html

@@ -0,0 +1,8 @@
+<div id="download-container" class="container-fluid d-flex flex-wrap justify-content-center">
+    <a href="https://play.google.com/store/apps/details?id=club.thebola.app">
+        <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
+    </a>
+    <a href="https://apps.apple.com/my/app/the-bola/id6478902627">
+        <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 220px;">
+    </a>
+</div>