@extends('layouts.new-layout')
@php
$userID = auth()->user() ? auth()->id() : 1;
@endphp
@section('content')
<style>
  .btn-blue5{
    background-color: blue;
  }
</style>
<section class="bg-bb1">
<div class="container">
<div class="text-center padding-top-section"><h1 class="text-white">Cart</h1></div></div>
</section>

<!-- ============================================-->

<!-- ============================================-->
<section class="py-5">
  <div class="container-fluid">
    <div class="row d-flex justify-content-center my-4">
</div>
      <div class="col-md-12" data-aos="fade-up">
        <div class="card mb-4">
          <div class="card-header py-3">
            <h5 class="mb-0">Cart - {{ count($cartItems) }} Items</h5>
          </div>
          <div class="card-body">
            {{-- @foreach($cartItems as $cartItem)
            
            <!-- Single item -->
            <div class="row">
              <div class="col-lg-2 col-md-12 mb-4 mb-lg-0">
                <!-- Image -->
                <div class=" rounded">
                  @if($cartItem->associatedModel->image)
                  <img style="max-height:100px;" src="{{asset('storage/'.$cartItem->associatedModel->image)}}" alt="...">
                  @else
                  <img style="max-height:100px;" src="/new-assets/img/gallery/shaker-maple-natural1.png" alt="...">
                  @endif
                </div>
                <!-- Image -->
              </div>

              <div class="col-lg-5 col-md-6 mb-4 mb-lg-0">
                <!-- Data -->
                <p><strong> {{ $cartItem->name }} </strong></p>
                <!-- <p>Color:{{ empty($cartItem->color) ? '' : $cartItem->color }}</p> -->
                <button type="button" class="btn btn-blue5 btn-sm me-1 mb-2" onclick="remove_item('{{ $cartItem->id }}')" data-mdb-toggle="tooltip" title="Remove item">
                  <i class="fa fa-trash"></i>
                </button>
                <!-- <button type="button" class="btn btn-yellow btn-sm mb-2" data-mdb-toggle="tooltip"
                        title="Move to the wish list">
                        <i class="fa fa-heart"></i>
                      </button> -->
                <!-- Data -->
              </div>

              <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                <!-- Quantity -->
                <div class="d-flex mb-4" style="max-width: 300px">
                  <button class="btn btn-blue5 px-3 me-2" onclick="decreaseQuantity('{{ $cartItem->id }}')">
                    <i class="fa fa-minus"></i>
                  </button>

                  <div class="form-outline">
                    <input id="quantity-{{ $cartItem->id }}" min="0" name="quantity" value="{{ $cartItem->quantity }}" type="number" class="form-control p-2" style="color:#000 !important; margin-top: 19px;" />
                  </div>

                  <button class="btn btn-blue5 px-3 ms-2" onclick="increaseQuantity('{{ $cartItem->id }}')">
                    <i class="fa fa-plus"></i>
                  </button>
                </div>
                <!-- Quantity -->


              </div>
            </div>
            <hr class="my-4" />
            @endforeach --}}
            @foreach($cartItems as $cartItem)
              <div class="position-relative selected-product d-md-flex items-align-center"
                  id="cart_row-3143">
                  <div class="item-thumbnail image-list-cart">
                      <a href="">
                          @if($cartItem->associatedModel->image)
                            <img class="object-scale-down" src="{{asset('storage/'.$cartItem->associatedModel->image)}}" width="80" height="80" data-max-width="80" data-max-height="80" alt="Image">
                          @else
                            <img class="object-scale-down" src="/new-assets/img/gallery/shaker-maple-natural1.png" width="80" height="80" data-max-width="80" data-max-height="80" alt="Image">
                          @endif
                      </a>
                  </div>
                  <div class="item-info align-middle cart-product-name">
                      <a href="">
                          <h6 class="item-title">{{ $cartItem->name }} </h6>
                      </a>
                  </div>
                  <div class="item-qty mt-2 align-middle cart-qunatity">
                      <div class="product-quantity justify-content-center d-flex">
                          <div class="quantity quantity-2 YK-quantity">
                              <span class="decrease" onclick="decreaseQuantity('{{ $cartItem->id }}')">
                                  <i class="fas fasu fa-minus"></i>
                              </span>


                              <input class="qty-input no-focus YK-qty" data-page="product-view"
                                  title="Available Quantity" id="quantity-{{ $cartItem->id }}" min="0" name="quantity" value="{{ $cartItem->quantity }}">
                              <span class="increase" onclick="increaseQuantity('{{ $cartItem->id }}')"> <i
                                      class="fas fasu fa-plus"></i></span>
                          </div>
                      </div>
                  </div>
                  <div class="">
                      <div class="mrp">
                          <span>Price:</span>
                          <span><i class="fas fa-dollar-sign"></i>{{ $cartItem->price }}</span>
                      </div>

                      <!-- <div>
                          <span>Subtotal: </span>
                          <span><i class="fas fa-dollar-sign"></i><strong data-label="subtotal"
                                  data-cart="3143">70</strong> </span>
                      </div> -->
                  </div>
                  <div class="align-middle delet-cart end-0 position-absolute ps-2 text-end top-0 w-auto">
                      <button class="border-0 cart-trash" onclick="remove_item('{{ $cartItem->id }}')" data-mdb-toggle="tooltip"><i
                              class="fa fa-trash green-text" aria-hidden="true"></i>
                      </button>

                  </div>
              </div>
            @endforeach
            <!-- Single item -->
            <div class="d-flex justify-content-between w-100 align-items-center">
              <a href="{{ route('welcome')}}" style=" border: 1px solid #1a0606a6;" class="btn btn-link"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i>   Continue Shopping</a>
              <button type="button" class="btn-blue5" onclick="openModalCart()">
                Place Order
              </button>
            </div>
          </div>
        </div>
        <!-- <div class="card mb-4">
                <div class="card-body">
                  <p><strong>Expected shipping delivery</strong></p>
                  <p class="mb-0">12.04.2024 - 14.04.2024</p>
                </div>
              </div> -->
        <div class="card mb-4 mb-lg-0">
          <div class="card-body">
            <p><strong>We accept</strong></p>
            <img class="me-2" width="45px" src="{{ asset('/new-assets/img/gallery/visa.svg') }}" alt="Visa" />
            <img class="me-2" width="45px" src="/new-assets/img/gallery/amex.svg" alt="American Express" />
            <img class="me-2" width="45px" src="/new-assets/img/gallery/mastercard.svg" alt="Mastercard" />

          </div>
        </div>
      </div>
      <div class="col-md-4 " data-aos="fade-up">
        <div class="card mb-4">
          <div class="card-header py-3">
            <h5 class="mb-0">Summary</h5>
          </div>
          <div class="card-body">
            <ul class="list-group list-group-flush">
              <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
                Products
                <span class="total">${{$total}}</span>
              </li>
              <!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                      Shipping
                      <span>Gratis</span>
                    </li> -->
              <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
                <div>
                  <strong>Total amount</strong>
                  <strong>
                    <p class="mb-0">(including VAT)</p>
                  </strong>
                </div>
                <span><strong class="total">${{$total}}</strong></span>
              </li>
            </ul>

            <button type="button" class="btn-blue5" onclick="openModalCart()">
              Confirm Order
            </button>

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


