@extends('layouts.dashboard-template')
 @section('page-content')
 @php
 $data = getAdminCart();
 $tax=0.00;
 $discount=0.00;
 $subtotal=0.00;
 @endphp
 <div class="main-content">

     <div class="page-content" id="loadcontent">
         <div class="container-fluid">

             <!-- start page title -->
             <div class="row">
                 <div class="col-12">
                     <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                         <h4 class="mb-sm-0">Shopping Cart</h4>

                         <div class="page-title-right">
                             <ol class="breadcrumb m-0">
                                 <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                                 <li class="breadcrumb-item active">Shopping Cart</li>
                             </ol>
                         </div>

                     </div>
                 </div>
             </div>
             <!-- end page title -->
             @if(Session::has('success'))
             <div class="alert alert-success">{{Session::get('success')}}</div>
             {{ Session::flash('alert-success', 'success') }}
             @endif
             @if(Session::has('fail'))
             <div class="alert alert-danger">{{Session::get('fail')}}</div>
             @endif

             @if ($errors->any())
             <div class="alert alert-danger">
                 <ul>
                     @foreach ($errors->all() as $error)
                     <li>{{ $error }}</li>
                     @endforeach
                 </ul>
             </div>
             @endif
             <div class="row mb-3">
                 <div class="col-xl-8">
                     <div class="row align-items-center gy-3 mb-3">
                         <div class="col-sm">
                             <div>
                                 <h5 class="fs-14 mb-0" id="cartcount">Your Cart ({{getCartCount()}} items)</h5>
                             </div>
                         </div>
                         <div class="col-sm-auto">
                             <a href="{{route('admin.list-products')}}" class="link-primary text-decoration-underline">Continue Shopping</a>
                         </div>
                     </div>
                     @foreach($data as $item)
                     <div class="card product" id="card{{$item->id}}">
                         <div class="card-body">
                             <div class="row gy-3">
                                 <div class="col-sm-auto">
                                     <div class="avatar-lg bg-light rounded p-1">
                                         <img src="{{ asset('uploads/product/'.$item->product->image) }}" alt="" class="img-fluid d-block">
                                     </div>
                                 </div>
                                 <div class="col-sm">
                                     <h5 class="fs-14 text-truncate"><a href="{{route('admin.view-product', ['slug' => $item->product->slug])}}" class="text-dark">{{$item->product->name}}</a></h5>
                                     <ul class="list-inline text-muted">

                                         @foreach(json_decode($item->attribute) as $key=>$attr)
                                         <li class="list-inline-item">
                                             {{$key}} : <span class="fw-medium">{{ $attr}}</span>
                                             </span>
                                         </li>
                                         @endforeach

                                     </ul>
                                     <div class="input-step" data-id="{{$item->id}}">
                                         <button type="button" class="minus">–</button>
                                         <input type="number" class="product-quantity" id="quantity{{$item->id}}" name="quantity" value="{{$item->quantity}}" min="0" max="100">
                                         <button type="button" class="plus">+</button>
                                     </div>
                                 </div>
                                 <div class="col-sm-auto">
                                     <div class="text-lg-end">
                                         <p class="text-muted mb-1">Item Price:</p>
                                         <h5 class="fs-14"> <i class="mdi mdi-currency-inr"></i><span id="ticket_price" class="product-price">{{$item->product->price}}</span></h5>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <!-- card body -->
                         <div class="card-footer">
                             <div class="row align-items-center gy-3">
                                 <div class="col-sm">
                                     <div class="d-flex flex-wrap my-n1">
                                         <div>
                                             <a href="javascript:void(0)" class="d-block text-body p-1 px-2" id="remove-product" data-id="{{$item->id}}"><i class="ri-delete-bin-fill text-muted align-bottom me-1"></i>
                                                 Remove</a>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-sm-auto">
                                     <div class="d-flex align-items-center gap-2 text-muted">
                                         <div>Total :</div>
                                         <h5 class="fs-14 mb-0"> <i class="mdi mdi-currency-inr"></i><span class="product-line-price">{{$item->product->price * $item->quantity}}</span>
                                         </h5>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <!-- end card footer -->
                     </div>
                     <!-- end card -->

                     @php
                     $tax+=($item->product->tax)*($item->quantity);
                     $discount+=($item->product->discount)*($item->quantity);
                     $subtotal+=$item->product->price * $item->quantity;
                     @endphp
                     @endforeach
                     @if(getCartCount()>0)
                     <div class="text-end mb-4">
                         <a href="{{route('admin.checkout')}}" class="btn btn-success btn-label right ms-auto"><i class="ri-arrow-right-line label-icon align-bottom fs-16 ms-2"></i> Checkout</a>
                     </div>
                     @endif
                 </div>
                 <!-- end col -->

                 <div class="col-xl-4">
                     <div class="sticky-side-div">
                         <div class="card">
                             <div class="card-header border-bottom-dashed">
                                 <h5 class="card-title mb-0">Order Summary</h5>
                             </div>
                             <!-- <form method="post" action="" enctype="multipart/form-data">
                                 {{ csrf_field() }}
                                 <div class="card-header bg-soft-light border-bottom-dashed">
                                     <div class="text-center">
                                         <h6 class="mb-2">Have a <span class="fw-semibold">promo</span> code ?</h6>
                                     </div>
                                     <div class="hstack gap-3 px-3 mx-n3">
                                         <input class="form-control me-auto" type="text" placeholder="Enter coupon code" name="code" aria-label="Add Promo Code here...">
                                         <button type="submit" class="btn btn-success w-xs">Apply</button>
                                     </div>
                                 </div>
                             </form> -->
                             <div class="card-body pt-2" id="tariff">
                                 <div class="table-responsive">
                                     <table class="table table-borderless mb-0">
                                         <tbody>
                                             <tr>
                                                 <td>Sub Total :</td>
                                                 <td class="text-end" id="cart-subtotal"> <i class="mdi mdi-currency-inr"></i> {{floatval($subtotal)}}</td>
                                             </tr>
                                             <tr>
                                                 <td>Discount : </td>
                                                 <td class="text-end" id="cart-discount">- <i class="mdi mdi-currency-inr"></i> {{floatval($discount)}}</td>
                                             </tr>
                                             <tr>
                                                 <td>Estimated Tax : </td>
                                                 <td class="text-end" id="cart-tax"> <i class="mdi mdi-currency-inr"></i> {{floatval($tax)}}</td>
                                             </tr>
                                             <tr class="table-active">
                                                 <th>Total :</th>
                                                 <td class="text-end">
                                                     <span class="fw-semibold" id="cart-total">
                                                         <i class="mdi mdi-currency-inr"></i> {{floatval($subtotal+$tax-$discount)}}
                                                     </span>
                                                 </td>
                                             </tr>
                                         </tbody>
                                     </table>
                                 </div>
                                 <!-- end table-responsive -->
                             </div>
                         </div>

                     </div>
                     <!-- end stickey -->

                 </div>
             </div>
             <!-- end row -->
         </div>
         <!-- container-fluid -->
     </div>
     <!-- End Page-content -->
 </div>
 <script>
     $('body').on('click', '#remove-product', function() {
         var id = $(this).data('id');
         $.ajax({
             type: "GET",
             url: "{{ route('admin.delete-cart') }}",
             data: {
                 'id': id
             },
             success: function(data) {
                 $('#card' + id).fadeOut(300, function() {
                     $(this).remove();
                     $("#tariff").load(window.location.href + " #tariff");
                     $("#cartcount").load(window.location.href + " #cartcount");
                     $("#cartnote").load(window.location.href + " #cartnote");

                 });
             }
         });
     })

     $('body').on('click', '.input-step', function() {
         var id = $(this).data('id');
         var quantity = $('#quantity' + id).val();
         $.ajax({
             type: "GET",
             url: "{{ route('admin.add-quantity') }}",
             data: {
                 'id': id,
                 'quantity': quantity
             },
             success: function(data) {
                 $("#tariff").load(" #tariff > *");
             }
         });
     })
 </script>
 @endsection