<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>

<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/services-cart.css')?>">
<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 = getCurrencySymbol();
  $GeneralSettings = GeneralSettings();
  ?>

  <!-- ======= Coming Soon ======= -->
  <section id="temple-services" class="temple-services">
    <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">
              <div class="row" 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" style="display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;">

                      <!-- Search Bar -->
                      <div class="px-2">
                        <input type="search" name="q" id="search" class="search-text searchKey" placeholder="Search..." autocomplete="off" style="margin-left: 10px;    width: 400px;height: 56px;">
                      </div>
                      <!-- Search Bar -->
                    </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="col-md-5">
                  <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;"></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>
            </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 type="text/css">
                   .nav-link2.active {
                    color: #fff!important;
                    background: var(--main-color-new-theme)!important;
                    border: 2px solid #f7c01b!Important;
                    border-color: #f7c01b!Important;
                    font-weight: 500;
                  }
                  .nav-link2 {
                    padding: 8px 10px!important;
                    font-size: 16px!important;
                    color: #000!important;
                    border-radius: 5px!important;
                    font-weight: 500;
                    margin-bottom: 18px!important;
                    background: #c5c5c5!important;
                    margin-right: 9px!important;

                    font-family: sans-serif!important;
                  }
                  .nav-tabs {
                    --bs-nav-tabs-border-width: 0; 
                    --bs-nav-tabs-border-radius: 0;  
                  }
                </style>

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


                  <?php if ($val['refDataName'] == 'TEMPLE IMPROVEMENTS') { ?>
                  

                  <li class="nav-item" role="presentation">
                    <button class="nav-link nav-link2 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="true" style="padding: 9px 6px!important;font-size: 14px!important;"><?= $val['displayName'] ? $val['displayName'] : $val['refDataName']; ?></button>
                  </li>

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

                  <div class="tab-pane table-responsive fade shadow active 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::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('TEMPLE IMPROVEMENTS', $cartList);
                    echo $services;
                    ?>

                    <div id="emptyServices" style="padding: 4px 66px; font-size: 21px; font-weight: 700;"></div>
                  </div>
              </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() {

    // 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 = $("#table tr");
      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');


      // loader.on();

      
      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'));
      }

      var anyAmountCheck = parseFloat($("#anyAmtDonation"+id).val());
      if(anyAmountCheck < 0 || anyAmountCheck == 0)
      {
        $(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).prop('checked', false);
        $("#anyAmtDonation"+id).focus();
        $("#anyAmtDonation"+id).notify(
          "Please Enter Any Amount!",
          {
            position: "right"
          }
          );
        addtoCartStatus = false;
        // return false;
      }

      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;

        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>

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