<?php $this->load->view('components/main/announcement'); ?>



<!-- Sliding Banner -->

<?php $this->load->view('components/main/sliding_banner'); ?>



<!-- Category -->

<?php $this->load->view('components/main/category'); ?>





<!-- Best Seller -->

<?php $this->load->view('components/main/products'); ?>



<!-- Testimonial -->

<?php $this->load->view('components/main/testimonial'); ?>



<!-- Brands -->

<?php $this->load->view('components/main/brands'); ?>



<!-- Benefit -->

<?php $this->load->view('components/main/benefits'); ?>



<!-- Sertifikasi -->

<?php $this->load->view('components/main/certification'); ?>



<!-- Company Text -->

<?php $this->load->view('components/main/company_text'); ?>



<!-- Subscription -->

<?php $this->load->view('components/main/subscription'); ?>

<?php $this->load->view('components/main/subscription_modal'); ?>



<script>

  const lang = {

    invalidEmailTitle: '<?= lang('invalid_email_title'); ?>',

    invalidEmailMessage: '<?= lang('invalid_email_message'); ?>',

    consentRequiredTitle: '<?= lang('consent_required_title'); ?>',

    consentRequiredMessage: '<?= lang('consent_required_message'); ?>',

    processingTitle: '<?= lang('processing_title'); ?>',

    processingMessage: '<?= lang('processing_message'); ?>',

    confirmButtonText: '<?= lang('confirm_button_text'); ?>',

    subscriptionSuccessTitle: '<?= lang('subscription_success_title'); ?>',

    subscriptionSuccessMessage: '<?= lang('subscription_success_message'); ?>',

    subscriptionFailedTitle: '<?= lang('subscription_failed_title'); ?>',

    subscriptionFailedMessage: '<?= lang('subscription_failed_message'); ?>',

    subscriptionErrorTitle: '<?= lang('subscription_error_title'); ?>',

    subscriptionErrorMessage: '<?= lang('subscription_error_message'); ?>',

    confirmButtonText: '<?= lang('confirm_button_text'); ?>',

    greatButtonText: '<?= lang('great_button_text'); ?>'

  };



  // CSRF

  const CSRF_TOKEN = "<?= $this->security->get_csrf_token_name(); ?>";

  const CSRF_HASH = "<?= $this->security->get_csrf_hash(); ?>";

  document.addEventListener("DOMContentLoaded", function() {

    // Subscription

    const modal = document.getElementById('subscriptionModal');

    const confirmButton = document.getElementById('confirmSubscription');

    const consentCheckbox = document.getElementById('consentCheckbox');

    const emailInput = document.getElementById('subscriptionEmail');



    consentCheckbox.addEventListener('change', function() {

      confirmButton.disabled = !this.checked;

    });



    window.addEventListener('click', function(event) {

      if (event.target === modal) {

        hideSubscriptionModal();

      }

    });



    document.querySelector('.subscription-form').addEventListener('submit', function(e) {

      e.preventDefault();

      handleSubscription();

    });





    const style = document.createElement('style');

    style.textContent = `

        .swal-wide {

            padding: 2rem;

            border-radius: 12px;

        }



        .swal-title {

            font-size: 1.5rem !important;

            margin-bottom: 1rem !important;

        }



        .swal-button {

            padding: 0.75rem 2rem !important;

            font-size: 1rem !important;

        }



        .swal2-popup {

            font-size: 1rem !important;

        }



        .swal2-icon {

            margin: 1.5rem auto !important;

        }



        .swal2-close:focus {

            box-shadow: none !important;

        }

      `;

    document.head.appendChild(style);

  });



  document.addEventListener('DOMContentLoaded', function() {

    let trackingTimeout;

    const TRACKING_DELAY = 1000;

    const BASE_URL = "<?= base_url() ?>";



    // Fungsi untuk track impression

    const trackImpression = async (bannerId) => {

      try {

        const response = await makeRequest(`${BASE_URL}welcome/track_impression`, {

          bannerId

        });

      } catch (error) {

        console.error('Error tracking impression:', error);

      }

    };



    // Setup Owl Carousel event listener dengan debounce

    const owlCarousel = document.querySelector('.owl-carousel');

    if (owlCarousel) {

      $(owlCarousel).on('translated.owl.carousel', function(event) {

        clearTimeout(trackingTimeout);



        trackingTimeout = setTimeout(() => {

          const activeSlide = event.target.querySelector('.owl-item.active');

          if (activeSlide) {

            const bannerContainer = activeSlide.querySelector('.carousel-item-container');

            const bannerId = bannerContainer?.dataset.bannerId;



            if (bannerId) {

              trackImpression(bannerId);

            }

          }

        }, TRACKING_DELAY);

      });



      // Track impression pertama kali saat halaman dimuat

      const initialActiveSlide = owlCarousel.querySelector('.owl-item.active');

      if (initialActiveSlide) {

        const bannerContainer = initialActiveSlide.querySelector('.carousel-item-container');

        const bannerId = bannerContainer?.dataset.bannerId;



        if (bannerId) {

          trackImpression(bannerId);

        }

      }

    }

  });



  // Fungsi helper untuk membuat form data dengan CSRF

  const createFormData = (data) => {

    const formData = new FormData();

    formData.append(CSRF_TOKEN, CSRF_HASH);

    Object.keys(data).forEach(key => {

      if (key === 'orderDetailData') {

        formData.append(key, JSON.stringify(data[key]));

      } else {

        formData.append(key, data[key]);

      }

    });

    return formData;

  };



  // Fungsi helper untuk request

  const makeRequest = async (url, data) => {

    const formData = createFormData(data);

    const response = await fetch(url, {

      method: 'POST',

      headers: {

        'X-Requested-With': 'XMLHttpRequest'

      },

      body: formData

    });

    return response.json();

  };



  function showSubscriptionModal() {

    const email = document.getElementById('subscriptionEmail').value;

    if (!isValidEmail(email)) {

      Swal.fire({

        title: lang.invalidEmailTitle,

        text: lang.invalidEmailMessage,

        icon: 'warning',

        confirmButtonText: lang.confirmButtonText,

        confirmButtonColor: '#2563eb',

        customClass: {

          popup: 'swal-wide',

          title: 'swal-title',

          confirmButton: 'swal-button'

        }

      });

      return;

    }

    document.getElementById('subscriptionModal').style.display = 'block';

    document.body.style.overflow = 'hidden'; // Prevent scrolling

  }



  function isValidEmail(email) {

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    return emailRegex.test(email);

  }



  function hideSubscriptionModal() {

    document.getElementById('subscriptionModal').style.display = 'none';

    document.body.style.overflow = '';

    document.getElementById('consentCheckbox').checked = false;

    document.getElementById('confirmSubscription').disabled = true;

  }



  function handleSubscription() {

    const email = document.getElementById('subscriptionEmail').value;

    const consentChecked = document.getElementById('consentCheckbox').checked;

    hideSubscriptionModal();



    // Validate email and consent

    if (!isValidEmail(email)) {

      Swal.fire({

        title: lang.invalidEmailTitle,

        text: lang.invalidEmailMessage,

        icon: 'warning',

        confirmButtonText: lang.confirmButtonText,

        confirmButtonColor: '#2563eb',

        customClass: {

          popup: 'swal-wide',

          title: 'swal-title',

          confirmButton: 'swal-button'

        }

      });

      return;

    }

    if (!consentChecked) {

      Swal.fire({

        title: lang.consentRequiredTitle,

        text: lang.consentRequiredMessage,

        icon: 'warning',

        confirmButtonText: lang.confirmButtonText,

        confirmButtonColor: '#2563eb',

        customClass: {

          popup: 'swal-wide',

          title: 'swal-title',

          confirmButton: 'swal-button'

        }

      });

      return;

    }



    // Show loading state

    Swal.fire({

      title: lang.processingTitle,

      text: lang.processingMessage,

      allowOutsideClick: false,

      allowEscapeKey: false,

      showConfirmButton: false,

      didOpen: () => Swal.showLoading()

    });



    // Prepare data for submission

    const formData = new FormData();

    formData.append('email', email);

    formData.append('consent', consentChecked);



    // Send subscription request

    fetch('<?= base_url("subscription/subscribe") ?>', {

        method: 'POST',

        headers: {

          'X-Requested-With': 'XMLHttpRequest',

          'Content-Type': 'application/x-www-form-urlencoded'

        },

        body: new URLSearchParams({

          email: formData.get('email'),

          <?= $this->security->get_csrf_token_name(); ?>: '<?= $this->security->get_csrf_hash(); ?>'

        })

      })

      .then(response => response.json())

      .then(data => {

        if (data.success) {

          // On success, close the modal and clear form

          hideSubscriptionModal();

          document.getElementById('subscriptionEmail').value = '';

          document.getElementById('consentCheckbox').checked = false;



          Swal.fire({

            title: lang.subscriptionSuccessTitle,

            text: lang.subscriptionSuccessMessage,

            icon: 'success',

            confirmButtonText: lang.greatButtonText,

            confirmButtonColor: '#2563eb',

            customClass: {

              popup: 'swal-wide',

              title: 'swal-title',

              confirmButton: 'swal-button'

            }

          });

        } else {

          hideSubscriptionModal();



          Swal.fire({

            title: lang.subscriptionFailedTitle,

            text: data.message || lang.subscriptionFailedMessage,

            icon: 'error',

            confirmButtonText: lang.confirmButtonText,

            confirmButtonColor: '#2563eb',

            customClass: {

              popup: 'swal-wide',

              title: 'swal-title',

              confirmButton: 'swal-button'

            }

          });

        }

      })

      .catch(error => {

        console.error('Error:', error);

        Swal.fire({

          title: lang.subscriptionErrorTitle,

          text: lang.subscriptionErrorMessage,

          icon: 'error',

          confirmButtonText: lang.confirmButtonText,

          confirmButtonColor: '#2563eb',

          customClass: {

            popup: 'swal-wide',

            title: 'swal-title',

            confirmButton: 'swal-button'

          }

        });

      });

  }



  function redirectToBestSeller() {

    window.location.href = "https://www.laciasmara.com/shop/category/best-seller";

  }



  function redirectToNewArrivals() {

    window.location.href = "https://www.laciasmara.com/shop/category/new-arrivals";

  }

</script>