@extends('web.layouts.container')

@section('content')
    <section class="cart-pg">
        <div class="container">
            <div class="text-center">
                <div class="sec-heading mb-5 wow fadeInUp" data-wow-duration="2s">
                    <span>{{__('main.my_cart')}}</span>
                    <h1>{{__('main.my_cart')}}</h1>
                </div>
            </div>
            <div class="inner">
                <div class="table-responsive position-relative d-none d-lg-block">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>{{__('products.products')}} <small class="cart_count">({{count($carts) ? count($carts) : 0}})</small></th>
                            <th>{{__('products.colors')}}</th>
                            <th>{{__('products.details')}}</th>
                            <th>{{__('products.quantity')}}</th>
                            <th>{{__('products.total_price')}}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @if(count($carts))
                            @foreach($carts as $cart)
                                @php
                                    /** @var TYPE_NAME $cart */
                                    /**get selected product image*/
                                    $colors = json_decode($cart->colors, true);
                                    $colors = array_keys($colors);
                                    $imageIndex = array_search($cart->color, $colors);
                                    $image = json_decode($cart->images, true)[$imageIndex];
                                @endphp
                                <tr class="deleted_item_{{$cart->product_id}}">
                                    <td class="prod_td">
                                        <div class="prod">
                                            <a href="#">
                                                <img src="{{asset($image)}}" alt="" class="prod-img">
                                            </a>
                                            <h6 class="prod-name">
                                                <b>{{$cart->name}}</b>
                                            </h6>
                                        </div>
                                    </td>
                                    <td class="det "><div style="width:35px;height:35px; border-radius: 50%; background-color: {{$cart->color}}"></div></td>
                                    <td class="det">{{stripText($cart->description, 50)}}</td>
                                    <td>
                                        <div class="quantity-container">
                                            <div class="add-more">
                                                <button data-item-price=".item_price_{{$cart->product_id}}" data-prod="{{$cart->product_id}}" class="qt-minus amount_minus"><i class="fas fa-minus"></i></button>
                                                <span class="qt product_amount">{{$cart->amount}}</span>
                                                <button data-item-price=".item_price_{{$cart->product_id}}" data-prod="{{$cart->product_id}}" class="qt-plus amount_plus"><i class="fas fa-plus"></i></button>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="price_td">
                                        @if($cart->discount)
{{--                                            <span class="last_price mb-0"><small>{{__('products.sar')}}</small> <b>{{$cart->price}}</b></span>--}}
                                            <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$cart->product_id}}">{{$cart->amount*$cart->discount}}</b></h6>
                                        @else
                                            <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$cart->product_id}}">{{$cart->amount*$cart->price}}</b></h6>
                                        @endif
                                        @if($cart->discount)
                                            <span class="disbount">- {{round((($cart->price-$cart->discount)*100)/$cart->price)}} %</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button data-delete=".deleted_item_{{$cart->product_id}}" data-prod="{{$cart->product_id}}" class="delete-btn delete_product_button">
                                            <i class="far fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
{{--                            <div class="text-danger text-center no_product_alert d-none ">--}}
{{--                                {{__('products.no_products')}}--}}
{{--                                <a href="{{route('home')}}">{{__('products.products')}}</a>--}}
{{--                            </div>--}}
                        @else
                            <div class="text-danger text-center">
                                {{__('products.no_products')}}
                                <a href="{{route('home')}}">{{__('products.products')}}</a>
                            </div>

                        @endif
                        <tr>
                            <td colspan="6" class="text-danger text-center no_product_alert d-none">{{__('products.no_products')}}
                                <a href="{{route('product.index')}}">{{__('products.products')}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <span class="swipe_alert swipe_to_see_more">{{__('products.swipe_to_see_more')}}<i class="fas fa-angle-double-left"></i></span>
                </div>
                <div class="mob_table d-block d-lg-none">
                    @if(count($carts))
                        @foreach($carts as $cart)
                            @php
                                /** @var TYPE_NAME $cart */
                                /**get selected product image*/
                                $colors = json_decode($cart->colors, true);
                                $colors = array_keys($colors);
                                $imageIndex = array_search($cart->color, $colors);
                                $image = json_decode($cart->images, true)[$imageIndex];
                            @endphp
                            <div class="cart_mob_box deleted_item_{{$cart->product_id}}" >
                                <div class="cart_item">
                                    <div class="title">
                                        <h4>{{__('products.product_name')}}</h4>
                                    </div>
                                    <div class="info">
                                        <div class="prod">
                                            <a href="#">
                                                <img src="{{asset($image)}}" alt="" class="prod-img">
                                            </a>
                                            <h6 class="prod-name">
                                                <b>{{$cart->name}}</b>
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="cart_item">
                                    <div class="title">
                                        <h4>{{__('products.colors')}}</h4>
                                    </div>
                                    <div class="info">
                                        <div style="width:35px;height:35px; border-radius: 50%; background-color: {{$cart->color}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="cart_item">
                                    <div class="title">
                                        <h4>{{__('products.details')}}</h4>
                                    </div>
                                    <div class="info">
                                        <p class="det">{{stripText($cart->description, 50)}}</p>
                                    </div>
                                </div>
                                <div class="cart_item">
                                    <div class="title">
                                        <h4>{{__('products.quantity')}}</h4>
                                    </div>
                                    <div class="info">
                                        <div class="quantity-container">
                                            <div class="add-more">
                                                <button data-item-price=".item_price_{{$cart->product_id}}" data-prod="{{$cart->product_id}}" class="qt-minus amount_minus"><i class="fas fa-minus"></i></button>
                                                <span class="qt product_amount">{{$cart->amount}}</span>
                                                <button data-item-price=".item_price_{{$cart->product_id}}" data-prod="{{$cart->product_id}}" class="qt-plus amount_plus"><i class="fas fa-plus"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="cart_item">
                                    <div class="title">
                                        <h4>{{__('products.total_price')}}</h4>
                                    </div>
                                    <div class="info">
                                        <td class="price_td">
                                            @if($cart->discount)
{{--                                                <span class="last_price mb-0"><small>{{__('products.sar')}}</small> <b>{{$cart->price}}</b></span>--}}
                                                <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$cart->product_id}}">{{$cart->amount*$cart->discount}}</b></h6>
                                            @else
                                                <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b class="item_price_{{$cart->product_id}}">{{$cart->amount*$cart->price}}</b></h6>
                                            @endif
                                            @if($cart->discount)
                                                <span class="disbount">- {{round((($cart->price-$cart->discount)*100)/$cart->price)}} %</span>
                                            @endif
                                        </td>
                                    </div>
                                </div>
                                <div class="cart_item">
                                    <div class="title">
                                        <h4>{{__('products.delete')}}</h4>
                                    </div>
                                    <div class="info">
                                        <button data-delete=".deleted_item_{{$cart->product_id}}" data-prod="{{$cart->product_id}}" class="delete-btn delete_product_button">
                                            <i class="far fa-trash-alt"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="text-danger text-center no_product_alert d-none ">
                            {{__('products.no_products')}}
                            <a href="{{route('home')}}">{{__('products.products')}}</a>
                        </div>
                    @else
                        <div class="text-danger text-center">
                            {{__('products.no_products')}}
                            <a href="{{route('home')}}">{{__('products.products')}}</a>
                        </div>

                    @endif
                    </div>
            </div>
            @if(count($carts))
                <div class="row mt-4 cart_details">
                    <div class="col-md-4">
                        <form>
                            <div class="form-group">
                                <input name="coupon" class="form-control coupon" placeholder="{{__('products.apply_coupon_code')}}">
                                <button class="submit-btn check_coupon"><i class="fas fa-chevron-right"></i></button>
                            </div>
                        </form>
                        <div class="cart_summary">
                            <div class="item in-flex">
                                <h5 class="labeled mb-0"><b>{{__('products.total')}}:</b></h5>
                                <h5 class="price mb-0"><small>{{__('products.sar')}}</small> <span class="total order_total">{{round($total)}}</span></h5>
                            </div>
                            <div class="item in-flex discount_container d-none">
                                <h5 class="labeled mb-0"><b>{{__('products.discount')}}:</b></h5>
                                <h5 class="price mb-0"><small>{{__('products.sar')}}</small> <span class="discount"></span></h5>
                            </div>
                            @if(isset($settings['show_added_value']))
                                <div class="item in-flex">
                                    <h5 class="labeled mb-0"><b>{{__('products.added_value')}}:</b></h5>
                                    <h5 class="price mb-0"> <small>{{__('products.sar')}}</small> <span class="totalAddedValue">{{round($totalAddedValue)}}</span></h5>
                                </div>
                            @endif
                            <div class="item in-flex">
                                <h5 class="labeled mb-0"><b>{{__('products.shipping_value')}}:</b></h5>
                                <h5 class="price mb-0">
                                    {{--                                <span class="last_price"><small>SAR</small> 150.35 </span>--}}
                                    <small>{{__('products.sar')}}</small> {{round($shippingValue)}}</h5>
                            </div>
                            <div class="item last_iten in-flex">
                                <h5 class="labeled mb-0"><b>{{__('products.sum_total')}}:</b></h5>
                                <h4 class="price mb-0"><small>{{__('products.sar')}}</small> <span class="totalWithAddedAndShippingValue">{{round($totalWithAddedAndShippingValue)}}</span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <a href="#" class="link-btn pay_now_button">{{__('main.pay_now')}}</a>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        let checkCouponRoute = "{{route('product.checkCoupon')}}",
            changeAmountRoute = "{{route('product.changeAmount')}}",
            deleteProductRoute = "{{route('product.delete')}}",
            payNowRoute = "{{route('product.payNow')}}";
    </script>
    <script>
        $(document).on('click', '.check_coupon',async function (e) {
            e.preventDefault();

            let url = checkCouponRoute,
                method = 'post',
                couponInput = $('input[name="coupon"]');

            if(couponInput.val() === ''){
                return  false;
            }

            const response=await ajax({
                url,
                data:{coupon: couponInput.val()},
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors){
                $(this).prop('disabled', false);
                toasterError(response.errors)
            }

            if (response.total){
                $(this).prop('disabled', false);
                $('.totalAddedValue').html(response.totalAddedValue);
                $('.total').html(response.total);
                $('.totalWithAddedAndShippingValue').html(response.totalWithAddedAndShippingValue);
            }

            if (response.discount){
                $(this).prop('disabled', false);
                $('.discount_container').removeClass('d-none');
                $('.discount').html(response.discount);
            }


        });

        $('.amount_minus, .amount_plus').click(async function () {
            let data = {product_id: $(this).data('prod')},
                url = changeAmountRoute,
                method = 'post',
                couponCode = $('input[name="coupon"]').val();

            if ($(this).hasClass('amount_minus')){
                if ($(this).siblings('.product_amount').html() === '1'){
                    return false;
                }
                data.amount_minus = true;
            }
            if ($(this).hasClass('amount_plus')){
                data.amount_plus = true;
            }

            data.coupon = couponCode;

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors){
                toasterError(response.errors)
            }

            if (response.total){
                $('.totalAddedValue').html(response.totalAddedValue); // set for cart
                $('.total').html(response.total); // set for cart
                $('.totalWithAddedAndShippingValue').html(response.totalWithAddedAndShippingValue); // set for cart
                $(this).siblings('.product_amount').html(response.amount); // set for cart
                $('.deleted_item_'+$(this).data('prod')+ ' .nav_product_amount').html(response.amount); // // set for navbar
                $($(this).data('item-price')).html(response.item_price); // set for cart
            }

        });

        $('.delete_product_button').click(async function () {
            let data = {product_id: $(this).data('prod')},
                url = deleteProductRoute,
                method = 'post',
                couponCode = $('input[name="coupon"]').val();

            data.coupon = couponCode;

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors){
                toasterError(response.errors)
            }

            if (response.total){
                $($(this).data('delete')).remove();
                $('.swipe_to_see_more').remove();
                $('.cart_count').html('('+response.cart_count+')');
                $('.icon_cart_count').html(response.cart_count);
                $('.totalAddedValue').html(response.totalAddedValue);
                $('.total, .nav_total').html(response.total); // Set foreach cart and navbar
                $('.totalWithAddedAndShippingValue').html(response.totalWithAddedAndShippingValue);
            }
            if (response.discount){
                $('.discount_container').removeClass('d-none');
                $('.discount').html(response.discount);
            }


            if (response.carts === false){
                $($(this).data('delete')).remove();
                $('.cart_details').remove();
                $('.cart_count').html('(0)');
                $('.icon_cart_count').html(0);
                $('.cart_body_container').html('').remove();
                $('.no_product_alert').removeClass('d-none');
            }

        });

        $('.pay_now_button').click(async function (e) {
            e.preventDefault();

            $(this).attr('disabled', true);

            let data = {coupon: $('input[name="coupon"]').val()},
                url = payNowRoute,
                method = 'post';

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).attr('disabled', false);
                toasterError(response.errors);
            }
            if (response.url) {
                window.location.href = response.url
            }

        });
    </script>
@endsection