@extends('layouts.contentLayoutMaster')

@php
    $breadcrumbs = [[['link' => route('parent.showChildrens'), 'name' => 'الابناء'],['link' => route('parent.contractTransaction',["student_id" => $contract->student_id, "contract_id" => $contract->id]), 'name' => $contract->student_name],['link' => route('parent.contractTransaction',["student_id" => $contract->student_id, "contract_id" => $contract->id]), 'name' => 'تعاقد '.$contract->year_name]],['title'=> 'دفعات التعاقد رقم #'. $contract->id]];
@endphp

@section('title', 'دفعات التعاقد رقم #'. $contract->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.showChildrens')}}"> الابناء</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{route('parent.showChildrens')}}">{{$contract->student_name}}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#"> {{$contract->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>
                                <h3 class="text-info">الاجمالي {{$contract->total_fees}} ر.س</h3>
                            </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  && !in_array($transaction->transactionable->status,[\App\Models\Contract::FINISHED,\App\Models\Contract::CANCELLED]))
                                            <a class="payAction openPayment" value="{{ round($transaction->residual_amount, 2) . "," . $transaction->id }}" href="{{ route('parent.showTransactionPaymentAttempt',$transaction->id) }}">ادفع</a>
                                        @endif
                                        <x-inputs.btn.view :route="route('parent.transactions.attempts.index',['student' => request()->student,'contract' => request()->contract,'transaction' => $transaction->id])" />

                                            {{--                                        @if(!$transaction->payment_status)--}}
{{--                                            <div class="d-flex justify-content-center align-items-center">--}}
{{--                                                --}}{{--                            <a href=" {{ route('parent.transactionPaymentAttempt', ['student' => $contract->student_id, 'contract' => $contract, 'transaction' => $transaction]) }}">--}}
{{--                                                <button type="button" class="openPayment btn btn-primary mb-1" value="{{ round($transaction->residual_amount, 2) . "," . $transaction->id }}">الدفع</button>--}}
{{--                                                --}}{{--                            </a>--}}
{{--                                            </div>--}}
{{--                                        @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" style="direction: rtl">
                                        <label class="form-label">كود الخصم</label>
                                        <input class="form-control" style="width: 74%;" id="coupon" type="text" placeholder="ادخل كود الخصم">
                                        <div class="couponErrorMessage alert alert-danger mb-1 rounded-0" role="alert" style="display: none; margin-top: 10px;">
                                            <div class="couponErrorMessageBody 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;
            wallet_discount = $("#wallet_discount").val();
            if (couponStatus) {
                coupon = $("#coupon").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,--}}
                {{--    "wallet_id": wallet_id,--}}
                {{--    "wallet_discount": wallet_discount,--}}
                {{--    "student": {{$contract->student_id}},--}}
                {{--    "contract": {{$contract->id}},--}}
                {{--    "transaction": trans_id--}}
                {{--});--}}
                {{--formData.append('data', JSON.stringify(objArr));--}}
                {{--console.log("request data is "+ objArr);--}}
                $.ajax({
                    url: "{{route('parent.transactionPaymentAttempt')}}",
                    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/" + {{$contract->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": {{$contract->student_id}},
                        "contract": {{$contract->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