@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
    @include('web.layouts.header')


        <section class="cart_pg section">
            <div class="container">
                <form method="post" action="{{route('checkouting.payment')}}"
                      onsubmit="order(this)"
                      class="form-submit-loader">
                    @CSRF
                    <h2 class="sec_title text-uppercase color-primary fw-bold mb-5">
                        {{ __('web.order_details') }}
                        <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block " alt="">
                    </h2>
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="inner">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="data-group">
                                            <span class="label color-gray2">   {{ __('web.payment_method') }}  </span>
                                            <p class="data mb-0"> {{__('web.'.$order_shipping_status)}} </p>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="data-group">
                                            <span class="label color-gray2">   {{ __('web.shipping_method') }}  </span>
                                            <p class="data mb-0">  {{$shipping_method}}     </p>
                                            @isset($shipping_city)
                                                <span class="float_alert text-danger"> {{ $shipping_city->timingLang(getCurrentLocale()) }} </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="data-group">
                                            <span class="label color-gray2">   {{ __('web.date') }}  </span>
                                            <p class="data mb-0">  {{$date}}     </p>
                                        </div>
                                    </div>
                                    @isset($location)
                                    <div class="col-lg-6">
                                        <div class="data-group">
                                            <div class="in-flex">
                                                <span class="label color-gray2"> {{ __('web.location') }}  </span>
                                            </div>
                                            <p class="data mb-0"> {{$location}} </p>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <h2 class="sec_title text-uppercase color-primary fw-bold my-5">
                                {{ __('web.shopping_cart') }}
                                <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block " alt="">
                            </h2>
                            <div class="table-responsive">
                                @include('web.pages.components.cart.cart')
                            </div>
                            <div class="in-flex mt-5 flex-wrap" >
                                <a href="{{route('checkout.method')}}" class="butn white_butn fw-bold">
                                    <i class="fas fa-angle-left me-3"></i>  {{ __('web.back') }}
                                </a>

                                <button type="submit" class="butn primary_butn fw-bold" >
                                    {{ __('web.checkout') }}
                                    <i class="fas fa-angle-right ms-3"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-lg-3 order_sm_1" >
                            <div class="order_summary cong_card mb-5 text-center" id="discount_shipping_message" style='display:none'>
                                <h4 class="mb-4 fw-bold"> {{__('web.congratulation')}} </h4>
                                <img src="{{url('')}}/assets/web/images/percentage.png" alt="" class="icon">
                                <p> {{__('web.you_get_offer')}} <strong id="shipping_offer"></strong> {{__('web.because_subscribe')}} <strong id="total_before_shipping"></strong> {{$currency->abbr}}</p>
                                <img src="{{url('')}}/assets/web/images/cong.png" alt="" class="bg">
                            </div>
                            <div class="copon_box order_summary mb-5">
                                <h5 class="mb-4 fw-bold">{{ __('web.cobon') }} </h5>
                                <div class="form-group">
                                    <input class="form-control" id="cobon" onchange="calculate()" placeholder=" {{ __('web.cobon') }}   " name="cobon" type="text"/>
                                    <button type="button" class="butn primary_butn apply_butn">{{ __('web.apply') }}</button>
                                    <p id="cobon_msg" style='display:none'></p>
                                </div>
                            </div>
                            <div class="copon_box order_summary mb-5">
                                <h5 class="mb-4 fw-bold">{{ __('web.note') }} </h5>
                                <div class="form-group">
                                    <textarea rows="6" name="note" class="form-control" ></textarea>
                                </div>
                            </div>
                            <div class="order_summary">
                                <div class="order_summary_inner">
                                    <h5 class="mb-4 fw-bold">{{ __('web.payment_details') }}</h5>
                                    <div class="item in-flex mb-3">
                                        <span class="label">{{ __('web.product_costs') }}</span>
                                        <h6 class="price"><b class="color-primary" id="product_costs"></b> <small>{{$currency->abbr}}</small></h6>
                                    </div>
                                    <div class="item in-flex mb-3" id='tax'>
                                        <span class="label">{{ __('web.tax') }}</span>
                                        <h6 class="price"><b class="color-primary" id="total_tax"></b> <small>{{$currency->abbr}}</small></h6>
                                    </div>
                                    <div class="item in-flex mb-3">
                                        <span class="label">{{ __('web.product_total') }}</span>
                                        <h6 class="price"><b class="color-primary" id="product_total"></b> <small>{{$currency->abbr}}</small></h6>
                                    </div>
                                    <div class="item in-flex mb-3" id="cobon_discount">
                                        <span class="label">{{ __('web.total_cobon_discount') }}</span>
                                        <h6 class="price"><b class="color-primary" id="total_cobon_discount"></b> <small>{{$currency->abbr}}</small></h6>
                                    </div>
                                    <div class="item in-flex mb-3" id="shipping">
                                        <span class="label">{{ __('web.total_shipping') }}</span>
                                        <h6 class="price"><b class="color-primary" id="total_shipping"></b> <small>{{$currency->abbr}}</small></h6>
                                    </div>
                                    <div class="item in-flex mb-3" id="recieving_valid">
                                        <span class="label">{{ __('web.recieving_payment') }}</span>
                                        <h6 class="price"><b class="color-primary" id="recieving_value"></b> <small>{{$currency->abbr}}</small></h6>
                                    </div>
                                    <div class="item in-flex mb-0">
                                        <span class="label">{{ __('web.total') }}</span>
                                        <h6 class="price"><b class="color-primary" id="total_order"></b> <small>{{$currency->abbr}}</small></h6>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
        </section>


    <!-- Start section -->
        @include('web.layouts.newsletter')
    </main>

    <!--<button class="butn primary_butn fw-bold"  data-bs-toggle="modal" data-bs-target="#successModal">-->
    <!--   modal-->
    <!--</button>-->

    <!-- Start modal -->
    <div class="modal successModal fade" tabindex="1" id="successModalOrder">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center">
                        <img src="{{url('')}}/assets/web/images/modals/checkMark.png" alt="" class="icon m-auto d-block mb-4"/>
                        <h3 class="fw-bold mb-4">{{__('web.success')}}</h3>
                        <h5 class="mb-0">{{__('web.order_number')}} : <b class="color-primary" id="order_id"></b></h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

