@extends('web.layouts.container')
@section('css')
    <style>
        label, input[type=radio]{
            cursor: pointer;
        }
    </style>
@endsection
@section('content')
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{__('main.subscription')}}</h4>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">{{__('main.home_page')}}</a>
                        <i class="far fa-dot-circle"></i>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{$header_title}}</li>
                </ol>
            </nav>
        </div>
    </div>

    <section class="packages-pg">
        <div class="container">
{{--            <div class="text-heading">--}}
{{--                <div class="text">--}}
{{--                    <span class="title">{{$title}}</span>--}}
{{--                    <span class="bg">{{__('main.subscription')}}</span>--}}
{{--                    <h3>{{__('main.subscription')}}</h3>--}}
{{--                </div>--}}
{{--            </div>--}}

            @if(session()->has('course_subscription'))
                <div class="payment_det p-5 bg-white">
                    <div class="container">
                        <div class="text-heading">
                            <div class="text">
                                <span class="title">{{__('main.subscription')}}</span>

                                <h3>{{session('course_name')}}</h3>
                            </div>

                        </div>
                        <table class="table table-bordered table-striped m-0">
                            <tbody>
                            <tr>
                                <th scope="col">{{__('main.subscription')}}</th>
                                <td>{{session('course_name')}}</td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('courses.hours')}} </th>
                                <td>{{session('period') . ' ' . __('courses.hour')}}</td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('courses.price')}}</th>
                                <td>{{session('course_price') . ' ' . __('main.sar')}} </td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('settings.added_value')}}</th>
                                <td>{{((session('course_price')*$settings['added_value'])/100) . ' ' . __('main.sar')}} </td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('main.total')}}</th>
                                <td>{{session('course_price')+((session('course_price')*$settings['added_value'])/100) . ' ' . __('main.sar')}} </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
            @if(session()->has('package_subscription') || session()->has('package_renew'))
                <div class="payment_det p-5 bg-white">
                    <div class="container">
                        <div class="text-heading">
                            <div class="text">
                                <span class="title">{{__('main.subscription')}}</span>

                                <h3>{{session('package_name')}}</h3>
                            </div>

                        </div>
                        <table class="table table-bordered table-striped m-0">
                            <tbody>
                            <tr>
                                <th scope="col">{{__('main.subscription')}}</th>
                                <td>{{session('package_name')}}</td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('packages.period')}} </th>
                                <td> {{session('period') . ' ' .__('packages.month')}}</td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('packages.price')}}</th>
                                <td>{{session('package_price') . ' ' . __('main.sar')}}</td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('settings.added_value')}}</th>
                                <td>{{((session('package_price')*$settings['added_value'])/100) . ' ' . __('main.sar')}} </td>
                            </tr>
                            <tr>
                                <th scope="col">{{__('main.total')}}</th>
                                <td>{{session('package_price')+((session('package_price')*$settings['added_value'])/100) . ' ' . __('main.sar')}} </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            <div class="row mt-5">
                <div class="col-lg-6">
                    <form action="{{route('checkPaymentWay')}}" method="post" enctype="multipart/form-data" class="finish_pay_form">
                        <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="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="bank" class="time-input-element bank">
                                        <div class="panel panel-default time-input">
                                            <div class="panel-heading">
                                                <img style="width: 87px" src="{{asset('assets/web/images/pay/pay-7.png')}}">
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="receipt_container col-md-12 d-none">
                                   <div class="form-group d-flex align-items-center justify-content-between">
                                       <label class="btn btn-primary" style="width: 35%" for="receipt"><span>{{__('banks.upload_receipt')}}</span>
                                           <i class="fa fa-upload"></i>
                                           <input style="opacity: 0" name="receipt" id="receipt" type="file" class="form-control">
                                       </label>
                                       <input type="text" readonly class="form-control receipt_value bg-white" style="direction: ltr; width: 64%">
                                   </div>
                                </div>
                            </div>

                            <button class="main-butn finish_pay_button">{{__('packages.pay_now')}}</button>
                        </div>
                    </form>
                </div>
                <div class="col-lg-5 mr-5 receipt_container d-none">
                    @if(count($bankAccounts))
                        <h4>{{__('banks.head')}} :</h4>
                        <table class="table table-bordered table-striped m-0">
                            <tbody>
                            <th scope="col">{{__('banks.account_name')}}</th>
                            <th scope="col">{{__('banks.account_number')}}</th>
                            <th scope="col">{{__('banks.iban')}}</th>
                            @foreach($bankAccounts as $bankAccount)
                            <tr>
                                <td><p>{{$bankAccount->name}}</p></td>
                                <td><p>{{$bankAccount->account_number}}</p></td>
                                <td><p>{{$bankAccount->iban}}</p></td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>

        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        let payWay = "{{__('packages.choose_pay_way')}}",
            receiptRequired = "{{__('packages.receipt_required_if')}}";
    </script>
    <script>

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

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

            let form = $('.finish_pay_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            if($('input[name="pay_way"]:checked').val() === undefined){
                toasterError(payWay);
                return false
            }

            if($('input[name="pay_way"]:checked').val() === 'bank' && $('input[type="file"]').val() === ''){
                toasterError(receiptRequired);
                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.message) {
                toasterSuccess(response.message);
                setTimeout(function () {
                    window.location.href = response.url
                },200)
            }
            if (response.url) {
                window.location.href = response.url
            }

        });
        $('input[type="radio"]').click(function () {
            if($(this).hasClass('bank') && $(this).prop('checked') === true){
                $('.receipt_container').removeClass('d-none');
            } else {
                $('.receipt_container').addClass('d-none');
            }
        });
        $('input[type="file"]').change(function () {
            let fileValue = $(this).val().replace('C:\\fakepath\\', '');
            $('.receipt_value').val(fileValue);
        })
    </script>
@endsection