@extends('frontend.layouts.app3')

<link rel="stylesheet" href="{{asset('css/my_basket.css')}}">

@section('seo')
<title>My Basket | Mulach Bakery</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://rweb.solutions/muhlach/public/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Basket | Mulach Bakery" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="My Basket | Mulach Bakery" />
<meta property="og:image" content="" />
<meta property="og:image" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:image:alt" content="{{ asset('img/meta-thumbnail.jpg') }}">
@endsection

@section('content')


<div class="container-fluid bg-dirty-white pb-5">
  @if(session('success'))
  <div class="col-12">
    <div class="alert alert-success my-1">
      {{ session('success') }}
    </div>
  </div>
  @endif
  <div class="container px-4">
    <left>
      <h5 class="red italic-bold">My Basket</h5>
      <hr class="red">
      <br>
    </left>

    <div class="row gx-0">
      <div class="col-xl-8 ">
        <div class="row gx-0 row-basket" style="border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;">
          <div class="col-2">

          </div>
          <div class="col-3">
            <span class="regular text-white">Product</span>
          </div>
          <div class="col-2">
            <span class="regular text-white">Price</span>
          </div>
          <div class="col">
            <span class="regular text-white">Quantity</span>
          </div>
          <div class="col-2">
            <span class="regular text-white"><b>Total</b></span>
          </div>
        </div>

        @php $cart_total = 0; @endphp
        @if (session('cart'))
        @foreach (session('cart') as $cart)
        <div class="row gx-0 row-content" data-id="{{ $cart['id'] }}">

          <div class="col-2 d-flex align-items-center cart-img mx-2">
            <img src="{{ asset('uploads/products/' . $cart['image']) }}" class="img-fluid basket-img" alt="">
          </div>
          <div class="col-3 product-name text-start">
            <span class="red italic">{{ $cart['name'] }}</span><br>
          </div>
          <div class="col-2 d-flex align-items-center">
            <span class="red regular-bold " data-id="{{ $cart['id'] }}">₱ {{ number_format($cart['price'], 2) }}</span>
          </div>
          <div class="col-2 d-flex align-items-center">
            @if ($cart['amount'] > 0)
            <div>
              <a href="javascript:void(0);" class="fs-3 text-decoration-none red circle-yellow btn-quantity" data-id="{{ $cart['id'] }}" data-action="minus">-</a>
            </div>
            @endif
            &nbsp; <span class="amount mx-2" data-id="{{ $cart['id'] }}">{{ $cart['amount'] }}</span> &nbsp;
            <div>
              <a href="javascript:void(0);" class="fs-3 text-decoration-none red circle-yellow btn-quantity" data-id="{{ $cart['id'] }}" data-action="plus">+</a>
            </div>
          </div>
          <div class="col-2 d-flex align-items-center">
            <span class="red regular-bold total-price mx-2" data-id="{{ $cart['id'] }}">₱ {{ number_format($cart['amount'] * $cart['price'], 2) }}</span>
            <a href="javascript:void(0);" class="fs-3 text-decoration-none red circle btn-remove" data-id="{{ $cart['id'] }}">x</a>
          </div>
          <div class="border my-2"></div>
        </div>
        @php $cart_total += $cart['amount'] * $cart['price']; @endphp
        @endforeach
        @endif

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
          $(document).ready(function() {
            $('.btn-quantity').on('click', function() {
              var id = $(this).data('id');
              var action = $(this).data('action');
              var amount = parseInt($('span.amount[data-id="' + id + '"]').text());

              if (action === 'minus' && amount <= 1) {
                return;
              }

              $.ajax({
                url: 'public/cart/update/' + id,
                method: 'POST',
                data: {
                  _token: '{{ csrf_token() }}',
                  action: action
                },
                success: function(response) {
                  // Update the specific item's amount, price, and total price
                  $('span.amount[data-id="' + id + '"]').text(response.amount);
                  $('span.price[data-id="' + id + '"]').text('₱ ' + response.price);
                  $('span.total-price[data-id="' + id + '"]').text('₱ ' + response.total_price);

                  // Update the cart total
                  $('#cart-total').text('₱ ' + response.cart_total);
                }
              });
            });

            $('.btn-remove').on('click', function() {
              var id = $(this).data('id');

              $.ajax({
                url: 'public/cart/remove/' + id,
                method: 'POST',
                data: {
                  _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                  // Remove the specific item row
                  $('div.row-content[data-id="' + id + '"]').remove();

                  // Update the cart total
                  $('#cart-total').text('₱ ' + response.cart_total);
                }
              });
            });
          });
        </script>

        <div class="d-flex justify-content-end bg-white p-3" style="border-bottom-left-radius: 1.5rem;border-bottom-right-radius: 1.5rem;">
          <a href="{{url('/categories-products')}}"><button class="btn-checkout">SELECT MORE PRODUCT</button></a>
        </div>
        <div class="border"></div>
        <br><br>
      </div>

      <div class="col-md-6 col-lg-4 col-xl-3 mx-xl-5">
        <form method="GET" action="{{ url('cart/create') }}"> @csrf
          <div class="row gx-0 row-basket" style="  border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;">
            <div class="col-6 mx-5"><span class="regular text-white">Basket Total</span></div>
          </div>

          <div class="bg-white receipt-content expanded-form" style="  border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem;">
            <div class="p-5">
              <div class="d-flex justify-content-between">
                <span class="red regular-bold" id="cart-total">₱ {{ number_format($cart_total, 2) }}</span>
              </div><br>

              <input type="hidden" name="service_type" value="Pick up">

            </div>
            <center>
              <div class="button-placement">
                <a href="" class="btn-link"><button class="btn-checkout" type="submit">PROCEED TO CHECKOUT</button></a>
              </div>
            </center>
            <br>
          </div>
        </form>

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




</div>


<style>
  .navbar {
    background-color: #fff0e0;
  }

  .navbar-scrolled {
    background-color: transparent;
  }

  .expanded-form {
    max-width: 100%;
    width: 100%;
  }

  .circle {
    display: inline-block;
    width: 30px;
    /* Adjust the size as needed */
    height: 30px;
    /* Adjust the size as needed */
    border-radius: 50%;
    background-color: #f4ecef;
    border: transparent;
    /* Circle color */
    /* Text color */
    text-align: center;
    justify-content: center;
    line-height: 22px;
    /* Center the 'x' vertically */

    /* Optional for emphasis */
  }

  .circle:hover {

    color: #9b0000;
    /* box-shadow: #9b0000 0 7px 29px 0; */
  }

  .circle-yellow {
    display: inline-block;
    width: 30px;
    /* Adjust the size as needed */
    height: 30px;
    /* Adjust the size as needed */
    border-radius: 50%;
    background-color: #fdd880;
    border: transparent;
    /* Circle color */
    /* Text color */
    text-align: center;
    justify-content: center;
    line-height: 22px;
    /* Center the 'x' vertically */

    /* Optional for emphasis */
  }

  .circle-yellow:hover {

    color: #9b0000;
    /* box-shadow: #9b0000 0 7px 29px 0; */
  }
</style>
@endsection