@extends('web.layouts.container')
@section('content')
    <section class="register-pg steps_page">
        <div class="container">
            <div class="inner">
                <div class="steps_head">
                    <div class="step_card card_done">
                        <div class="cont">
                            <div class="num">
                                1
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.address')}} </h6>
                        </div>
                    </div>
                    <div class="step_card card_done">
                        <div class="cont">
                            <div class="num">
                                2
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.order_details')}} </h6>
                        </div>
                    </div>
                    <div class="step_card">
                        <div class="cont">
                            <div class="num">
                                3
                            </div>
                            <div class="icon">
                                <img src="{{asset('assets/web/images/done.png')}}" alt="">
                            </div>
                            <h6> {{__('products.payment')}} </h6>
                        </div>
                    </div>
                </div>
                <div class="steps_body">
                    <section class="payment_pg  bg-light p-5">
                        <div class="content">
                            <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($guestCart['products'] as $cart)
                                                <div class="items">
                                                    <div class="img">
                                                        <img src="{{asset($cart['image'])}}" alt="" class="prod-img">
                                                    </div>
                                                    <div class="info">
                                                        <h6 class="prod-name">
                                                            <b>{{$cart['name']}}</b>
                                                        </h6>
                                                        <div class="d-flex valign">
                                                            <div class="quantity-container">
                                                                <div class="add-more ml-3">
                                                                    <span class="qt">{{$cart['amount']}}</span>
                                                                </div>
                                                            </div>
                                                            <div class="price_td">
                                                                <h6 class="price mb-0"><small>{{__('products.sar')}}</small> <b>{{$cart['price']}}</b></h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="order_foot">
                                            <ul>
                                                <li>
                                                    <strong>{{__('products.total')}}:</strong>
                                                    <span><small>{{__('products.sar')}}</small> {{$guestCart['net_total']}}</span>
                                                </li>
                                                <li>
                                                    <strong>{{__('products.shipping_value')}}:</strong>
                                                    <span><small>{{__('products.sar')}}</small> {{$guestCart['shipment_value']}}</span>
                                                </li>
                                                @if($guestCart['coupon_discount'] ?? null)
                                                <li>
                                                    <strong>{{__('products.discount')}}:</strong>
                                                    <span><small>{{__('products.sar')}}</small> {{$guestCart['coupon_discount']}}</span>
                                                </li>
                                                @endif
                                                <li>
                                                    <strong>{{__('products.added_value')}}:</strong>
                                                    <span><small>{{__('products.sar')}}</small> {{$guestCart['added_value_amount']}}</span>
                                                </li>
                                            </ul>
                                            <ul class="total">
                                                <li>
                                                    <strong>{{__('products.sum_total')}}:</strong>
                                                    <span><small>{{__('products.sar')}}</small> {{$guestCart['order_total']}}</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 pay_button">{{__('main.pay_now')}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        let visitorPayRoute = "{{route('product.visitorProductPay')}}";

        $('.pay_button').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);

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

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

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

        });
    </script>
@endsection