<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<!-- light box -->
<link href="<?= base_url('assets/css/lightbox.min.css'); ?>" rel="stylesheet" />
<script src="<?= base_url('assets/js/lightbox-plus-jquery.min.js'); ?>"></script>

<link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/services-cart.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/custom-buttons.css'); ?>">
<style>
  .search-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 1rem !important;
    /* margin-top: 4rem !important; */
  }

  .search-icon {
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
  }

  .search-input {
    width: 0;
    padding: 0;
    /*opacity: 0;*/
    transition: all 0.3s ease;
    border: 1px solid #ccc;
  }

  .search-input.open {
    /* width: 200px; */
    padding: 5px 5px 5px 39px;
    opacity: 1;
  }

  #search_col {
    display: flex;
    align-items: center;
    justify-content: end;
  }

  @media (max-width: 768px) {
    .nav-tabs {
      display: flex;
      justify-content: space-between;
      padding: 0;
    }

    .nav-item {
      width: calc(50% - 10px);
      /* Adjust width of each button and consider spacing */
      margin: 0;
    }

    .img-responsive {
      height: auto !important;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 1550px) and (min-width: 768px) {
    .search-text {
      height: 60px;
      width: 500px !important;
    }
  }
  .row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
</style>

<main id="main">
  <?php
  $cartList = $this->session->userdata('donations_cart');
  $cart_count = isset($cartList['ids']) && $cartList['ids'] ? count($cartList['ids']) : 0;
  $cart_count = $cart_count != '' ? $cart_count : 0;
  if (empty($cartList['ids'])) {
    $cartList = array('totalPrice' => 0.00, 'ids' => array());
  }
  $currencySymbol = isset($currency['currencySymbol']) ? (CheckEmptyNullVar($currency['currencySymbol']) != '' ? $currency['currencySymbol'] : '$') : '$';
  $GeneralSettings = GeneralSettings();
  ?>

  <!-- ======= Coming Soon ======= -->
  <section id="temple-services" class="temple-services" style="background-size: auto;">
    <!-- ======================= -->

    <div class="row mb-0 pb-0" style="padding: 0px 50px;">

      <center class="mb-1">
        <h2 class="text-center mb-0" style="font-weight:bold!important;font-size: 30px!important;text-shadow: 1px 1px 5px #FA9D1E;">DONATIONS</h2>
        <img src="<?= base_url('assets/img/border.png') ?>" width="20%" alt="DONATIONS" style="height:auto!important;">

      </center>


    </div>

    <!-- ======================= -->
    <div class="bg-image shadow-1-strong">
      <div class="row">
        <div class="col-md-12 mx-auto">
          <div class="row m-0 p-0">
            <div class="col-md-12" id="search_col">
              <div class="search-container">
                <input type="search" name="q" id="search" class="search-input search-text searchKey d-none" placeholder="Search..." autocomplete="off" style="">
                <span class="search-icon" id="searchIcon">🔍</span>
              </div>
              <!-- <div class="col-md-12">
              <div class="row" id="searchField">
                <div class="col-md-12 m-0 p-0">

                  <div class="px-5">
                    <input type="search" name="q" id="search" class="search-text searchKey" placeholder="Search..." autocomplete="off" style="margin-left: 10px;height: 60px;width:100%!important;">
                  </div>
                </div>
              </div> -->

              <!-- <div class="row mt-5" style="display: flex; flex-direction: row; align-content: flex-end; align-items: flex-end;">



                <div class="col-md-4  px-4" style="display: flex;align-items: flex-end;">
                  <div class="row m-0 p-0">
                    <div class="col-md-12 m-0 p-0">
                    </div>
                  </div>
                </div>

                <div class="col-md-3">
                  <h2 class="bottomborder text-center pb-1 mb-2" style="font-weight:bold!important;font-size: 25px!important;">DONATIONS</h2>
                </div> -->
              <div class="d-flex justify-content-end align-items-end" style="border-bottom: 20px;">
                <div class="row px-0 mx-0">
                  <!-- <div class="col-md-12">
                    <div class="d-flex justify-content-end align-items-end" style="border-bottom: 20px;">
                      <div class="text-white px-4">
                        <div class="row">
                          <div class="col-md-9 text-start text-dark">
                            <span style="padding-left: 34px;">Total Amount</span>
                          </div>
                        </div>
                        <span style="padding-right:6px!important">
                          <a href="javaScript:void(0)" onclick="ViewCart()"> <i class="fa fa-shopping-cart fa-2x" style="color:#000030;font-size: 2.2rem;"></i>
                            <span class="cart-count text-dark" style="font-size: 14px!important;"><?= $cart_count ?></span></a>
                        </span>
                        <label class="label label-primary price-span"><?= $currencySymbol != '' ? $currencySymbol : '$ '; ?> <span class="allPrice"><?= sprintf("%.2f", $cartList['totalPrice']); ?></span></label>
                        <a href="javaScript:void(0)" class="btn btn-success paymentBtn" onclick="CartCheckLogin('donations')">
                          Proceed To Checkout
                        </a>
                      </div>
                    </div>
                  </div> -->

                  <div class="col-md-12">
										<div class="d-flex justify-content-end align-items-end" style="border-bottom: 20px;" id="RightField">
											<div class="text-white px-4">
												<div class="row">
													<div class="col-md-9 text-start text-dark">
														<span class="fw-bold" style="padding-left: 34px;">Total Amount</span>
													</div>
												</div>



												<div style="display: flex;align-items: flex-end;">
													<span style="padding-right:6px!important">
														<a href="javaScript:void(0)" onclick="ViewCart()"> <i class="fa fa-shopping-cart fa-2x" style="color:#000030;"></i>
															<span class="cart-count text-dark" style="font-size: 14px!important;"><?= $cart_count ?></span></a>
													</span>
													<label class="label label-primary price-span"><?= $currencySymbol; ?>&nbsp;<span class="allPrice"><?= sprintf("%.2f", $cartList['totalPrice']); ?></span></label>



													
														<a href="javaScript:void(0)" class="btn btn-success paymentBtn" onclick="CartCheckLogin('donations')">Proceed To Checkout
															
														</a>
												

												</div>
											</div>
										</div>
									</div>
                </div>
              </div>

            </div>

            <div class="justify-content-center align-items-center filter-tab mt-3" style="overflow:hidden">
              <!-- ============================== -->
              <div class="tab-content responsive-container" id="myTabContent">
                <ul class="nav nav-tabs mt-2" id="myTab" role="tablist" style="margin-bottom: 12px;">

                  <?php if (!empty($donationCategoryTypes)) {
                    foreach ($donationCategoryTypes as $key => $val) {
                  ?>


                      <li class="nav-item" role="presentation">


                        <?php
                        $isActive = ($key == 0);
                        $buttonStyle = $isActive
                          ? "background: var(--main-color-new-theme) !important; color: white !important;"
                          : "background: white; color: black;";
                        ?>
                        <div class="frame" style="">
                          <button class="custom-btn btn-15 <?= ($isActive) ? 'active' : ''; ?>"
                            id="home-tab<?= $val['_id']; ?>"
                            data-bs-toggle="tab"
                            data-bs-target="#home-tab-pane<?= $val['_id']; ?>"
                            type="button"
                            role="tab"
                            aria-controls="home-tab-pane<?= $val['_id']; ?>"
                            aria-selected="<?= ($isActive) ? 'true' : 'false'; ?>"
                            style="font-weight:700; font-size:16px; background-size:cover; border-radius:5px !important; padding:12px 23px; box-shadow:1px 1px 10px black; margin-bottom:10px; <?= $buttonStyle; ?>">
                            <?= (@$val['displayName'] ? @$val['displayName'] : $val['refDataName']); ?>
                          </button>
                        </div>



                      </li>

                  <?php }
                  } ?>
                </ul>
                <div class="tab-content" id="myTabContent">

                  <?php if (!empty($donationCategoryTypes)) {
                    foreach ($donationCategoryTypes as $key => $val) { ?>


                      <div class="tab-pane table-responsive fade shadow panettttttttt<?= $val['_id']; ?> show <?= ($key == 0) ? 'active' : ''; ?>" id="home-tab-pane<?= $val['_id']; ?>" role="tabpanel" aria-labelledby="home-tab<?= $val['_id']; ?>" tabindex="0">
                        <style type="text/css">
                          .amount-input-donations::placeholder {
                            color: #d6fff7 !important;
                            /* Replace 'your_color_here' with your desired color */
                            font-size: 15px !important;
                            /* Replace with your desired font-size */
                            font-weight: bold !important;
                            /* Replace with your desired font-weight */
                          }
                        </style>

                        <?php
                        $services = getDonationsByDonationsTypes($val['refDataName'], $cartList);
                        echo $services;
                        ?>

                        <div id="emptyServices" style="padding: 4px 66px; font-size: 21px; font-weight: 700;"></div>
                      </div>
                  <?php }
                  } ?>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Coming Soon -->


</main><!-- End #main -->



<?php $this->load->view('includes/footer') ?>

<script type="text/javascript" src="<?= base_url('assets/js/paging.js'); ?>"></script>




<script type="text/javascript">
  $(document).ready(function() {
    $("#searchIcon").click(function() {
      $("#search").toggleClass("d-none");

      if ($("#search").hasClass("d-none")) {
        $("#search").val('');
        $(".serviceSearch").show();
        if ($(window).width() < 768) {
          $(".search-container").css("order", "1"); // Moves first div to second position
          $(".d-flex.justify-content-end").css("order", "2");
          $("#search_col").css("display", "flex");
        }
      } else {
        if ($(window).width() < 768) {
          $(".search-container").css("order", "2"); // Moves first div to second position
          $(".d-flex.justify-content-end").css("order", "1");
          $("#search_col").css("display", "flow");
        }
      }
    });
  });
  $(document).ready(function() {

    // Custom Pagination


    var Page_limit = $("#pageLength").val();
    if (Page_limit > 20) {
      $('.servicesDataTable').paging({
        limit: Page_limit
      });
    }

    $("[data-page='0']").click();

    // TimePicker
    $('.timepicker-services').mdtimepicker();
  });

  $(document).ready(function() {
    $("#search").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      var $tableRows = $(".serviceSearch");
      var noResults = true;

      $tableRows.filter(function() {
        var rowText = $(this).text().toLowerCase();
        var isMatch = rowText.indexOf(value) > -1;
        $(this).toggle(isMatch);
        if (isMatch) {
          noResults = false;
        }
      });

      if (noResults && value !== "") {
        $("#emptyServices").text("No donations found!").show();
      } else {
        $("#emptyServices").hide();
      }
    }).on("search", function() {
      if ($(this).val() === "") {
        $("#table tr").show();
        $("#emptyServices").hide();
      }
    });
  });
