 <!-- JAVASCRIPT FILES -->
 <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
 <script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
 <script src="{{ asset('assets/js/jquery.sticky.js') }}"></script>
 <script src="{{ asset('assets/js/click-scroll.js') }}"></script>
 <script src="{{ asset('assets/js/custom.js') }}"></script>
 <script>
     document.addEventListener("DOMContentLoaded", function() {
         // Function to check if the element is in the viewport
         function isElementInViewport(el) {
             const rect = el.getBoundingClientRect();
             return (
                 rect.top >= 0 &&
                 rect.left >= 0 &&
                 rect.bottom <=
                 (window.innerHeight || document.documentElement.clientHeight) &&
                 rect.right <=
                 (window.innerWidth || document.documentElement.clientWidth)
             );
         }

         // Function to animate the counting
         function countUp(element, start, end, duration) {
             let current = start;
             const range = end - start;
             const increment = end > start ? 1 : -1;
             const stepTime = Math.abs(Math.floor(duration / range));
             const timer = setInterval(function() {
                 current += increment;
                 element.textContent = current;
                 if (current == end) {
                     clearInterval(timer);
                 }
             }, stepTime);
         }

         // Function to start the count-up animation for all elements with the class 'count'
         function runCountUpAnimation() {
             const counters = document.querySelectorAll(".count");
             counters.forEach((counter) => {
                 const endValue = parseInt(counter.getAttribute("data-count"));
                 countUp(counter, 0, endValue, 2000); // 2000 ms = 2 seconds duration
             });
         }

         // Listen for scroll events and trigger animation if the section is in view
         window.addEventListener("scroll", function() {
             const achievementSection = document.getElementById(
                 "section_achievements"
             );
             if (isElementInViewport(achievementSection)) {
                 runCountUpAnimation();
                 window.removeEventListener("scroll", arguments
                     .callee); // Remove the scroll event listener after running animation once
             }
         });
     });

     $(document).ready(function() {
         $('#contactForm').submit(function(e) {
             e.preventDefault(); // Prevent form from submitting

             // Clear previous error messages and reset styles
             $('.errorMessage').text('').css('margin-top',
                 ''); // Clear error messages and reset margin-top
             $('.form-control').removeClass('is-invalid'); // Remove invalid class
             $('.btn-send-message').css('margin-top', ''); // Reset button margin-top
             $('#formResponse').html(''); // Clear any previous success message

             // Check if screen width is 1199px or less
             if ($(window).width() <= 1199) {
                 $('.site-footer').css('margin-top', '218em'); // Reset footer margin-top to 218em
                 $('.contact-image').css('height', ''); // Remove the 88vh height from the contact image
             }
             if ($(window).width() <= 991) {

                 $('.site-footer').css('margin-top',
                     '304em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 767) {
                 $('.site-footer').css('margin-top',
                     '394em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 575) {
                 $('.site-footer').css('margin-top',
                     '400em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 548) {
                 $('.site-footer').css('margin-top',
                     '396em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 520) {
                 $('.site-footer').css('margin-top',
                     '394em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 480) {
                 $('.site-footer').css('margin-top',
                     '395em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 448) {
                 $('.site-footer').css('margin-top',
                     '389em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 425) {
                 $('.site-footer').css('margin-top',
                     '395em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 400) {
                 $('.site-footer').css('margin-top',
                     '392em'); // Set footer margin-top to 222em
             }
             if ($(window).width() <= 375) {
                 $('.site-footer').css('margin-top',
                     '383em'); // Set footer margin-top to 222em
             }

             $.ajax({
                 url: "{{ route('contact.store') }}", // Adjust the route to match your controller
                 type: "POST",
                 data: $(this).serialize(), // Serialize form data
                 headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF token
                 },
                 success: function(response) {
                     // Change margin-bottom of form fields to 1em
                     $('.contact-form .form-control').css('margin-bottom', '1em');

                     // Show success message above the button
                     $('#formResponse').html(
                         '<div class="alert alert-success">Message sent successfully!</div>'
                     );

                     // Check if screen width is 1199px or less for success message adjustments
                     if ($(window).width() <= 1199) {
                         $('.contact-image').css('height',
                             '80vh'); // Set contact image height to 80vh
                         $('.site-footer').css('margin-top',
                             '222em'); // Set footer margin-top to 222em
                     }

                     if ($(window).width() <= 991) {

                         $('.site-footer').css('margin-top',
                             '302em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 767) {
                         $('.site-footer').css('margin-top',
                             '400em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 575) {
                         $('.site-footer').css('margin-top',
                             '404em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 548) {
                         $('.site-footer').css('margin-top',
                             '402em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 520) {
                         $('.site-footer').css('margin-top',
                             '404em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 480) {
                         $('.site-footer').css('margin-top',
                             '406em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 448) {
                         $('.site-footer').css('margin-top',
                             '402em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 425) {
                         $('.site-footer').css('margin-top',
                             '410em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 400) {
                         $('.site-footer').css('margin-top',
                             '410em'); // Set footer margin-top to 222em
                     }

                     if ($(window).width() <= 375) {
                         $('.site-footer').css('margin-top',
                             '404em'); // Set footer margin-top to 222em
                     }

                     $('#contactForm')[0].reset(); // Reset form

                     // Remove success message and reset margin after 3 seconds
                     setTimeout(function() {
                         $('#formResponse').html(''); // Clear the success message
                         $('.contact-form .form-control').css('margin-bottom',
                             '2.5em'); // Reset margin-bottom to 2.5em
                         // Remove height and reset footer margin
                         if ($(window).width() <= 1199) {
                             $('.contact-image').css('height',
                                 ''); // Remove the height from the contact image
                             $('.site-footer').css('margin-top',
                                 '218em'); // Reset footer margin-top to 218em
                             $('.contact-form .form-control').css('margin-bottom',
                                 '1em');
                         }


                         if ($(window).width() <= 991) {
                             $('.contact-image').css('height',
                                 ''); // Remove the height from the contact image
                             $('.site-footer').css('margin-top',
                                 '302em'); // Reset footer margin-top to 218em
                             $('.contact-form .form-control').css('margin-bottom',
                                 '1em');
                         }
                         if ($(window).width() <= 767) {

                             $('.site-footer').css('margin-top',
                                 '394em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 575) {
                             $('.site-footer').css('margin-top',
                                 '400em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 548) {
                             $('.site-footer').css('margin-top',
                                 '396em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 520) {
                             $('.site-footer').css('margin-top',
                                 '394em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 480) {
                             $('.site-footer').css('margin-top',
                                 '395em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 448) {
                             $('.site-footer').css('margin-top',
                                 '389em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 425) {
                             $('.site-footer').css('margin-top',
                                 '395em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 400) {
                             $('.site-footer').css('margin-top',
                                 '392em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 375) {
                             $('.site-footer').css('margin-top',
                                 '383em'); // Set footer margin-top to 222em
                         }

                     }, 3000);
                 },
                 error: function(xhr) {
                     let errors = xhr.responseJSON.errors;

                     // Loop through the errors and display them under each field
                     $.each(errors, function(key, value) {
                         let errorElement = $('#' + key).siblings(
                             '.errorMessage'); // Select the .errorMessage element
                         let inputField = $('#' + key);

                         // For screens smaller than or equal to 1199px, set margin-top to 0
                         if ($(window).width() <= 1199) {
                             errorElement.text(value[0]).css('margin-top', '-3px')
                                 .addClass('text-danger');
                         } else {
                             // Add margin-top: -2em for screens wider than 1199px
                             errorElement.text(value[0]).css('margin-top', '-2em')
                                 .addClass('text-danger');
                         }

                         inputField.addClass('is-invalid');
                     });

                     // Check if screen width is 1199px or less before applying changes
                     if ($(window).width() <= 1199) {
                         $('.btn-send-message').css('margin-top', '1em');
                         $('.site-footer').css('margin-top',
                             '224em'); // Increase footer margin-top to 224em
                         $('.contact-image').css('height',
                             '88vh'); // Set contact image height to 88vh
                     }

                     // Check if screen width is 991px or less before applying changes
                     if ($(window).width() <= 991) {
                         $('.btn-send-message').css('margin-top', '1em');
                         $('.site-footer').css('margin-top',
                             '308em'); // Increase footer margin-top to 308em for errors
                         $('.contact-image').css('height',
                             '88vh'); // Set contact image height to 88vh
                     }
                     if ($(window).width() <= 767) {
                         $('.btn-send-message').css('margin-top', '1em');
                         $('.site-footer').css('margin-top',
                             '406em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 575) {
                         $('.site-footer').css('margin-top',
                             '408em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 548) {
                         $('.site-footer').css('margin-top',
                             '406em'); // Set footer margin-top to 222em
                     }

                     if ($(window).width() <= 520) {
                         $('.site-footer').css('margin-top',
                             '408em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 480) {
                         $('.site-footer').css('margin-top',
                             '410em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 448) {
                         $('.site-footer').css('margin-top',
                             '406em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 425) {
                         $('.site-footer').css('margin-top',
                             '416em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 400) {
                         $('.site-footer').css('margin-top',
                             '416em'); // Set footer margin-top to 222em
                     }
                     if ($(window).width() <= 375) {
                         $('.site-footer').css('margin-top',
                             '408em'); // Set footer margin-top to 222em
                     }
                     //  Remove errors and reset styles after 3 seconds
                     setTimeout(function() {
                         $('.errorMessage').text('').css('margin-top',
                             ''); // Clear error messages and reset margin-top
                         $('.form-control').removeClass(
                             'is-invalid'); // Remove invalid class
                         $('.btn-send-message').css('margin-top',
                             ''); // Reset button margin-top

                         // Only reset if screen size is 1199px or less
                         if ($(window).width() <= 1199) {
                             $('.site-footer').css('margin-top',
                                 '218em'); // Reset footer margin-top to 218em
                             $('.contact-image').css('height',
                                 ''
                             ); // Remove the 88vh height from the contact image
                         }
                         if ($(window).width() <= 991) {
                             $('.site-footer').css('margin-top',
                                 '302em'); // Reset footer margin-top to 302em
                             $('.contact-image').css('height',
                                 ''); // Remove the height from the contact image
                         }
                         if ($(window).width() <= 767) {
                             $('.site-footer').css('margin-top',
                                 '394em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 575) {
                             $('.site-footer').css('margin-top',
                                 '400em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 548) {
                             $('.site-footer').css('margin-top',
                                 '396em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 520) {
                             $('.site-footer').css('margin-top',
                                 '394em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 480) {
                             $('.site-footer').css('margin-top',
                                 '395em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 448) {
                             $('.site-footer').css('margin-top',
                                 '389em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 425) {
                             $('.site-footer').css('margin-top',
                                 '395em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 400) {
                             $('.site-footer').css('margin-top',
                                 '392em'); // Set footer margin-top to 222em
                         }
                         if ($(window).width() <= 375) {
                             $('.site-footer').css('margin-top',
                                 '383em'); // Set footer margin-top to 222em
                         }
                     }, 3000);
                 }
             });
         });
     });
 </script>
