@extends('layouts.contentLayoutMaster')

@php
    $breadcrumbs = [[['link' => route('parent.transfers.index'), 'name' => 'طلبات التجديد'],['link' => route('parent.transferRequestTransaction',["application_id" => $application->id]), 'name' => $application->student_name],['link' => route('parent.transferRequestTransaction',["application_id" => $application->id]), 'name' => 'تعاقد '.$application->year_name]],['title'=> 'دفعات التعاقد رقم #'. $application->id]];
@endphp

@section('title', 'دفعات تجديد التعاقد رقم #'. $application->id)

@section('page-style')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('css/custom/children/payments.css') }}">
@endsection

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">الدفعات المطلوبة</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{url('parent/parent_dashboard')}}"> الرئيسية</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{route('parent.transfers.index')}}"> طلبات التجديد</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#"> {{$application->id}}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span>دفعات طلب التجديد</span>
                            </li>

                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="page">
        <div class="payments-page-wrapper">
            <div id="paymentsCard" class="top-card-wrapper card">
                <div class="row header">
                    <div class="col-12">
                        <div class="header-wrapper">
                            <div class="top-header-wrapper">

                                <div class="icon-text-wrapper">
                                    <img src="{{ asset('assets/pay.svg') }}" alt="" srcset="">
                                    <h2 class="header-text">دفعات طلب التجديد</h2>
                                </div>
                            </div>
                            <h3 class="text-info mt-1">دفعات</h3>
                            <h3 class="text-lead">عدد الدفعات اللازمه..{{count($transactions)}}</h3>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th> القسط</th>
                                    <th>الاساسي</th>
                                    <th>الضرائب</th>
                                    <th>خ.فترة</th>
                                    <th>خ.قسيمة</th>
                                    <th>الأجمالي</th>
                                    <th>المدفوع</th>
                                    <th>المتبقي</th>
                                    <th>تاريخ الدفع</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($transactions as $key => $transaction)
                                    <tr>
                                    <td>
                                        @if(!$transaction->payment_status)
                                            <a class="payAction openPayment " value="{{ round($transaction->residual_amount, 2) . "," . $transaction->id }}" href="{{ route('parent.showTransferRequestTransactionPaymentAttempt',$transaction->id) }}">ادفع</a>
                                        @endif
                                    </td>
                                        <td>{{ $transaction->installment_name }}</td>
                                        <td>{{ round($transaction->amount_before_discount, 2) }} ر.س</td>
                                        <td>{{ round($transaction->vat_amount,2) }}</td>
                                        <td>{{ round($transaction->period_discount,2) }} </td>
                                        <td>{{ round($transaction->coupon_discount,2) }} </td>
                                        <td>{{ round($transaction->amount_after_discount + $transaction->vat_amount, 2) }} ر.س</td>
                                        <td>{{ round($transaction->paid_amount, 2) }} ر.س</td>
                                        <td>{{ round($transaction->residual_amount, 2) }} ر.س</td>
                                        <td>{{ $transaction->payment_status && $transaction->payment_date ? 'تم الدفع' . $transaction->payment_date : 'يجب الدفع قبل' . $transaction->payment_due  }} </td>
                                </tr>
                                @endforeach

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

                    </div>
                </div>
            </div>

        </div>
    </div>


    <!-- Striped rows start -->
    <div class="row match-height">
        <div class="responseErrorMessage alert mb-1 rounded-0" role="alert" style="display: none">
            <div class="responseErrorMessageBody alert-body"></div>
        </div>

            <div id="openModal1" class="modalDialog1">
                <div  class="overlay">
                    <a href="" title="Close" class="close1">X</a>
                    <div class="modal-head1">
                        <div class="modal-header1">
                            <h2 class="modal-title1" id="purchaseLabel">اجراءت الدفع</h2>
                        </div>
                        <div class="modal-body1">
                            <div class="middle-section1">
                                <form class="form-control" id="otpVerification" method="POST" class="mt-5">
                                    <div class="mb-3">
                                        <select style="direction: rtl;"  class="paymentGetaway form-select" aria-label="Default select example">
                                            <option value="-1" selected> -- اختر طريقة الدفع -- </option>
                                            <option value="1" >دفع عن طريق بنك</option>
                                            <option value="3">دفع اون لاين</option>
                                        </select>
                                    </div>

                                    <div class="bankFile mb-3" style="direction: rtl">
                                        <div class="mb-3" class="">
                                            <x-inputs.select.generic select2="" name="bank_id" label="البنك" :options="['-1' => 'اختر البنك'] + GetBanks()" />
                                        </div>
                                        <div class="mb-3 uploadFile">
                                            <label for="formFile" class="form-label">صوره الايصال</label>
                                            <input required class="form-control" style="width: 74%;" type="file" accept="image/png, image/jpeg ,application/pdf" id="formFile">
                                        </div>
                                        <div class="errorMessage alert alert-danger mb-1 rounded-0" role="alert" style="display: none">
                                            <div class="errorMessageBody alert-body"></div>
                                        </div>
                                    </div>

