<?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>
  @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;
    }
  }

  .mobile-checkout-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ddd;
  }

  .mobile-checkout-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1040;
    /* below Bootstrap modal default */
  }

  .mobile-checkout-footer .checkout-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-checkout-footer .total-price {
    font-weight: bold;
    font-size: 16px;
    color: #000;
  }

  .mobile-checkout-footer .btn {
    margin-left: 10px;
    padding: 8px 16px;
    font-size: 14px;
  }

  #spcview {
    display: none;
  }

  @media (max-width: 767px) {
    #gt_float_wrapper {
      display: none !important;
    }

    #btn-responsivehide {
      display: none !important;
    }

    #spcview {
      display: block !important;
    }
  }

  .modal {
    z-index: 1100 !important;
  }

  .modal-backdrop {
    z-index: 1090 !important;
  }

  #footer {
    display: none !important;
  }

  .back-to-top {
    display: none !important;
  }

  .iti--container {
    z-index: 9999 !important;
  }

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

    .nav-item {
      width: calc(50% - 10px);
      margin: 0;
    }

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

  .imgMobile {
    display: none;
  }

  .imgDesktop {
    display: block;
  }

  @media (max-width: 992px) {
    .imgDesktop {
      display: none !important;
    }

    .imgMobile {
      display: block !important;
    }
  }


  .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;
    }

    .mobile-checkout-footer .checkout-container {
      width: 86%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  @media screen and (max-width: 1550px) and (min-width: 768px) {
    .search-text {
      height: 60px;
      width: 500px !important;
    }
  }

  .search-btn {
    background: var(--main-color-new-theme);
    display: none;
    position: relative;
    left: -40px;
    z-index: 9;
    border-radius: 0px 30px 30px 0px;
    height: 40px;
    /* padding: 2px 23px 14px 21px; */
    color: white;
    margin-bottom: 0px !important;
  }
  .row{
    margin-left: 0px !important;
    margin-right: 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-image: url('<?= base_url('assets/img/pattern-bg.jpg'); ?>');background-size: cover; background-repeat: no-repeat;">
    <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>

                <div class="col-md-3">
                  <h2 class="bottomborder text-center pb-1 mb-2" style="font-weight:bold!important;font-size: 25px!important;">MAKE A DONATION</h2>
                </div>

                <div class="col-md-5">
                  <div class="d-flex justify-content-end align-items-end" id="btn-responsivehide" 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 d-none d-md-inline" onclick="CartCheckLogin('donations')">
                        Proceed To Checkout
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>



            <div class="justify-content-center align-items-center filter-tab mt-3 mb-5" style="overflow:hidden">
              <!-- ============================== -->
              <div class="tab-content responsive-container" id="myTabContent">
              
                <div class="tab-content" id="myTabContent">

            


                      <div class="tab-pane table-responsive fade shadow panettttttttt1 show active" id="home-tab-pane1" role="tabpanel" aria-labelledby="home-tab1" 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
                        // echo $val['refDataName'];
                        // echo '<br><br><br><br><br><br>';
                        $services = getDonationsByDonationsTypes('JWELLERY', $cartList);
                        $services1 = getDonationsByDonationsTypes('GENERAL DONATIONS', $cartList);
                        if ($services == '<div class="text-center text-danger my-5">There are no Services in this category.</div>' && $services1 == '<div class="text-center text-danger my-5">There are no Services in this category.</div>') {
                          echo '<div class="text-center text-danger my-5">There are no Services in this category.</div>';
                        } else {
                          echo $services == '<div class="text-center text-danger my-5">There are no Services in this category.</div>' ? '' : $services;
                          echo $services1 == '<div class="text-center text-danger my-5">There are no Services in this category.</div>' ? '' : $services1;
                        }
                        ?>

                        <div id="emptyServices" style="padding: 4px 66px; font-size: 21px; font-weight: 700;"></div>
                      </div>
                 
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12">
          <div class="mobile-checkout-footer d-md-none">
            <div class="checkout-container">
              <span>
                <i class="fa fa-shopping-cart" style="color:#000030;"></i>
                <span class="cart-count text-dark" style="font-size: 14px!important;"><?= $cart_count ?></span>
              </span>
              <span class="total-price">
                <?= $currencySymbol ?> <span class="allPrice"><?= sprintf("%.2f", $cartList['totalPrice']); ?></span>
              </span>
              <a href="javascript:void(0)" class="btn btn-success paymentBtn" onclick="CartCheckLogin('donations')">
                Proceed To Checkout
              </a>
            </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 = $(".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();



      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'));
        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 (parseInt($(".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: '#005D4B',
      });


    }

  }

  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: '#005D4B',
      });
    }
  }

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

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