<!-- <section> close ============================-->

<script>
  var btn = $("#button");

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass("show");
    } else {
      btn.removeClass("show");
    }
  });

  btn.on("click", function(e) {
    e.preventDefault();
    $("html, body").animate({
      scrollTop: 0
    }, "300");
  });
</script>
<script>
  AOS.init();
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.dropdown-toggle').dropdown();
  });
</script>
<style>
  .modal-show {
    display: block !important;
  }
</style>

@if($cartItems->count())
<dialog id="quotation-modal" class="" style="overflow-x: hidden;">
       <a href="/cart" class="btn-close close position-absolute" style="top: 1rem;right: 1rem;border: 1px solid;border-radius: 50px; z-index: 99999999;" data-dismiss="modal" aria-hidden="true"></a>
        <div class="d-flex">
            <div class="left-panel">            
                <h1 class="mt-4">Great!.Please fill Your</h1>
                <p class="percentage">Details</p>
                <div class="things">
                  <div class="content">
                    <div class="arrow">
                      <div class="curve"></div>
                      <div class="point"></div>
                    </div>
                  </div> 
                </div>
                <img class="d-inline-block w-100" src="/new-assets/img/gallery/LOGO-CV1.png" alt="logo">
            </div>
            <div class="right-panel" style="z-index: 999;">
                <!-- <h2>Enter your email below to unlock</h2> -->
                        <form action="{{route('quotation.store')}}" method="post" id="quotation_form">
          @csrf
          <div class="row">
            <div class="col-md-6 ">
              <label for="first_name" class="form-label labelfot">First Name</label>
              <input type="text" class="form-control p-2 bg-transparent" name="first_name" id="first_name" required="" style="color: #000 !important;">
            </div>
            <div class="col-md-6 ">
              <label for="last_name" class="form-label labelfot">Last Name</label>
              <input type="text" class="form-control p-2 bg-transparent" name="last_name" id="last_name" required="" style="color: #000 !important;">
            </div>
            <div class="col-md-6 ">
              <label for="email" class="form-label labelfot">Email</label>
              <input type="email" class="form-control p-2 bg-transparent" name="email" id="email" required="" style="color: #000 !important;">
            </div>
            <div class="col-md-6 ">
              <label for="phone" class="form-label labelfot">Phone</label>
              <input type="tel" class="form-control p-2 bg-transparent" name="mobile" id="mobile" required="" style="color: #000 !important;">
            </div>
              <div class="col-md-12 ">
                <label for="address" class="form-label labelfot">Full Address</label>
                <input type="text" class="form-control p-2 bg-transparent" name="address" id="address" required="" style="color: #000 !important;">
              </div>
              <div class="col-md-6 ">
                <label for="city" class="form-label labelfot">City</label>
                <input type="text" class="form-control p-2 bg-transparent" name="city" id="city" required="" style="color: #000 !important;">
              </div>
              <div class="col-md-6 ">
                <label for="state" class="form-label labelfot">Province</label>
                <input type="text" class="form-control p-2 bg-transparent" name="state" id="state" required="" style="color: #000 !important;">
              </div>
              <div class="col-md-6 ">
                <label for="country" class="form-label labelfot">Country</label>
                <input type="text" class="form-control p-2 bg-transparent" name="country" id="country" required="" style="color: #000 !important;">
              </div>
              <div class="col-md-6 ">
                <label for="zip" class="form-label labelfot">Pincode</label>
                <input type="text" class="form-control p-2 bg-transparent" name="zip" id="zip" required="" style="color: #000 !important;">
              </div>
          </div>
        </form>
        <script>
        document.getElementById('mobile').addEventListener('input', function(e) {
           this.value = this.value.replace(/[^0-9]/g, '');
         });
