@extends('Frontend.layout.main')



@section('head')

<title>{{$pageData->meta_title() ?? 'Coco Jalila'}}</title>
<meta name="description" content="{{$pageData->meta_description() ?? 'Coco Jalila'}}">
<meta name="keywords" content="{{$pageData->meta_keyword() ?? 'Coco Jalila'}}">

@endsection



@section('content')






@include('Frontend.inc.banners')    
    <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="bannerTxt">
                            <!-- <h1 class="stretched text-white">About Us</h1> -->
                        </div>
                    </div>
     </div>
    </div>
 </section>
<div id ="shpCart"></div>
        <section class="moments-section py-5 mt-0 mt-md-4" data-aos="fade-up">

            <div class="container">

            <div class="row mb-4">
                    <div class="col-12 text-center">
                    <h4 class="stretched text-uppercase text-default">Shopping Basket</h4>
                    </div>
                </div>

            <!-- <form method="post" action="{{url('/cart/confirm')}}"> -->

                <div class="row ">
                    <div class="col-md-12 px-4">
                        <div class="row cart-table bg-lgray mob-hidden">
                            <div class="col-md-4 d-flex align-items-center">
                                <h6 class="bold">Product</h6>
                            </div>
                            <div class="col-md-2 cartQty">
                                <h6 class="bold">Size</h6>
                            </div>
                            <div class="col-md-2 cartQty">
                                <h6 class="bold">Quantity</h6>
                            </div>
                            <div class="col-md-2 text-left">
                                <h6 class="bold">Price</h6>
                            </div>
                            <div class="col-md-2 text-right">
                                <h6 class="bold">Amount</h6>
                            </div>
                        </div>

                        @php 
                        $subtotal =0;
                        @endphp


                        @foreach($products as $key => $product_id)
                        
                        
                        @php

                            $product = App\Http\Controllers\Frontend\CartController::getProduct($product_id);
                            $quantity= isset($quantities[$key])?$quantities[$key]:1;
                            $size_id = isset($sizes[$key])?$sizes[$key]:0;

                                if($size_id != 0){

                                    $price = App\Http\Controllers\Frontend\CartController::getPrice($size_id);
                                    $size =App\Http\Controllers\Frontend\CartController::getSize($size_id);
                                }
                                else{

                                    $price  = $product->price;
                                    $size  = $product->a_size;

                                }

                                $productAllSizes = App\Http\Controllers\Frontend\CartController::getAllSize($product_id)
                         @endphp


                       

                        <div class="row cart-table">
                            <div class="col-12 col-md-4 cart-img order-md-1">
                                <img src="{{env('ASSET_URL')}}storage/products/{{$product->filename}}" alt="{{$product->title}}" class="img-fluid" />
                                <div>
                                   <a href="{{url('product/details/'.$product->slug)}}"> <h6>{{$product->title}}</h6></a>
                                   <input type="hidden" name="product_id[]" value="{{$product->product_id}}" />
                                    <p class="small">{{strip_tags(substr($product->long_description,0,75))}}</p>
                                </div>
                            </div>
                            <div class="col-md-2 col-6 mt-2 mt-md-0 text-center text-sm-left order-md-2">

                            <select  class="col-md-7 form-control sizes cart_cls"  id="size-{{$key}}"  key="{{$key}}" >
                                @foreach($productAllSizes as $allsize)

                                                    <option value="{{$allsize->id}}" price ="{{$allsize->price}}" @if( $size_id == 0 && $allsize->is_default =='Y') selected @elseif($allsize->id == $size_id) selected @endif> {{$allsize->attr_value}} </option>        
                                @endforeach
                                
                            </select>
                                <!-- {{$size ?? ''}} -->
                            </div>
                            <div class="col-md-2 col-6 mt-2 mt-md-0 text-center text-sm-left order-md-4">

                              <span id="price-{{$key}}"> AED {{$price ??  '0'}}</span>  
                            </div>

                            <div class="col-md-2 col-12 mt-2 mt-md-0 cartQty order-md-3 text-center text-sm-left">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <button type="button" class="quantity-left-minus btn btn-number" key="{{$key}}"  price="{{$price ??  '0'}}" data-type="minus" data-field="">
                                            <i class="fas fa-minus"></i>
                                    </button>
                                    </span>
                                    <input type="text" id="quantity-{{$key}}"  class="form-control input-number" value="{{$quantity}}" min="1" max="100">

                                    <span class="input-group-btn">
                                        <button type="button" class="quantity-right-plus btn btn-number" key="{{$key}}"  price="{{$price ??  '0'}}" data-type="plus" data-field="">
                                            <i class="fas fa-plus"></i>
                                    </button>
                                    </span>
                                </div>
                            </div>

                            <div class="col-md-2 col-12 mt-2 mt-md-0 text-center text-sm-right order-md-5">

                            <input type="hidden" id="rowtotal-{{$key}}"  class="form-control input-number rowtotal" value="{{$quantity * ($price ??  '0')}}">

                               <b id ="rowtotalspan-{{$key}}"> AED {{$quantity * ($price ??  '0')}} </b>
                                <a href="{{url('/remove-from-cart/'.$key)}}" class="btn btn-sm btn-light cartDel"><i class="fa fa-trash text-danger"></i> </a>
                            </div>
                        </div>

                                        @php 
                                               $subtotal =$subtotal + ($quantity*($price ??  '0'));
                                        @endphp
                                                        
 
                            @endforeach

                                        @if(sizeof($products) < 1)
                                        <div class="row cart-table">
                                             <div class="col-md-6 d-flex align-items-center">
                                                 <b>  Your cart is empty </b>

                                            </div>
                                        </div>
                                        @endif



                                        
                        <div class="row mb-1 mt-3">
                            <div class="col-md-5 offset-md-7 text-right">
                                Sub Total : <b class="totPrice"> AED  {{$subtotal }}</b>

                            </div>
                        </div>



                      
                        <div class="row mt-4">
                            <div class="col-12 d-flex justify-content-between">
                                <a href="{{url('/products')}}"><i class="fas fa-long-arrow-alt-left"></i> Continue Shopping</a>
                                @if(count($products) > 0)

                                <a  href="{{url('/delivery-address')}}" class="btn btn-primary">Proceed</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>  
            <!-- </form> -->
   
            </div>
        </section>

 @endsection
 @section('script')