{{--                                    <div class="mb-3">--}}
{{--                                        <select style="direction: rtl;"  name="wallet_id" class="form-select wallet" aria-label="Default select example">--}}
{{--                                            <option value="-1" selected> -- اختر محفظة للخصم ان وجد-- </option>--}}
{{--                                            @foreach($wallets as $wallet)--}}
{{--                                            <option value="{{$wallet->id}}" >{{$wallet->name.'('.round($wallet->balance/100,2).')'}}</option>--}}
{{--                                            @endforeach--}}
{{--                                        </select>--}}
{{--                                    </div>--}}
                                    <div class="mb-3 walletDiscountDiv" style="direction: rtl">
                                        <label class="form-label">قيمة خصم المحفظة</label>
                                        <input type="number" min="1"  class="form-control" style="width: 74%;"  id="wallet_discount" placeholder="ادخل قيمة الخصم">
                                        <div class="walletErrorMessage alert alert-danger mb-1 rounded-0" role="alert" style="display: none; margin-top: 10px;">
                                            <div class="walletErrorMessageBody alert-body"></div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                            <hr class="mt-2">
                            <button class='btn btn-primary btn-block w-50 customBtn'>تاكيد</button>
                        </div>
                    </div>
                </div>
                <div class="modal-backdrop1"></div>
            </div>

    </div>

    <x-ui.SideDeletePopUp />

    <!-- Striped rows end -->
@endsection