</script>
              <div class="row captcha-container mb-3">
          <div class="input_field captcha_box col-md-6 ">
            <input type="text" value="" disabled />
            <button class="refresh_button">
              <!-- <i class="fa-solid fa-rotate-right"></i> -->
              <i class="fa fa-repeat" aria-hidden="true"></i>
            </button>
          </div>
          <div class="input_field captcha_input col-md-6 ">
            <input type="text" class="form-control p-2 bg-transparent" placeholder="Enter captcha" />
          </div>
          <div class="message">Entered captcha is correct</div>
        </div>
        <div class="input_field button disabled mt-3">
          <button type="submit" class="btn-blue5 " form="quotation_form"><span>Place Order</span></button>
        </div>
            </div>
        </div>
    </dialog>
@endif
<style>
  .things > .content {
  float: left;
  width: 50%;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

.things > .content h1 {
  font-family: "Arial", sans-serif;
  text-transform: uppercase;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  height: 150px;
  color: #89323b;
}

/* Arrow */

.arrow {
  position: relative;
  margin: 0 auto;
  width: 100px;
}

.arrow .curve {
  border: 3px solid #ffbc08;
    border-color: transparent transparent transparent #ffac01;
    height: 519px;
    width: 1200px;
    border-radius: 150px 0 0 369px;
    overflow-x: hidden;
}

.arrow .point {
  position: absolute;
    left: 107px;
    top: 406px;
}

.arrow .point:before,
.arrow .point:after {
  border: 1px solid #fead01;
  height: 45px;
  content: "";
  position: absolute;
}

.arrow .point:before {
  top: -11px;
  left: -11px;
  transform: rotate(-74deg);
  -webkit-transform: rotate(-74deg);
  -moz-transform: rotate(-74deg);
  -ms-transform: rotate(-74deg);
}

.arrow .point:after {
  top: -25px;
  left: 13px;
  transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
}
</style>

<script>
  function openModalCart() {
    // document.getElementById('quotation-modal').classList.add('modal-show');
    document.getElementById('quotation-modal').showModal();
    // $('#quotation-modal').modal({
    //     backdrop: 'static',
    //     keyboard: false
    // });
    document.body.style.overflow = 'hidden';
  }
</script>

<script>
  function increaseQuantity(cartId) {
    const quantity = document.getElementById('quantity-' + cartId).value;

    $.ajax({
      type: 'GET',
      url: '{{route('add_cart_quantity')}}',
      datatype: 'json',
      data: {
        'cart_id': cartId,
        'quantity': quantity,
      },
      success: function(data) {
        const obj = JSON.parse(data);
        console.log(obj);

        if (obj.new.code == 1) {
          $('#quantity-' + cartId).val(obj.new.quantity);
          // let priceElement = document.getElementById(`price-${cartId}`);
          // priceElement.innerHTML = `<i class="fas fa-rupee-sign"></i><b>${obj.new.price}</b>`;

          let totalElements = document.querySelectorAll('.total');
          Array.from(totalElements).forEach(totalElement => {
            totalElement.innerHTML = `<i class="fas fa-rupee-sign"></i> <strong>${obj.new.subtotal}</strong>`;
          });

          document.getElementById('total-save').innerText = obj.new.total_save;
          document.getElementById('save-percentage').innerText = obj.new.save_percentage;
          const newSubtotal = obj.new.price;

          const currentProductSubtotal = document.querySelector(`[data-label="subtotal"][data-cart="${cartId}"]`);
          currentProductSubtotal.innerText = newSubtotal;
        }
      },
      complete: function() {},
      error: function() {},
    });
  }

  function decreaseQuantity(cartId) {
    const quantity = document.getElementById('quantity-' + cartId).value;

    if (quantity > 1) {
      $.ajax({
        type: 'GET',
        url: '{{route('minus_cart_quantity')}}',
        datatype: 'json',
        data: {
          'cart_id': cartId,
          'quantity': quantity,
        },
        success: function(data) {
          const obj = JSON.parse(data);

          if (obj.new.code == 1) {
            $('#quantity-' + cartId).val(obj.new.quantity);
            // let priceElement = document.getElementById(`price-${id}`);
            // priceElement.innerHTML = `<i class="fas fa-rupee-sign"></i><b>${obj.new.price}</b>`;

            let totalElements = document.querySelectorAll('.total');
            Array.from(totalElements).forEach(totalElement => {
              totalElement.innerHTML = `<i class="fas fa-rupee-sign"></i> <strong>${obj.new.subtotal}</strong>`;
            });

            document.getElementById('total-save').innerText = obj.new.total_save;
            document.getElementById('save-percentage').innerText = obj.new.save_percentage;
            const newSubtotal = obj.new.price;

            const currentProductSubtotal = document.querySelector(`[data-label="subtotal"][data-cart="${cartId}"]`);
            currentProductSubtotal.innerText = newSubtotal;
          }
        },
        complete: function() {},
        error: function() {},
      });
    }
  }

  function remove_item(id) {
    $.ajax({
      type: 'POST',
      url: '{{route('remove.item.from.cart')}}',
      datatype: 'json',
      data: {
        '_token': "{{ csrf_token() }}",
        'cart_id': id,
      },
      success: function(data) {
        const cartItems = document.querySelectorAll('#cart_row-' + id);
        cartItems.forEach(item => {
          item.remove();
        });

        const cartItem = document.getElementById('cart_row-' + id);
        if (cartItem) {
          cartItem.classList.add('d-none');
        }

        let totalElements = document.querySelectorAll('.total');
        Array.from(totalElements).forEach(totalElement => {
          totalElement.innerHTML = `<i class="fas fa-rupee-sign"></i> <strong>${data.subtotal}</strong>`;
        });

        let totalItemCountElement = document.getElementById('total_cart_items');
        if (totalItemCountElement) {
          totalItemCountElement.textContent = data.count;
        }

        let saveElement = document.getElementById('total-save');
        if (saveElement) {
          saveElement.textContent = data.save_total;
        }

        let savePercentage = document.getElementById('save-percentage');
        if (savePercentage) {
          savePercentage.textContent = data.save_percentage;
        }

        if (data.count === 0) {
          window.location = '/'
        }

        Array.from(document.querySelectorAll('#cart_no')).forEach(element => {
          element.textContent = data.count;
        });

        window.location.reload();
      },
      complete: function() {},
      error: function() {},
    });
  }
</script>


<!-- captcha style -->
<style>

.labelfot {
    font-family: "Lato", sans-serif;
    font-size: 18px;
    text-align: left;
    display: block;
}
    .captcha-container .input_field {
        position: relative;
        height: 45px;
        margin-top: 15px;
    }

    .captcha-container .refresh_button {
        position: absolute;
        top: 50%;
        right: 17px;
        transform: translateY(-50%);
        background: linear-gradient(360deg, #fed713, #ffaa00);
        height: 40px;
        width: 38px;
        border: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
    }

    .captcha-container .refresh_button:active {
        transform: translateY(-50%) scale(0.98);
    }

    .captcha-container .input_field input,
    .captcha-container .button button {
        height: 100%;
        width: 100%;
    }

    .captcha-container .message {
        font-size: 14px;
        margin: 14px 0;
        color: #826afb;
        display: none;
    }

    .captcha-container .message.active {
        display: block;
    }
</style>


<style>
dialog{
  border:none;
  padding: 0;;
  max-width: 90vw;
  width: 900px;
}

dialog::backdrop{
  backdrop-filter: blur(2px);
}
.modal {
    background: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    max-width: 900px;
}

.modal-show{
  
  display: flex;
    flex-direction: row;
}

.modal-content {
    display: contents;
    width: 100%;
}

.left-panel {
    background: #0e0e0e;
    background-image: url(/new-assets/img/gallery/4.jpg);
    background-blend-mode: overlay;
    background-size: cover;
    color: white;
    padding: 40px;
    width:30%;
    text-align: center;
}

.left-panel h1 {
    margin: 0;
    font-size: 16px;
    color: #ffaa00;
    margin-bottom: -1.5em;
}

.left-panel .save {
    font-size: 18px;
    margin: 20px 0 10px 0;
}

.left-panel .percentage {
    font-size: 60px;
    margin: 0;
    font-weight: 800;
     /* Sets the origin point of the rotation to the center of the element */
}

.left-panel .off {
    font-size: 24px;
    margin: 0;
}

.left-panel .in-dresses {
    font-size: 14px;
    margin-top: 20px;
}

.right-panel {
  padding: 40px;
  width:70%;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.right-panel h2 {
    font-size: 18px;
    margin: 0 0 20px 0;
}

.right-panel p {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: #333;
}

.right-panel input {
    padding: 10px;
    font-size: 16px;
    width: calc(100% - 22px);
    margin-bottom: 20px;
}

.right-panel button {
    color: white;
    border: none;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 20px;
    width: 75%;
}

.right-panel .no-thanks {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    margin-bottom: 20px;
}

.right-panel .fine-print {
    font-size: 12px;
    color: #999;
}


</style>

<script src="js/captcha.js"></script>
@endsection