@section('script')
<script>
        $(document).ready(function() {
            baseurl = "{{url('/')}}"
            var quantitiy = 0;
            var isActive =0;
            $('.quantity-right-plus').click(function(e) {

                if(!isActive){

                    isActive =1;

                 e.preventDefault();

                 var key = $(this).attr('key');
                 var quantity = parseInt($('#quantity-'+key).val());
                 var price =  parseFloat($(this).attr('price'));


                 // If is not undefined
                $.ajax({

                url: baseurl+'/incquantity/'+key,
                               success: function (response) {                 
                                       isActive =0;
                                    },
                error: function (e) { 
                    isActive =0;
                 alert('Error: Internal server error occured!. Please try later.');
                    console.log(e);
                      }
                })

                $('#quantity-'+key).val(quantity + 1);
                $('#rowtotal-'+key).val(price * (quantity+1));
                $('#rowtotalspan-'+key).text('AED '+ price * (quantity+1));

                
                // Increment

                subTotal()

            }

            });

            $('.quantity-left-minus').click(function(e) {
                if(!isActive){

                e.preventDefault();
              
                var key = $(this).attr('key');
                var quantity = parseInt($('#quantity-'+key).val());
                var price =  parseFloat($(this).attr('price'));

                // Increment
                if (quantity > 1) {
                    $('#quantity-'+key).val(quantity - 1);
                    $('#rowtotal-'+key).val(price * (quantity-1));
                    $('#rowtotalspan-'+key).text('AED '+ price * (quantity-1));

                    $.ajax({

                            url: baseurl+'/descquantity/'+key,
                                        success: function (response) { },
                            error: function (e) { 
                            alert('Error: Internal server error occured!. Please try later.');
                                console.log(e);
                                }
                            })


                            subTotal()

                        }

                }

            });



            $('.sizes').change(function(){

                key =$(this).attr('key');
                size =$(this).val();
                price =$("#size-"+key+" option:selected").attr('price');
                quantity = parseInt($('#quantity-'+key).val());
                $('#price-'+key).text('AED '+ price);

                $('#rowtotal-'+key).val(price * quantity);
                $('#rowtotalspan-'+key).text('AED '+ price *quantity);

                $.ajax({

                url: baseurl+'/changesize/'+key+'/'+size,
                            success: function (response) {                 
                                    isActive =0;
                                    },
                error: function (e) { 
                    isActive =0;
                alert('Error: Internal server error occured!. Please try later.');
                    console.log(e);
                    }
                })



            })




        });


        function subTotal(){
            var subTotal =0
            $('.rowtotal').each(function(){

                subTotal=subTotal+parseFloat( $(this).val())

            })

            $('.totPrice').text('AED ' +subTotal);
           // alert(subTotal);


        }
    </script>


    @endsection