@section('page-script')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        });

        var payment_amount = '';
        var trans_id = '';
        $(".openPayment").click(function () {
            payment_amount = this.value.split(",")[0];
            trans_id = this.value.split(",")[1];
            $(".modalDialog1").css("display","block");
        });
        $(".close1").on('click',function(){
            $(".modalDialog1").css("display","none");
        });
        $(".modal-backdrop1").click(function () {
            $(".modalDialog1").css("display","none");
        });

        $(".bankFile").css("display","none");
        $(".walletDiscountDiv").css("display","none");
        $(".customBtn").attr("disabled", true);
        var wallet_id = null;
        var wallet_discount = null;
        $('.wallet').on('change', function() {
            if(this.value != '-1'){
                $(".walletDiscountDiv").css("display","block");
            }else{
                $("#wallet_discount").val('');
                $(".walletDiscountDiv").css("display","none");
            }
            wallet_id = this.value == '-1' ? null:this.value;
        });
        var paymentGetaway = '';
        $('.paymentGetaway').on('change', function() {
            if(this.value == 1){
                $(".customBtn").attr("disabled", false);
                $(".bankFile").css("display","inline-block");
            }else if(this.value == 3){
                $(".customBtn").attr("disabled", false);
                $(".bankFile").css("display","none");
            }else{
                $(".bankFile").css("display","none");
                $(".customBtn").attr("disabled", true);
            }
            paymentGetaway = this.value;
        });
        var bankId = null;
        $("#bank_id").on('change', function() {
            if(this.value != -1){
                bankId = this.value;
            }else {
                bankId = null;
            }
        });

        $(".customBtn").on('click', function() {

            var regExp = new RegExp("^[A-Za-z0-9_-]{1,20}$");
            var couponStatus = regExp.test($("#coupon").val());
            var coupon = null;
            var coupon_value = null;
            wallet_discount = $("#wallet_discount").val();
            if (couponStatus) {
                coupon = $("#coupon").val();
                coupon_value = $("#coupon_value").val();
            }

            if (wallet_id != null && (wallet_discount == null || wallet_discount == '')) {
                $(".walletErrorMessage").css("display", "block");
                $('.walletErrorMessageBody').text("يرجي ادحال قيمة الخصم من المحفظة");
                payment_amount = $(".openPayment").value.split(",")[0];

        }else if(paymentGetaway == 1 && (!bankId || $('#formFile').prop('files').length == 0)){
                $(".errorMessage").css("display","block");
                $('.errorMessageBody').text("يرجي ادحال البنك ورفع الملف");
                payment_amount = $(".openPayment").value.split(",")[0];
            }else if(paymentGetaway == 1){
                if (wallet_id != null && wallet_discount != null && wallet_discount != '') {
                    payment_amount = payment_amount - wallet_discount;
                    console.log("payment_amount is " + payment_amount);
                } else {
                    wallet_id = null;
                }
                $(".errorMessage").css("display","none");
                var formData = new FormData();
                formData.append('receipt', $('#formFile').prop('files')[0]);
                var objArr = [];

                objArr.push({
                    "requested_ammount": payment_amount,
                    "method_id": paymentGetaway,
                    "receipt": $('#formFile').prop('files')[0],
                    "bank_id": bankId,
                    "coupon": coupon,
                    "coupon_value": coupon_value,
                    "wallet_id": wallet_id,
                    "wallet_discount": wallet_discount,
                    "student": {{$application->student_id}},
                    "contract": {{$application->id}},
                    "transaction": trans_id
                });
                formData.append('data', JSON.stringify(objArr));
                console.log("request data is "+ objArr);
                $.ajax({
                    url: "{{route('parent.applicationTransactionPaymentAttempt')}}",
                    method: 'POST',
                    data : formData,
                    contentType: false,
                    processData: false,
                    cache : false,
                    async : false,
                    success: function (response){
                        $(".responseErrorMessage").css("display","block");
                        $('.responseErrorMessageBody').text(response.message);
                        if(response.code == 200){
                            $(".responseErrorMessage").addClass("alert-success");
                            $(".modalDialog1").css("display","none");
                            location.reload();
                        }else if (response.code == 401){
                            $(".couponErrorMessage").css("display","block");
                            $('.couponErrorMessageBody').text("قسيمة غير صالحة");
                        }else if (response.code == 400 && response.type == 'wallet'){
                            $(".responseErrorMessage").css("display","block");
                            $(".responseErrorMessage").addClass("alert-danger");
                            $(".responseErrorMessage").removeClass("alert-success");
                            $('.responseErrorMessageBody').text(response.message);
                            $(".walletErrorMessage").css("display","block");
                            $('.walletErrorMessageBody').text(response.message);
                        }
                        else{
                            $(".responseErrorMessage").addClass("alert-danger");
                            $(".modalDialog1").css("display","none");
                            location.reload();
                        }

                    }
                });
            }else if(paymentGetaway ==3){
                if (wallet_id != null && wallet_discount != null && wallet_discount != '') {
                    payment_amount = payment_amount - wallet_discount;
                } else {
                    wallet_id = null;
                }
                $.ajax({
                    url: "student/" + {{$application->student_id}} + "/transaction/" + trans_id,
                    method: 'POST',
                    data: {
                        "requested_ammount": payment_amount,
                        "method_id": paymentGetaway,
                        "receipt": null,
                        "bank_id": null,
                        "coupon": coupon,
                        "wallet_id": wallet_id,
                        "wallet_discount": wallet_discount,
                        "student": {{$application->student_id}},
                        "contract": {{$application->id}},
                        "transaction": trans_id
                    },
                    success: function (response){
                        if(response.url){
                            if(coupon != null && response.params.amount / 100 == payment_amount){
                                $(".couponErrorMessage").css("display","block");
                                $('.couponErrorMessageBody').text("قسيمة غير صالحة");
                            }else{
                                $.ajax({
                                    url: '{{ route('parent.sendPayfortRequest') }}',
                                    method: 'POST',
                                    dataType: "html",
                                    data: {
                                        "path": response.url,
                                        "params": response.params
                                    },
                                    success: function (response){
                                        document.write(response);
                                    }
                                });
                            }
                        }
                    }
                });

            }
        });


    </script>
@endsection