@extends('web.layouts.container')

@section('content')
    <section class="payment_pg pb-5">
        <div class="container">
            <div class="text-center">
                <div class="sec-heading mb-4 mt-4 wow fadeInUp" data-wow-duration="2s">
                    <span>{{__('products.payment')}}</span>
                    <h1>{{__('products.payment')}}</h1>
                </div>
            </div>
            @if(count($carts))
                <div class="content complete_payment_container">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="order_det">
                                <h5 class="det_head">{{__('products.order_details')}}</h5>
                                <div class="order_list">
                                    @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="items deleted_item_{{$cart->product_id}}">
                                            <div class="top w-100 d-flex">
                                                <div class="img">
                                                    <img src="{{asset($image)}}" alt="" class="prod-img">
                                                </div>
                                                <div class="info">
                                                    <h6 class="prod-name">
                                                        <b>{{$cart->name}}</b>
                                                    </h6>
                                                </div>
                                                <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 class="bottom d-flex justify-content-between w-100 deleted_item_{{$cart->product_id}}">
                                                <div class="text-white">{{__('products.colors')}}</div>
                                                <div>
                                                    <div style="width:35px;height:35px; border-radius: 50%; background-color: {{$cart->color}}"></div>
                                                </div>
                                            </div>
                                            <div class="bottom d-flex justify-content-between w-100 deleted_item_{{$cart->product_id}}">
                                                <div class="text-white">{{__('products.quantity')}}</div>
                                                <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 class="price_td">
                                                    <h6 class="price mb-0"><small>SAR</small> <b class="item_price_{{$cart->product_id}}">{{$cart->product_price*$cart->amount}}</b></h6>
                                                </div>
                                            </div>
                                        </div>

                                    @endforeach
                                </div>
                                <div class="order_foot">
                                    <ul>
                                        <li>
                                            <strong>{{__('products.total')}}:</strong>
                                            <span><small>{{__('products.sar')}}</small> <span class="order_total">{{$total}}</span></span>
                                        </li>
                                        @if($order->coupon_id)
                                            <li>
                                                <strong>{{__('products.discount')}}:</strong>
                                                <span><small>{{__('products.sar')}}</small><span class="discount">{{ $order->order_discount}}</span></span>
                                            </li>
                                        @endif
                                        @if(isset($settings['show_added_value']))
                                            <li>
                                                <strong>{{__('products.added_value')}}:</strong>
                                                <span><small>{{__('products.sar')}}</small> <span class="totalAddedValue">{{$addedTax}}</span></span>
                                            </li>
                                        @endif
                                        <li>
                                            <strong>{{__('products.shipping_value')}}:</strong>
                                            <span><small>{{__('products.sar')}}</small>{{$shippingValue}}</span>
                                        </li>

                                    </ul>
                                    <ul class="total">
                                        <li>
                                            <strong>{{__('products.sum_total')}}:</strong>
                                            <span><small>{{__('products.sar')}}</small> <span class="totalWithAddedAndShippingValue">{{$order->order_total}}</span></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="payment_method">
                                <div class="items mb-5">
                                    <h4>{{__('products.shipping_method')}} :</h4>
                                    <div class="pay-selection">
                                        <label>
                                            <input type="checkbox" name="shipping_way" checked value="1" class="time-input-element">
                                            <div class="panel panel-default time-input">
                                                <div class="panel-heading">
                                                    <img src="{{asset('assets/web/images/icons/aramex.png')}}">
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="items mb-5">
                                    <h4>{{__('products.choose_pay_way')}} :</h4>
                                    <div class="pay-selection">
                                        <label>
                                            <input type="radio" checked name="pay_way" value="6" class="time-input-element">
                                            <div class="panel panel-default time-input">
                                                <div class="panel-heading">
                                                    <img src="{{asset('assets/web/images/pay/pay-1.png')}}">
                                                </div>
                                            </div>
                                        </label>
                                        <label>
                                            <input type="radio" name="pay_way" value="12" class="time-input-element">
                                            <div class="panel panel-default time-input">
                                                <div class="panel-heading">
                                                    <img src="{{asset('assets/web/images/pay/pay-2.')}}png">
                                                </div>
                                            </div>
                                        </label>
                                        <label>
                                            <input type="radio" name="pay_way" value="2" class="time-input-element">
                                            <div class="panel panel-default time-input">
                                                <div class="panel-heading">
                                                    <img src="{{asset('assets/web/images/pay/pay-3.png')}}">
                                                </div>
                                            </div>
                                        </label>
                                        <label>
                                            <input type="radio" name="pay_way" value="2" class="time-input-element">
                                            <div class="panel panel-default time-input">
                                                <div class="panel-heading">
                                                    <img src="{{asset('assets/web/images/pay/pay-4.png')}}">
                                                </div>
                                            </div>
                                        </label>
                                        <label>
                                            <input type="radio" name="pay_way" value="11" class="time-input-element">
                                            <div class="panel panel-default time-input">
                                                <div class="panel-heading">
                                                    <img src="{{asset('assets/web/images/pay/pay-5.png')}}">
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <a href="#" class="butn mt-4 finish_pay_button">{{__('main.pay_now')}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="alert alert-secondary text-center no_product_alert d-none"><a href="{{route('product.index')}}">{{__('products.no_products')}}{{__('products.products')}}</a></div>

            @else
                <div class="alert alert-secondary text-center"><a href="{{route('product.index')}}">{{__('products.no_products')}}{{__('products.products')}}</a></div>
            @endif
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        let changeAmountRoute = "{{route('product.changeAmount')}}",
            deleteProductRoute = "{{route('product.delete')}}",
            finishPayRoute = "{{route('product.finishPay')}}",
            orderCoupon = "{{$couponCode}}",
            payWay = "{{__('products.choose_pay_way')}}",
            shippingWay = "{{__('products.shipping_method')}}";
    </script>
    <script>

        $('.amount_minus, .amount_plus').click(async function () {
            let data = {product_id: $(this).data('prod')},
                url = changeAmountRoute,
                method = 'post',
                couponCode = orderCoupon;

            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);
                $('.order_total, .nav_total').html(response.total);
                $('.discount').html(response.discount);
                $('.totalWithAddedAndShippingValue').html(response.totalWithAddedAndShippingValue);
                $(this).siblings('.product_amount').html(response.amount);
                $($(this).data('item-price')).html(response.item_price);
                $('.deleted_item_'+$(this).data('prod')+ ' .nav_product_amount').html(response.amount);
            }

        });

        $('.delete_product_button').click(async function () {
            let data = {product_id: $(this).data('prod')},
                url = deleteProductRoute,
                method = 'post',
                couponCode = orderCoupon;

            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(); // set foreach nav and complete pay
                $('.totalAddedValue').html(response.totalAddedValue); // set for complete pay
                $('.order_total, .nav_total').html(response.total); // set foreach nav and complete pay
                $('.discount').html(response.discount); // set for complete pay
                $('.cart_count').html('('+response.cart_count+')'); // set for complete pay
                $('.icon_cart_count').html(response.cart_count); // set for complete pay
                $('.totalWithAddedAndShippingValue').html(response.totalWithAddedAndShippingValue); // set for complete pay
            }

            if (response.discount){
                $('.discount_container').removeClass('d-none');
                $('.discount').html(response.discount);
            }

            if (response.carts === false){
                $('.complete_payment_container').remove();
                $('.icon_cart_count').html(0);
                $('.cart_count').html('(0)');
                $('.cart_body_container').html('').remove();
                $('.no_product_alert').removeClass('d-none');

            }

        });

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

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

            let data = {pay_way: $('input[name="pay_way"]:checked').val(), shipping_way: $('input[name="shipping_way"]:checked').val()},
                url = finishPayRoute,
                method = 'post';

            if(data.pay_way === undefined){
                toasterError(payWay);
                return false
            }

            if(data.shipping_way === undefined){
                toasterError(shippingWay);
                return false
            }

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

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

        });
    </script>
@endsection