@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <section class="page_header">
        <div class="container">
            <div class="content">
                <ul class="links">
                    <li class="li_link">
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a>
                    </li>
                    <li class="li_link">
                        <span>الدفع</span>
                    </li>
                </ul>
            </div>
            <div class="section_head text-center">
                <h2> الدفع </h2>
            </div>
        </div>
        <img src="{{asset('assets/web/images/heading-pattern-l.png')}}" class="pattern-l">
        <img src="{{asset('assets/web/images/heading-pattern-r.png')}}" class="pattern-r">

    </section>
    <!-- -------------- Checkout --------------- -->
    <section class="cart-sec checkout-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="checkout-way">
                        <h5>اختار طريقة الدفع</h5>
                        <div class="pay mt-4">
                            <form class="pay_now_form" enctype="multipart/form-data">
                                @if(array_key_exists('bank_account', settings()) && settings('bank_account'))
                                    <div class="form-group pay_way_container">
                                        <div class="custom-control custom-checkbox custom-control-inline">
                                            <input type="radio" class="custom-control-input" id="bank" name="pay_way" value="bank">
                                            <label class="custom-control-label" for="bank">
                                                <img src="{{asset('assets/web/images/pay/pay-6.png')}}" alt="">
                                                <p> التحويل البنكي</p>
                                            </label>
                                        </div>
                                    </div>
                                @endif
                                @if(array_key_exists('mada', settings()) && settings('mada'))
                                    <div class="form-group pay_way_container">
                                        <div class="custom-control custom-checkbox custom-control-inline">
                                            <input type="radio" class="custom-control-input" id="mada" name="pay_way" value="mada">
                                            <label class="custom-control-label" for="mada">
                                                <img src="{{asset('assets/web/images/pay/pay-11.png')}}" alt="">
                                                <p> عن طريق بطاقه مدى</p>
                                            </label>
                                        </div>
                                    </div>
                                @endif
                                @if(array_key_exists('visa_master', settings()) && settings('visa_master'))
                                    <div class="form-group pay_way_container">
                                        <div class="custom-control custom-checkbox custom-control-inline">
                                            <input type="radio" class="custom-control-input" id="visa" name="pay_way" value="visa">
                                            <label class="custom-control-label" for="visa">
                                                <img src="{{asset('assets/web/images/pay/pay-4.png')}}" alt="">
                                                <p> عن طريق الفيزا</p>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group pay_way_container">
                                        <div class="custom-control custom-checkbox custom-control-inline">
                                            <input type="radio" class="custom-control-input" id="mastercard" name="pay_way" value="mastercard">
                                            <label class="custom-control-label" for="mastercard">
                                                <img src="{{asset('assets/web/images/pay/pay-3.png')}}" alt="">
                                                <p> عن طريق الماستر كارد</p>
                                            </label>
                                        </div>
                                    </div>
                                @endif
                                @if(array_key_exists('my_points', settings()) && settings('my_points'))
                                    <div class="form-group my_points_container">
                                        <div class="custom-control custom-checkbox custom-control-inline">
                                            <input type="checkbox" class="custom-control-input" id="points" name="points" value="points">
                                            <label class="custom-control-label" for="points">
                                                <img src="{{asset('assets/web/images/pay/pay-7.png')}}" alt="">
                                                <p>استخدام النقاط</p>
                                            </label>
                                        </div>
                                    </div>
                                @endif
                                @if(array_key_exists('coupons', settings()) && settings('coupons'))
                                    <div class="form-group coupon_container">
                                        <h6>كوبون الخصم <small>(إن وجد)</small></h6>
                                        <div class="d-flex align-items-center">
                                            <input name="coupon" class="form-control w-75" placeholder="الكود...">
                                            <a href="#" class="check_coupon w-25 btn btn-primary">Check</a>
                                        </div>
                                    </div>
                                @endif


                                <div class="bank-transfer-btns">
                                    <div class="form-group up_group payment_receipt_container">
                                        <h6>رفع صوره الايصال </h6>
                                        <input type="file" name="payment_receipt" class="file">
                                        <div class="input-group">
                                            <span class="input-group-append">أضغط لرفع الصوره </span>
                                            <input type="text" class="input_ques" disabled placeholder="مسار الصوره" aria-label="Upload File" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                </div>
                                <button class="butn color submit-btn pay_now_button">إدفع الآن</button>
                            </form>
                        </div>

                    </div>
                </div>
                <div class="col-lg-8">
                    @if($points)
                        <div class="text-danger col-md-12 alert alert-info">لديك رصيد في محفظتك ({{round($points)}}) ريال </div>
                    @endif

                    <div class="row mt-3">

                        <div class="responsive-table col-md-12">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">صورة الدورة</th>
                                    <th scope="col">إسم الدورة</th>
                                    <th scope="col">السعر</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <img src="{{asset($course->image)}}" alt="" class="prod-img">
                                    </td>
                                    <td>{{descriptions($course)->name}}</td>
                                    <td>{{$course->price}}</td>
                                </tr>

                                </tbody>
                            </table>
                        </div>

                        <div class="col-md-12 mr-auto">
                            <div class="bill-summary">
                                <div class="item">
                                    <h6 class="mb-0">سعر الدورة</h6>
                                    <h5 class="dir-l">{{$price}} <small>SAR</small></h5>
                                </div>
                                <div class="item">
                                    <h6 class="mb-0">ضريبه القيمه المضافه</h6>
                                    <h5 class="dir-l">{{$addedValue}} <small>SAR</small></h5>
                                </div>
                                <div class="item total">
                                    <h6 class="mb-0">المجموع </h6>
                                    <h5 class="dir-l">{{$total}} <small>SAR</small></h5>
                                </div>
                                <div class="item total discount_container d-none">
                                    <h6 class="mb-0">الخصم </h6>
                                    <h5 class="dir-l"><span class="coupon_discount">0</span> <small>SAR</small></h5>
                                </div>
                                <div class="item total total_sum_container d-none">
                                    <h6 class="mb-0">المجموع الكلي </h6>
                                    <h5 class="dir-l total_sum"><span>{{$total}}</span> <small>SAR</small></h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <div class="banking-page bg-gray">
        <!--Start bank-acc -->
        <section class="bank-acc section-padding">
            <div class="container">
                <div class="row">
                    @if(count($bankAccounts))
                        @foreach($bankAccounts as $bankAccount)
                            <div class="col-md-6">
                                <div class="bank-card">
                                    <img src="{{$bankAccount->image ? asset($bankAccount->image) : asset('assets/web/images/bank-acc-1.png')}}" alt="" class="bank-logo">
                                    <div class="text">
                                        <h6>{{$bankAccount->name}}</h6>
                                        <span>رقم الحساب</span>
                                        <p>{{$bankAccount->account_number}}</p>
                                        <span>رقم الآيبان</span>
                                        <p>{{$bankAccount->iban}}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>
    </div>
@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script>
        let checkCoursePriceRoute = "{{route('checkCoursePrice', $course->id)}}",
            checkCouponRoute = "{{route('checkCoupon', $course->id)}}",
            payNowRoute = "{{route('payNow', $course->id)}}";
    </script>
    <script src="{{ asset('assets/web/js/courses.course_checkout.js') }}"></script>
@endsection