@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>


    <section class="cart-sec checkout-sec checkout_container">
        <div class="container">
            <div class="row">
                @if(count($orders))
                    <div class="col-lg-4">
                        <div class="checkout-way">
                            <h5>{{$netTotal ? 'اختار طريقة الدفع' : 'إدفع الآن'}}</h5>
                            <div class="pay mt-4">
                                <form class="pay_now_form" enctype="multipart/form-data">
                                    @if($netTotal)
                                        @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('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>
                                        @else
                                            <div class="form-group pay_way_container" style="opacity: .5">
                                                <div class="custom-control custom-checkbox custom-control-inline">
                                                    <label class="custom-control-label" for="bank">
                                                        <img src="{{asset('assets/web/images/pay/pay-6.png')}}" alt="">
                                                        <p> التحويل البنكي</p>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group pay_way_container" style="opacity: .5">
                                                <div class="custom-control custom-checkbox custom-control-inline">
                                                    <label class="custom-control-label" for="mada">
                                                        <img src="{{asset('assets/web/images/pay/pay-11.png')}}" alt="">
                                                        <p> عن طريق بطاقه مدى</p>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group pay_way_container" style="opacity: .5">
                                                <div class="custom-control custom-checkbox custom-control-inline">
                                                    <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" style="opacity: .5">
                                                <div class="custom-control custom-checkbox custom-control-inline">
                                                    <label class="custom-control-label" for="mastercard">
                                                        <img src="{{asset('assets/web/images/pay/pay-3.png')}}" alt="">
                                                        <p> عن طريق الماستر كارد</p>
                                                    </label>
                                                </div>
                                            </div>
                                    @endif
                                    <button class="butn color submit-btn pay_now_button">إدفع الآن</button>
                                </form>
                            </div>

                        </div>

                    </div>
                    <div class="col-lg-8">
                        <div class="responsive-table">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th scope="col">المنتج</th>
                                    <th scope="col">إسم المنتج</th>
                                    <th scope="col">الكميه</th>
                                    <th scope="col">السعر</th>
                                    <th scope="col"></th>
                                </tr>
                                </thead>
                                <tbody>
                                @if($orders)
                                    @foreach($orders as $order)
                                        <tr class="tr_{{$order->id}}">
                                            <td scope="row">
                                                <img src="{{asset($order->image)}}" alt="" class="prod-img">
                                            </td>
                                            <td>{{$order->name}}</td>
                                            <td>
                                                <div class="quantity-container">
                                                    <div class="add-more">
                                                        <span data-item-quantity=".item_quantity_{{$order->id}}" data-product-order="{{$order->id}}" data-discount-target=".discount_target_{{$order->id}}" data-item-price=".item_price_{{$order->id}}" data-discount="{{$order->discount ? ($order->price-$order->discount) :  0}}" data-price="{{$order->price}}" class="qt-minus amount_minus"><i class="fas fa-minus"></i></span>
                                                        <span class="qt item_quantity_{{$order->id}}">{{$order->product_order_amount}}</span>
                                                        <span data-item-quantity=".item_quantity_{{$order->id}}" data-product-order="{{$order->id}}" data-discount-target=".discount_target_{{$order->id}}" data-item-price=".item_price_{{$order->id}}" data-discount="{{$order->discount ? ($order->price-$order->discount) :  0}}" data-price="{{$order->price}}" class="qt-plus amount_plus"><i class="fas fa-plus"></i></span>

                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="price"><span class="item_price_{{$order->id}}">{{$order->price*$order->product_order_amount}}</span> SAR</p>
                                                {{--                                                <p class="d-none discount_amount discount_target_{{$order->id}}">{{$order->discount ? ($order->price-$order->discount)*$order->amount :  0}}</p>--}}
                                            </td>
                                            <td>
                                                <button data-href="{{route('eyeStore.deleteProductFromCart', $order->id)}}" data-delete=".tr_{{$order->id}}" class="delete-btn delete_product_from_cart_button"><i class="far fa-trash-alt"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-8 mr-auto">
                                <div class="bill-summary">
                                    <div class="item">
                                        <h6 class="mb-0">الإجمالي</h6>
                                        <h5 class="dir-l"><span class="price_total">{{$netTotal}}</span> <small>SAR</small></h5>
                                    </div>
                                    <div class="item">
                                        <h6 class="mb-0">ضريبه القيمه المضافه</h6>
                                        <h5 class="dir-l"><span class="added_value">{{$addedValueAmount}}</span> <small>SAR</small></h5>
                                    </div>
                                    <div class="item total discount_total_container d-none">
                                        <h6 class="mb-0">الخصم </h6>
                                        <h5 class="dir-l"><span class="discount_total"></span> <small>SAR</small></h5>
                                    </div>
                                    <div class="item total">
                                        <h6 class="mb-0">المجموع </h6>
                                        <h5 class="dir-l"><span class="price_with_added_value">{{$total}}</span> <small>SAR</small></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="alert alert-info text-center text-danger font-weight-bold col-md-12">ليس لديك أي منتجات في السلة!
                        <p class="mt-2">اضغط <b><a href="{{route('eyeStore.index')}}">هنا</a></b> لتصفح منتجاتنا </p>
                    </div>
                @endif
            </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 deleteProductOrderConfirmMessage = "{{__('products.delete_product_order_confirm_message')}}",
            addedValue = "{{settings('added_value')}}",
            checkProductsPriceRoute = "{{route('eyeStore.checkProductsPrice')}}",
            checkCouponRoute = "{{route('eyeStore.checkCoupon')}}",
            payNowRoute = "{{route('eyeStore.payNow')}}",
            editAmountRoute = "{{route('eyeStore.editAmount')}}",
            price = $('.all_total').html();
            let noOrdersMessage = `
            <div class="alert alert-info text-center text-danger font-weight-bold col-md-12">ليس لديك أي منتجات في السلة!
                        <p class="mt-2">اضغط <b><a href="{{route('eyeStore.index')}}">هنا</a></b> لتصفح منتجاتنا </p>
                    </div>`;
    </script>
    <script src="{{asset('assets/web/js/eye_stores.carts.js')}}"></script>

    <script>
        $('.amount_minus, .amount_plus').click(async function () {

            let totalPrice =  $('.price_total'),
                itemPrice = $($(this).data('item-price')),
                itemQuantity = $($(this).data('item-quantity')),
                coupon = $('input[name="coupon"]').val();

            if ($(this).hasClass('amount_minus') && $($(this).data('item-quantity')).html() === '1'){
                return false;
            }

            let data = {
                    coupon: coupon === '' ? null : coupon,
                    order_id:$(this).data('product-order'),
                },
                url = editAmountRoute,
                method = 'get';

            $(this).hasClass('amount_minus') ? data.minus = true : data.plus = true;

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

            if (response.errors){
                toasterError(response.errors);
            }

            if (response.success){
                $($(this).data('item-quantity')).html(response.amount);
                itemPrice.html(response.item_price);
                itemQuantity.html(response.item_quantity);
                totalPrice.html(response.price);
                $('.added_value').html(response.added_value);
                $('.price_with_added_value').html(response.total);

                if (response.discount){
                    $('.discount_total_container, .last_total_container').removeClass('d-none');
                    $('.discount_total_container .discount_total').html(response.discount);
                    $('.last_total_container .last_total').html(response.last_total);
                } else {
                    $('.discount_total_container, .last_total_container').addClass('d-none');
                    $('.discount_total_container .discount_total').html('');
                    $('.last_total_container .last_total').html('');
                }

            }
        })
    </script>

@endsection