// ===========================

  // Custom Search Bar End

  function addTocart() {

    var totalPrice = 0;
    var cart_type = 'DONATIONS';
    var ids = [];
    var qty = [];
    var ctg = [];
    var serviceTypes = [];
    var serviceName = [];
    var serviceAmount = [];
    var description = [];
    var image = [];
    var cart_ctg = [];
    $('input[name="services_id[]"]:checked').each(function() {
      id = $(this).attr('data-id');

      // alert($(this).attr('data-price'));

      // loader.on();


      if ($(this).attr('is_date_required') == 'YES') {


        if ($("#datepicker_" + id).val().length == 0) {
          $(this).prop('checked', false);
          $("#datepicker_" + id).focus();
          $("#datepicker_" + id).notify(
            "Please select date!", {
              position: "top"
            }
          );
          addtoCartStatus = false;
          return false;
        }

      }



      var anyAmountCheck = parseFloat($("#anyAmtDonation" + id).val());
      if (anyAmountCheck < 0 || anyAmountCheck == 0) {
        $(this).attr('data-price', 0.00);
        $(this).prop('checked', false);
        $("#anyAmtDonation" + id).focus();
        $("#anyAmtDonation" + id).notify(
          "Entered Amount Must Be Greater Than 0!", {
            position: "right"
          }
        );
        addtoCartStatus = false;
        // return false;
      }


      if ($("#anyAmtDonation" + id).val() == '') {
        $(this).attr('data-price', 0.00);
        $(this).prop('checked', false);
        $("#anyAmtDonation" + id).focus();
        $("#anyAmtDonation" + id).notify(
          "Please Enter Any Amount!", {
            position: "left"
          }
        );

        addtoCartStatus = false;
        // return false;
      }

      if ($(this).attr('data-price') != 0) {
        var init_qty = parseFloat($("#quantity-input" + id).val());
        init_qty = init_qty ? parseFloat(init_qty) : 1;
        totalPrice = parseFloat(totalPrice) + (parseFloat($(this).attr('data-price')) * init_qty);
      } else {
        totalPrice += parseFloat($(this).attr('data-price'));
      }
      if ($(this).attr('data-price') != 0) {

        ctg.push($(this).attr('data-category'));
        serviceTypes.push($(this).attr('data-service-type'));
        serviceName.push($(this).attr('data-service-name'));
        image.push($(this).attr('data-image'));
        description.push($(this).attr('data-description').replace(/['"`]/g, ''));
        cart_ctg.push($(this).attr('cart_category'));
        serviceAmount.push($(this).attr('data-price'));
        ids.push($(this).attr('data-id'));
        qty.push(init_qty);
      }
    });

    // $(".cart-count").text(ids.length);
    $(".allPrice").text((totalPrice / 1).toFixed(2));
    $.ajax({
      type: "POST",
      url: "<?= base_url('Donations/addCart'); ?>",
      data: {
        ids: ids,
        totalPrice: totalPrice,
        qty: qty,
        ctg: ctg,
        serviceTypes: serviceTypes,
        serviceName: serviceName,
        serviceAmount: serviceAmount,
        cart_type: cart_type,
        image: image,
        description: description,
        cart_ctg: cart_ctg
      },
      success: function(result) {
        var responseObject = JSON.parse(result);
        var totalPrice = responseObject.totalPrice;
        updateCartCount();
        console.log(totalPrice);
        // loader.off();
      }
    });

  }

  function quantityMinusFunction(id) {

    var totalPrice = 0;
    var init_qty = parseInt($('#quantity-input' + id).val());
    if (init_qty > 1) {
      init_qty = init_qty ? parseInt(init_qty) - 1 : 0;
      $('#quantity-input' + id).val(init_qty);
    }
    var initialPrice = $("#price_" + id).text();
    var initialResultAmt = initialPrice.replace(/\$/g, "");
    var substractiveAmt = init_qty * initialResultAmt;
    $("#Totalprice_" + id).text(substractiveAmt.toFixed(2));
    addTocart();
  }

  function quantityPlusFunction(id) {
    var totalPrice = 0;
    var init_qty = parseInt($('#quantity-input' + id).val());
    init_qty = init_qty ? parseInt(init_qty) + 1 : 0;
    $('#quantity-input' + id).val(init_qty);
    var initialPrice = $("#price_" + id).text();
    var initialResultAmt = initialPrice.replace(/\$/g, "");
    var substractiveAmt = init_qty * initialResultAmt;
    $("#Totalprice_" + id).text(substractiveAmt.toFixed(2));
    addTocart();
  }

  function ViewCart() {
    // if ($(".cart-count").text() > 0) {
    //   window.location.href = "<?= base_url('Donations/ViewCart') ?>";

    // } else {
    //   swal({
    //     title: "Your cart is empty!",
    //     text: "Please add some items to your cart.",
    //     icon: "warning",
    //     confirmButtonText: 'OK',
    //     confirmButtonColor: 'var(--main-color-new-theme)',
    //   });


    // }

  }

  function CartCheckLogin(page) {
    if (parseInt($(".cart-count").text()) > 0) {
      loader.on();
      var page_name = page;
      event.preventDefault();
      $.ajax({
        url: "<?= base_url('check-login-status') ?>",
        type: "POST",
        dataType: "json",
        success: function(data) {
          loader.off();
          if (data == 0) {
            openLoginModal(page_name);
          } else {
            if (page_name == 'donations') {
              window.location.href = "<?= base_url('donations/checkout') ?>";
            }
          }
        }
      });
    } else {
      swal({
        title: "Your cart is empty!",
        text: "Please add some items to your cart.",
        icon: "warning",
        confirmButtonText: 'OK',
        confirmButtonColor: 'var(--main-color-new-theme)',
      });
    }
  }

  function changebtnStyles(id) {
    $(".styles").removeClass('active-services');
    $(".styles").addClass('services');
    $("#" + id).addClass('active-services');
    $("#" + id).removeClass('services');
  }
</script>

<!-- JavaScript to Toggle Active Styling -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('.custom-btn.btn-15');
    buttons.forEach(function(btn) {
      btn.addEventListener('click', function() {
        // Remove active styling from all buttons
        buttons.forEach(function(b) {
          b.classList.remove('active');
          b.style.background = "white";
          b.style.color = "black";
          b.setAttribute('aria-selected', 'false');
        });
        // Apply active styling to the clicked button
        this.classList.add('active');
        this.style.background = "var(--main-color-new-theme)";
        this.style.color = "white";
        this.setAttribute('aria-selected', 'true');
      });
    });
  });
</script>

<?php $this->load->view('includes/script') ?>