@extends('web.layouts.container')
@section('css')
    <style>
        label, input[type=radio]{
            cursor: pointer;
        }
    </style>
@endsection
@section('content')

    <div class="pg-header">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="#"><img src="{{asset('assets/web/images/icon-2.png')}}" alt="" class="icon"/></a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('packages.payment')}}</li>
                </ol>
            </nav>
            <h2 class="title text-center mb-0">{{__('packages.payment')}}</h2>
        </div>
    </div>

    <section class="payment_pg pb-5">
        <div class="container">
            <div class="row mt-5">
                <div class="col-lg-8">
                    <div class="payment_method">
                        <div class="items mb-5">
                            <h4>{{__('packages.choose_pay_way')}} :</h4>
                            <div class="d-flex justify-content-between mt-5">
                                <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="14" 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="btn btn-primary finish_pay_button">{{__('main.pay_now')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        let finishPayRoute = "{{route('package.finishPay')}}",
            payWay = "{{__('packages.choose_pay_way')}}";
    </script>
    <script>

        $('.navbar').toggleClass('inner-nav home-nav');

        $('.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
            }

            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