$(document).ready(function () {
  setTimeout(() => {
    loadDonations();
  }, 10000);

  loadTitleDescription();
  loadAbout();
  loadReason()
  loadStatistic();
  loadPrograms();
  loadDistributionData();
});

function showDonationToast(donations) {
  let index = 0;

  function showNextToast() {
    if (donations.length === 0) return;

    Toastify({
      text: `<span class="d-flex justify-content-between align-items-center w-100">
                        <span class="iconify fs-3" data-icon="mdi:donation"></span>
                        <b class="ms-3">${donations[index].name} telah berdonasi!</b>
                   </span>`,
      duration: 3000,
      gravity: 'top',
      position: 'right',
      offset: { y: '70px' },
      style: {
        background: '#009688',
        borderRadius: '8px',
        minWidth: '250px',
        width: '270px',
        boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)',
      },
      stopOnFocus: true,
      escapeMarkup: false,
    }).showToast();

    index = (index + 1) % donations.length;

    setTimeout(showNextToast, 30000);
  }

  showNextToast();
}

function fetchData(type, callback) {
  $.ajax({
    url: '/get_data',
    method: 'GET',
    data: { type: type },
    dataType: 'json',
    success: function (response) {
      if (response.success) {
        callback(response.data);
      } else {
        console.error('Error:', response.message);
      }
    },
    error: function (xhr, status, error) {
      console.error('Error fetching data:', error);
    },
  });
}

// Load citizens data
function loadDonations() {
  fetchData('citizens', function (data) {
    if (data.length > 0) {
      showDonationToast(data);
    }
  });
}

// Load statistics data
function loadStatistic() {
  fetchData('statistics', function (data) {
    $('#beneficaries_total').text(data.beneficaries_total + ' orang');
    // $('#beneficaries_monthly').text(data.beneficaries_monthly);
    $('#citizens_total').text(data.citizens_total + ' orang');
    $('#saldo_total').text(data.saldo_total);
  });
}

// Load programs data
async function loadPrograms() {
  fetchData('programs', function (data) {
    let html = '';
    if (data.length > 0) {
      data.forEach((program) => {
        html += `
          <div class="col-md-6 col-lg-4 mb-3">
            <div class="bg-gray text-white p-4 rounded d-flex align-items-center" style="min-height: 110px;">
              <div class="flex-shrink-0 me-3">
                <img src="${program.image}" alt="Icon" class="img-fluid" style="width: 50px; height: 50px;">
              </div>
              <p class="fw-bold mb-0 fs-5">${program.program_name}</p>
            </div>
          </div>`;
      });
    } else {
      html =
        '<p class="text-center text-muted">Tidak ada program tersedia.</p>';
    }
    $('#program_list').html(html);
  });
}

// Load title description
function loadTitleDescription() {
  fetchData('title_description', function (data) {
    if (!data || !data.subtitle) {
      $('#title_description').text('Tidak ada deskripsi tersedia.');

      const imageUrl = '/assets/themes/landing_page/images/background.jpg';
      $('.background-image').css({
        'background-image': 'url("' + imageUrl + '")',
        'background-color': 'transparent',
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'width': '100%',
        'height': '100%',
        'background-size': 'cover',
        'background-position': 'center',
        'background-repeat': 'no-repeat',
        'z-index': '-1'
      });
      return;
    }

    $('#title_description').text(data.subtitle);

    if (data.image) {
      const imageUrl = '/uploads/' + data.image;
      $('.background-image').css({
        'background-image': 'url("' + imageUrl + '")',
        'background-color': 'transparent',
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'width': '100%',
        'height': '100%',
        'background-size': 'cover',
        'background-position': 'center',
        'background-repeat': 'no-repeat',
        'z-index': '-1'
      });
    } else {
      const imageUrl = '/assets/themes/landing_page/images/background.jpg';
      $('.background-image').css({
        'background-image': 'url("' + imageUrl + '")',
        'background-color': 'transparent',
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'width': '100%',
        'height': '100%',
        'background-size': 'cover',
        'background-position': 'center',
        'background-repeat': 'no-repeat',
        'z-index': '-1'
      });
    }
  });
}

// Load about
function loadAbout() {
  fetchData('about', function (data) {
    if (!data || !data.description) {
      $('#about_description').text('Tidak ada deskripsi.');

      const imageUrl = '/assets/themes/landing_page/images/background.jpg';
      $('#about_image').css({
        'background-image': 'url("' + imageUrl + '")',
      });
      return;
    }

    $('#about_description').text(data.description);

    if (data.image) {
      const imageUrl = '/uploads/' + data.image;
      $('#about_image').css({
        'background-image': 'url("' + imageUrl + '")',
      });
    } else {
      const imageUrl = '/assets/themes/landing_page/images/background.jpg';
      $('#about_image').css({
        'background-image': 'url("' + imageUrl + '")',
      });
    }
  });
}

// Load reason data
async function loadReason() {
  fetchData('reason', function (data) {
    let html = '';
    if (data.length > 0) {
      data.forEach((reason) => {
        html += `
          <div class="d-flex align-items-center my-4">
            <div class="flex-shrink-0">
              <span class="iconify fs-1 text-green" data-icon="lets-icons:check-fill"></span>
            </div>
            <div class="ms-3 flex-grow-1">
              <p class="fw-bold fs-5 mb-0">${reason.reason_list}</p>
            </div>
          </div>
          `;
      });
    } else {
      html =
        '<p class="text-center text-muted">Tidak ada program tersedia.</p>';
    }
    $('#reason_list').html(html);
  });
}

function loadDistributionData() {
  $.ajax({
    url: '/detail_list',
    type: 'GET',
    dataType: 'json',
    success: function (response) {
      let html = '';
      response.data.forEach(function (item) {
        let date = new Date(item.date);
        let formattedDate = date.toLocaleDateString('id-ID', {
          day: '2-digit',
          month: 'long',
          year: 'numeric',
        });
        html += `
                  <div class="card-swiper swiper-slide bg-white">
                      <div class="image-box">
                          <img src="${item.image}" alt="Foto" />
                      </div>
                      <div class="details">
                          <p class="fw-bold fs-5 mb-3 card-title">${truncateText(item.program_name, 39)}</p>
                          <p class="mb-3 secondary">${formattedDate}</p>
                          <a href="/detail/${item.slug}" class="btn btn-green w-100 fw-bold text-white">Detail</a>
                      </div>
                  </div>
              `;
      });
      $('#distribution_list').html(html);
    },
    error: function () {
      Toastify({
        text: 'Gagal mengambil data riwayat penyaluran.',
        duration: 3000,
        gravity: 'top',
        position: 'right',
        style: { background: '#E53E3E' },
      }).showToast();
    },
  });
}

function truncateText(text, maxLength) {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength) + '...';
}