@extends('layouts.main')
@push('title')
<title>Cart</title>  
@endpush
@section('main-section')
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<style>
    .img-product-cover{
        width:120px;
        height:120px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:auto;
    }

    .img-product-cover img{
        max-width: 100%;
        height: auto;
    }

    .table th, .table td{
            text-align: center;
            vertical-align: middle!important;
            border: 1px solid #dddddd;
            border-top:1px solid #dddddd!important;
            white-space: nowrap; 
    }

    .d-inline-block{
        display: inline-block;
    }

    .boxs-cart{
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .bg-red{
        background: red;
    }


    .bg-green{
        background: green;
    }

    .btn-proceed{
        width: 254px;
        font-weight: 800;
        padding: 17px 12px;
    }

    .btn-shopping{
        width: 254px;
        font-weight: 800;
        padding: 17px 12px;
        color:#fff;
    }


    @media only screen and (max-width:600px){
        .cart-section .cart-buttons{
            display: block;
            text-align: center;
        }

                .btn-proceed{
                        margin:10px auto;
            }

            .btn-shopping{
                width: 254px;
                font-weight: 800;
                padding: 17px 12px;
                color:#fff;
            }
    }

</style>
<!-- Header -->
<div id="home" class="bg-inner low-back-gradient-inner">
    <div class="text-con-inner low-back-up">
      <div class="container">
        <div class="row">
          <div class="lead col-lg-12 col-xm-12 text-center">
            <h1><span class="top-heading-inner">Cart</span></h1>
            <div class="list-o-i white">
              <p class="white no-p">Unlock your financial potential and pave your path to prosperity through smart investments and strategic decisions. Explore opportunities and embark on your journey to financial freedom today.</p>
              <div class="pagenation_links"><a href="/" class="yellow">Home</a><i> </i>  / Cart</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--End Header--> 

  <div class="container">
      <div class="cart-section d-cart-block">
          {{-- <div class=" container"> --}}
          <div class="c-2">
              @if (session()->has('success_message'))
                  <div class="alert alert-success">
                      {{ session()->get('success_message') }}
                  </div>
              @endif
  
              @if(count($errors) > 0)
                  <div class="alert alert-danger">
                      <ul>
                          @foreach ($errors->all() as $error)
                              <li>{{ $error }}</li>
                          @endforeach
                      </ul>
                  </div>
              @endif
              
              @if ($cart_products->count() > 0)
  
              <h2>{{ $cart_products->count() }} item(s) in Shopping Cart</h2>
  
              <div class="cart-table " style="overflow-x:auto;">
                <table class="table text-center">
                    <thead>
                            <tr>
                            <th>Product Image</th>
                            <th>Product Title</th>
                            {{-- <th>Product Description</th> --}}
                            <th>Quantity</th>
                            <th>Amount</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

                    @foreach ($cart_products as $item)
                        <tr>
                            <td>
                                <a href="{{ url('/services-view/'.$item->product_url) }}">
                                    <div class="img-product-cover">
                                            <img src="{{$item->images}}" alt="item" class="cart-table-img">

                                    </div>
                                </a>
                            </td>
                            <td>
                                <a href="{{ url('/services-view/'.$item->product_url) }}">{{ $item->product_title}}</a>
                            </td>
                            {{-- <td>
                                {!! $item->description !!}
                            </td> --}}
                            <td>
                                <select class="quantity form-control" data-id="{{ $item->product_cart_id }}" data-productQuantity="{{ $item->quantity }}">
                                    @for ($i = 1; $i < 5 + 1 ; $i++)
                                        <option {{ $item->product_quantity == $i ? 'selected' : '' }}>{{ $i }}</option>
                                    @endfor
                                </select>
                            </td>
                            <td>
                                <div><i class="fa fa-inr" aria-hidden="true"></i> {{ (int)$item['price'] * $item['product_quantity'] }}</div>
                            </td>
                            <td>
                                <form class="d-inline-block m-1" action="{{ route('cart.destroy', $item->product_cart_id) }}" method="POST">
                                    {{ csrf_field() }}
                                    {{ method_field('DELETE') }}
    
                                    <button type="submit" class="cart-options btn  bg-danger">Remove</button>
                                </form>
                                <form class="d-inline-block m-1" action="{{ route('cart.switchToSaveForLater', $item->product_cart_id) }}" method="POST">
                                    {{ csrf_field() }}
    
                                    <button type="submit" class="cart-options btn btn-success  ">Save for Later</button>
                            </td>


                            {{-- <div class="cart-table-row">
                                <div class="cart-table-row-left"> 
                                    <a href="{{ url('/services-view/'.$item->product_url) }}">
                                        <img src="{{$item->images}}" alt="item" class="cart-table-img">
                                    </a>
                                    <div class="cart-item-details">
                                        <div class="cart-table-item">
                                            <a href="{{ url('/services-view/'.$item->product_url) }}">{{ $item->product_title}}</a>
                                        </div>
                                        <div class="cart-table-description">
                                            {!! $item->description !!}</div>
                                    </div>
                                </div>
        
                                <div class="cart-table-row-right">
                                    <div class="cart-table-actions">
                                        <form action="{{ route('cart.destroy', $item->product_cart_id) }}" method="POST">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
            
                                            <button type="submit" class="cart-options">Remove</button>
                                        </form>
            
                                        <form action="{{ route('cart.switchToSaveForLater', $item->product_cart_id) }}" method="POST">
                                            {{ csrf_field() }}
            
                                            <button type="submit" class="cart-options">Save for Later</button>
                                        </form>
                                    </div>
                                    <div>
                                        <select class="quantity form-control" data-id="{{ $item->product_cart_id }}" data-productQuantity="{{ $item->quantity }}">
                                            @for ($i = 1; $i < 5 + 1 ; $i++)
                                                <option {{ $item->product_quantity == $i ? 'selected' : '' }}>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <div><i class="fa fa-inr" aria-hidden="true"></i> {{ (int)$item['price'] * $item['product_quantity'] }}</div>
                                </div>
                            </div>  --}}
                            <!-- end cart-table-row -->

                        </tr>
                    @endforeach
                    </tbody>
                </table>
              </div> <!-- end cart-table -->
  
              @if (! session()->has('coupon'))
  
                  <a href="#" class="have-code">Have a Code?</a>
  
                  <div class="have-code-container">
                      <form action="{{ route('coupon.store') }}" method="POST">
                          {{ csrf_field() }}
                          <input type="text" name="coupon_code" id="coupon_code" placeholder="Paste your Coupon">
                          <button type="submit" class="button button-plain">Apply</button>
                      </form>
                  </div> <!-- end have-code-container -->
              @endif
  
              <div class="cart-totals">
                  {{-- <div class="cart-totals-left">
                      Shipping is free because we’re awesome like that. Also because that’s additional stuff I don’t feel like figuring out :).
                  </div> --}}
  
                  <div class="cart-totals-right">
                      <div class="text-left">
                          Subtotal <br>
                          @if (session()->has('coupon'))
                              Code ({{ session()->get('coupon')['name'] }})
                              <form action="{{ route('coupon.destroy') }}" method="POST" style="display:block">
                                  {{ csrf_field() }}
                                  {{ method_field('delete') }}
                                  <button type="submit" style="font-size:14px;">Remove</button>
                              </form>
                              <hr>
                              New Subtotal <br>
                          @endif
                        Tax ({{config('cart.tax')}}%)<br>
                        <span class="cart-totals-total">Total</span>
                      </div>
                      <div class="cart-totals-subtotal">
                        <i class="fa fa-inr" aria-hidden="true"></i> {{ $cart_subtotal }} <br>
                          @if (session()->has('coupon'))
                              - <i class="fa fa-inr" aria-hidden="true"></i>{{$discount }} <br>&nbsp;<br>
                              <hr>
                              <i class="fa fa-inr" aria-hidden="true"></i> {{ $newSubtotal }} <br>
                          @endif
                          <i class="fa fa-inr" aria-hidden="true"></i> {{ $newTax }} <br>
                          <span class="cart-totals-total"><i class="fa fa-inr" aria-hidden="true"></i> {{$newTotal}}</span>
                      </div>
                  </div>
              </div> <!-- end cart-totals -->
  
              <div class="cart-buttons">
                  <a href="{{ route('shop.index') }}" class="btn btn-info btn-shopping">Continue Shopping</a>
                  <a href="{{ route('checkout.index', ['flag' => 'product']) }}" class="btn btn-success btn-proceed">Proceed to Checkout</a>
              </div>
  
              @else
  
                  <h3>No items in Cart!</h3>
                  <div class="spacer"></div>
                  <a href="{{ route('shop.index') }}" class="btn btn-success btn-shopping">Continue Shopping</a>
                  <div class="spacer"></div>
  
              @endif
          </div>
      </div> <!-- end cart-section -->
  </div>

<script src="{{ asset('js/app.js') }}"></script>
<script>
    (function(){
        const classname = document.querySelectorAll('.quantity')

        Array.from(classname).forEach(function(element) {
            element.addEventListener('change', function() {
                const id = element.getAttribute('data-id')
                const productQuantity = element.getAttribute('data-productQuantity')

                axios.patch(`/cart/${id}`, {
                    quantity: this.value,
                    productQuantity: productQuantity
                })
                .then(function (response) {
                    // console.log(response);
                    window.location.href = '{{ route('cart.index') }}'
                })
                .catch(function (error) {
                    // console.log(error);
                    window.location.href = '{{ route('cart.index') }}'
                });
            })
        })
    })();
</script>

@endsection