@section('inject_js')
    <script>
        let url_edit_cart = "{{url(getCurrentLocale().'/cart/edit')}}"
        let url_delete_cart = "{{url(getCurrentLocale().'/cart/delete')}}"
        let currency_abbr = "{{$currency->abbr}}"
    </script>
    <script>
        let url_calculate_order = "{{route('order.calculate')}}"
        setTimeout(function(){
            calculate()
        }, 700);

        function order(elem)
        {
            event.preventDefault();
            var action = $(elem).attr('action');
            var method = $(elem).attr('method');
            if(method == 'GET')
            {
                var dataform = $(elem).serialize();
            }
            else
            {
                var dataform = new FormData( $(elem)[0]);
            }

            $.ajax
            ({
                url : action,
                type: method,
                data: dataform,
                dataType:'json',
                contentType: false,
                processData: false,
                success:function(data)
                {
                    if('data' in data)
                    {
                        let external_redirection = data.data?.external_redirection === true;
                        if(data.message != '' && !external_redirection)
                        {
                            toasterSuccess(data.message);
                        }
                        if(data.data.url != '')
                        {
                            $('#order_id').html(data.data.order_id)
                            if(!external_redirection){
                                $('#successModalOrder').modal('show')
                            }
                            setTimeout(
                            function()
                            {
                                window.location.href = data.data.url
                            }, 1000);
                        }
                    }
                    else
                    {
                        toasterError(Object.values(data.errors)[0]);
                    }
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                    if(data.responseJSON?.url){
                        window.location.href = data.responseJSON.url
                    }
                }
            })
        }

        $(".qt-plus").click(function() {
            let newVal = parseInt($(this).parent().children(".qt").html()) + 1;
            let cart_id = $(this).attr('data-id');
            $.ajax
            ({
                url : url_edit_cart+'/'+cart_id,
                type: "POST",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                data: 'count='+newVal+'&status=plus',
                dataType:'json',
                success:function(data)
                {
                    calculateCart()
                    $('#cart_count').html(data.data.cart_count);
                    if(data.data.cart_count > 0)
                    {
                        $('#cart_count').show();
                    }
                    else
                    {
                        $('#cart_count').hide();
                    }
                    toasterSuccess(data.message);
                    calculate()
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        });

        $(".qt-minus").click(function() {

            child = $(this).parent().children(".qt");

            if (parseInt(child.html()) > 1) {
                let newVal = parseInt(child.html()) - 1;
                let cart_id = $(this).attr('data-id');
                $.ajax
                ({
                    url : url_edit_cart+'/'+cart_id,
                    type: "POST",
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    data: 'count='+newVal+'&status=minus',
                    dataType:'json',
                    success:function(data)
                    {
                        calculateCart()
                        $('#cart_count').html(data.data.cart_count);
                        if(data.data.cart_count > 0)
                        {
                            $('#cart_count').show();
                        }
                        else
                        {
                            $('#cart_count').hide();
                        }
                        toasterSuccess(data.message);
                        calculate()
                    }
                    ,error:function(data)
                    {
                        toasterError(Object.values(data.responseJSON.errors)[0]);
                    }
                })

            }

            $(this).parent().children(".full-price").addClass("minused");

        });
        function deleteCart(elem)
        {
            let cart_id = $(elem).attr('data-id');
            $.ajax
            ({
                url : url_delete_cart+'/'+cart_id,
                type: 'GET',
                data: '',
                success:function(data)
                {
                    $('#cart_count').html(data.data.count);
                    if(data.data.count > 0)
                    {
                        $('#cart_count').show();
                    }
                    else
                    {
                        $('#cart_count').hide();
                    }
                    $(elem).closest('.cart_row').fadeOut(1000);
                    calculate();
                    calculateCart();
                }
            })
        }
        function calculate()
        {
            let cobon = $('#cobon').val()
            $.ajax
            ({
                url : url_calculate_order,
                type: "GET",
                data: 'cobon='+cobon,
                dataType:'json',
                success:function(data)
                {
                    $.each(data.products, function (key, product) {
                        $('#cart'+product.cart_id).html(product.count);
                        $('#product_cost_total'+product.cart_id).html(product.product_total);
                        $('#tax_value'+product.cart_id).html(product.tax);
                        $('#product_total'+product.cart_id).html(product.product_total);
                        $('#product_cost'+product.cart_id).html(product.product_cost);
                        // if(product.discount != 0)
                        // {
                        //     $('#product_cost_main'+product.cart_id).html(' <b class="color-primary" id="product_cost'+product.cart_id+'">'+product.product_cost+' </b> <small class="fs-6">'+currency_abbr+'</small><del>'+ (product.product_cost + product.discount) +' '+currency_abbr+'</del>');
                        // }
                        // else
                        // {
                        //     $('#product_cost_main'+product.cart_id).html(' <b class="color-primary" id="product_cost'+product.cart_id+'">'+product.product_cost+' </b> <small class="fs-6">'+currency_abbr+'</small>');
                        // }
                    });
                    $('#product_costs').html(data.product_costs);
                    $('#product_total').html(data.product_total);
                    $('#cobon_msg').html('');
                    if(data.cobon_msg == '')
                    {
                        $('#cobon_msg').hide();
                    }
                    else
                    {
                        $('#cobon_msg').html(data.cobon_msg);
                        if(data.cobon_total == 0)
                        {
                            $('#cobon_msg').css('color','red');
                        }
                        else
                        {
                            $('#cobon_msg').css('color','green');
                        }
                        $('#cobon_msg').show();
                    }
                    if(data.tax_valid == 'true')
                    {
                        $('#tax').show()
                    }
                    else
                    {
                        $('#tax').hide()
                    }
                    $('#total_tax').html(data.total_tax);

                    $('#total_shipping').html(data.total_shipping);
                    if(data.total_shipping == 0)
                    {
                        $('#shipping').hide();
                    }
                    else
                    {
                        $('#shipping').show();
                    }
                    $('#recieving_value').html(data.on_hand_payment);
                    $('#total_cobon_discount').html(data.cobon_total);
                    if(data.cobon_status != null)
                    {
                        $('#cobon_discount').show();
                    }
                    else
                    {
                        $('#cobon_discount').hide();
                    }
                    $('#recieving_valid').hide();
                    if(data.on_hand_status == 'true')
                    {
                        if(data.on_hand_payment != 0)
                        {
                            $('#recieving_valid').show();
                        }
                    }

                    $('#shipping_offer').html(data.shipping_offer + '%');
                    $('#total_before_shipping').html(data.total_before_shipping);
                    if(data.shipping_offer != 0)
                    {
                        $('#discount_shipping_message').show();
                    }
                    else
                    {
                        $('#discount_shipping_message').hide();
                    }
                    $('#total_order').html(data.total_order);
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
    </script>
@endsection

@stop
