@extends('layouts.contentLayoutMaster')

@section('title', 'الدفعات')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}" />
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset('css/custom/children/paymentMethods.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.applications.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="payment-methods-page-wrapper">
    <div 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-per-click.svg') }}"
                  alt=""
                  srcset=""
                />
                <h2 class="header-text">طرق الدفع</h2>
              </div>
                <h3 class="text-info">المطلوب {{round($transaction_info['residual_amount'])}} ر.س</h3>
{{--              <h3 class="text-info">المطلوب {{round($transaction->residual_amount, 2)}} ر.س</h3>--}}
            </div>
          </div>
        </div>
      </div>

        <x-ui.divider>تفاصيل الدفعة</x-ui.divider>
        <div class="row mb-1">
            <div class="col-sm-12">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>قيمة الدفعة</th>
                            <th>المدفوع</th>
                            <th>قيمة الضرائب</th>
                            <th>خصومات الفترة</th>
                            <th>قبل الخصم</th>
                            <th class="text-success">إجمالي المطلوب سداده</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{round($transaction->amount_before_discount, 2)}} ر.س </td>
                            <td>{{round($transaction->paid_amount, 2)}} ر.س </td>
                            <td>{{round($transaction->vat_amount, 2)}} ر.س</td>
                            <td>
                                @if($transaction_info['is_fixed_discount'])
                                    {{round($transaction_info['period_discount'], 2)}} ر.س </td>
                                @else
                                    {{round($transaction_info['new_period_discount'], 2)}} ر.س </td>
                                @endif
                            <td>
                                @if($transaction_info['is_fixed_discount'])
                                    {{round($transaction->amount_before_discount, 2)}} ر.س </td>
                                @else
                                    {{round($transaction->residual_amount, 2)}} ر.س </td>
                                @endif

                            </td>
                            <td class="text-success">
                                <strong>{{round($transaction_info['residual_amount'])}} ر.س </strong>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        @include('parent.includes.coupon')

      <div class="row">
          <div class="responseErrorMessage alert mt-1 mb-1 rounded-0" role="alert" style="display: none">
              <div class="responseErrorMessageBody alert-body"></div>
          </div>
            <div class="col-12 mt-1">
                <div  class="openPayment" data-value="{{ round($transaction_info['residual_amount'], 2) . "," . $transaction->id }}" >
              <label for="select2Basic" class="form-label">طرق الدفع</label>
              <select
                id="select2Basic"
                class="select2 form-select activitySelector paymentGetaway"
                data-allow-clear="true">
                  <option value="-1" selected> -- اختر طريقة الدفع -- </option>
                  <option value="1" >دفع عن طريق بنك</option>
                  <option value="3">دفع اون لاين</option>
                  <option value="5">دفع بالمحفظة</option>

              </select>
            </div>
            <div class="col-12 mt-1 banks-col d-none">
              <label for="bank_id" class="form-label">البنوك</label>
              <select
                id="bank_id"
                class="select2 form-select "
                data-allow-clear="true">
                <option class="hidden_option" selected value="-1"> اختر البنك</option>
                  @foreach($banks as $bank)
                      <option value="{{$bank->id}}">{{$bank->bank_name}}</option>
                  @endforeach
              </select>
            </div>
                <div class="col-12 mt-1 wallets-col d-none">
                    <label for="payment_wallet_id" class="form-label">اختر المحفظة</label>
                    <select
                        id="payment_wallet_id"
                        class="select2 form-select "
                        data-allow-clear="true"
                    >
                        <option class="hidden_option" selected value="-1"> اختر المحفظة</option>
                        @foreach($wallets as $wallet)
                            <option value="{{$wallet->id}}" >{{$wallet->name.'('.round($wallet->balance/100,2).')'}}</option>
                        @endforeach
                    </select>
                </div>
              <div class="col-12 mt-2 file-col d-none" >
                  <div class="input-group">
                      <input type="file" class="form-control" accept="image/png, image/jpeg ,application/pdf" id="formFile" title="ايصال الدفع">
                  </div>

              </div>
              <div class="errorMessage alert alert-danger mb-1 rounded-0" role="alert" style="display: none">
              <div class="errorMessageBody alert-body"></div>
          </div>

{{--              <div class="col-12 mt-1 wdiscount-col ">--}}
{{--                  <label for="wallet_id" class="form-label">محفظة للخصم</label>--}}
{{--                  <select--}}
{{--                      name="wallet_id"--}}
{{--                      id="wallet_id"--}}
{{--                      class="select2 form-select wallet"--}}
{{--                      data-allow-clear="true"--}}
{{--                  >--}}
{{--                      <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="col-12 mt-2 walletDiscountDiv wdiscountval-col">
                  <div class="input-group">
                      <input type="number" min="1" class="form-control" id="wallet_discount" placeholder="ادخل قيمة خصم المحفظة" aria-label="Username" aria-describedby="basic-addon11" />
                  </div>
                  <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>
            <div class="col-12 mt-2 action-col d-none d-flex justify-content-center">
                <div class="col-6 col-md-3 ">
                    <button id="submit" class="btn btn-primary w-100 btn-submit customBtn">
                        <span class="btn-text secoundery-header centered">تاكيد الدفع</span>
                    </button>
{{--                    <x-inputs.submit type="button" id="submit" class="btn btn-primary w-100 btn-submit customBtn " data-bs-toggle="modal" data-bs-target="#modalToggle">--}}
{{--                        <span class="btn-text secoundery-header centered">تاكيد الدفع</span>--}}
{{--                    </x-inputs.submit>--}}
                </div>
            </div>

          <!-- Modal 1-->
        <div class="modal fade"  class="modalDialog1" id="modalToggle" aria-labelledby="modalToggleLabel" tabindex="-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <div class="loading-content-wrapper">
                    <img
                          src="{{ asset('assets/tick-circle.svg') }}"
                          alt=""
                          srcset=""
                          class="first-img"
                    />
                    <span class="text first-text"> يتم الان تاكيد الدفع </span>
                    <img
                          src="{{ asset('assets/tick-circle-done.svg') }}"
                          alt=""
                          srcset=""
                          class="secound-img d-none"
                    />
                    <span class="text secound-text d-none"> تم تاكيد الدفع </span>
                </div>
            </div>
            </div>
        </div>
        </div>

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

    @endsection

@section('vendor-script')
<!-- <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script> -->
@endsection

@section('page-script')
<script>
    $("document").ready(function () {
        // $("#submit").on('click', function () {
        //     setTimeout(() => {
        //         $(".first-img").addClass('d-none');
        //         $(".first-text").addClass('d-none');
        //         $(".secound-img").removeClass('d-none');
        //         $(".secound-text").removeClass('d-none');
        //     }, 3000)
        //
        // });

        $(".activitySelector").on('change', function () {
            if (this.value == "1") {
                $(".banks-col").removeClass('d-none');
                $(".text-col").removeClass('d-none');
                $(".file-col").removeClass('d-none');
                $(".action-col").removeClass('d-none');
                $(".wallets-col").addClass('d-none');
                $(".wdiscount-col").removeClass('d-none');
                $(".wdiscountval-col").removeClass('d-none');

            }
            if (this.value == "3") {
                $(".banks-col").addClass('d-none');
                $(".file-col").addClass('d-none');
                $(".text-col").removeClass('d-none');
                $(".action-col").removeClass('d-none');
                $(".wallets-col").addClass('d-none');
                $(".wdiscount-col").removeClass('d-none');
                $(".wdiscountval-col").removeClass('d-none');

            }
            if (this.value == "5") {
                $(".banks-col").addClass('d-none');
                $(".file-col").addClass('d-none');
                $(".text-col").removeClass('d-none');
                $(".action-col").removeClass('d-none');
                $(".wallets-col").removeClass('d-none');
                $("#wallet_id").val("-1");
                $("#wallet_discount").val("");
                $(".wdiscount-col").addClass('d-none');
                $(".wdiscountval-col").addClass('d-none');
            }

            if (this.value == "-1") {
                $(".banks-col").addClass('d-none');
                $(".file-col").addClass('d-none');
                $(".text-col").addClass('d-none');
                $(".action-col").addClass('d-none');
                $(".wallets-col").addClass('d-none');
                $(".wdiscount-col").addClass('d-none');
                $(".wdiscountval-col").addClass('d-none');

            }

        });


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

        const button = $("#submit");
        button.prop("disabled", false);
        button.on("click", function() {
            button.prop("disabled", true);
        });

        var payment_amount = '';
        var trans_id = '';

        $(".bankFile").css("display","none");
        $(".walletDiscountDiv").css("display","none");

        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 if(this.value == 5){
                $(".customBtn").attr("disabled", false);
                $(".bankFile").css("display","none");
            }else{
                $(".bankFile").css("display","none");
            }
            paymentGetaway = this.value;
        });
        var bankId = null;
        $("#bank_id").on('change', function() {
            if(this.value != -1){
                bankId = this.value;
            }else {
                bankId = null;
            }
        });
        var payment_wallet_id = null;
        $("#payment_wallet_id").on('change', function() {
            if(this.value != -1){
                payment_wallet_id = this.value;
            }else {
                payment_wallet_id = null;
            }
        });

        $(".customBtn").on('click', function() {
            payment_amount = $(".openPayment").attr('data-value').split(",")[0];
            trans_id = $(".openPayment").attr('data-value').split(",")[1];
            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];
                $(".customBtn").attr("disabled", false);
            }else if(paymentGetaway == 1 && (!bankId || $('#formFile').prop('files').length == 0)){
                $(".errorMessage").css("display","block");
                $('.errorMessageBody').text("يرجي ادحال البنك ورفع الملف");
                payment_amount = $(".openPayment").value.split(",")[0];
                $(".customBtn").attr("disabled", false);
            }else if(paymentGetaway == 5 && !payment_wallet_id){
                $(".errorMessage").css("display","block");
                $('.errorMessageBody').text("يرجي اختيار محفظة الخصم");
                payment_amount = $(".openPayment").value.split(",")[0];
                $(".customBtn").attr("disabled", false);
            }else if(paymentGetaway == 5){
                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,--}}
                {{--    "application": {{$application->id}},--}}
                {{--    "transaction": trans_id--}}
                {{--});--}}
                {{--formData.append('data', JSON.stringify(objArr));--}}
                {{--console.log("request data is "+ objArr);--}}
                {{--$(".customBtn").attr("disabled", true);--}}
                {{--$.ajax({--}}
                {{--    url: "{{route('parent.applicationTransactionPaymentAttempt')}}",--}}
                {{--    method: 'POST',--}}
                {{--    data : formData,--}}

                // formData.append('receipt', $('#formFile').prop('files')[0]);
                formData.append('payment_wallet_id', payment_wallet_id);
                formData.append('requested_ammount', payment_amount);
                formData.append('method_id', paymentGetaway);
                // formData.append('bank_id', bankId);
                formData.append('coupon', coupon);
                formData.append('coupon_value', coupon_value);
                formData.append('wallet_id', wallet_id);
                formData.append('wallet_discount', wallet_discount);
                formData.append('application', {{$application->id}});
                formData.append('transaction', trans_id);
                // console.log("request data is "+ objArr);
                $(".customBtn").attr("disabled", true);
                showLoader()
                $.ajax({
                    url: "/parent/application/" + {{$application->id}} + "/transaction/" + trans_id,
                    method: 'POST',
                    data : formData,
                    contentType: false,
                    processData: false,
                    cache : false,
                    async : true,
                    success: function (response){
                        $(".responseErrorMessage").css("display","block");
                        $('.responseErrorMessageBody').text(response.message);
                        if(response.code == 200){
                            $(".responseErrorMessage").removeClass("alert-danger");
                            $(".responseErrorMessage").addClass("alert-success");
                            $(".customBtn").attr("disabled", false);
                            setTimeout(
                                window.location.href = "/parent/applicationTransaction?application=" + {{$application->id}}
                                ,2000);
                        }else if (response.code == 401){
                            $(".couponErrorMessage").css("display","block");
                            $('.couponErrorMessageBody').text("قسيمة غير صالحة");
                            $(".customBtn").attr("disabled", false);
                        }else if (response.code == 400 || response.code == 422){
                            $(".responseErrorMessage").css("display","block");
                            $(".responseErrorMessage").addClass("alert-danger");
                            $(".responseErrorMessage").removeClass("alert-success");
                            $('.responseErrorMessageBody').text(response.message);
                            $(".walletErrorMessage").css("display","block");
                            $('.walletErrorMessageBody').text(response.message);
                            $(".customBtn").attr("disabled", false);
                        }
                        else{
                            $(".responseErrorMessage").removeClass("alert-danger");
                            $(".responseErrorMessage").addClass("alert-success");

                            $(".customBtn").attr("disabled", false);
                            setTimeout(
                                {{--window.location.href = "{{ route('parent.showChildrens') }}"--}}
                                    {{--window.location.href = "{{ route('parent.contractTransaction', ['student_id' => $contract->student_id, 'contract_id' => $contract->id]) }}"--}}
                                    window.location.href = "/parent/applicationTransaction?application=" + {{$application->id}}
                                ,2000);
                        }

                    }
                }).fail(function (xhr, textStatus, errorThrown) {
                    hideLoader()
                    $(".responseErrorMessage").css("display","block");
                    $(".responseErrorMessage").addClass("alert-danger");
                    $(".responseErrorMessage").removeClass("alert-success");
                    $('.responseErrorMessageBody').text(xhr.responseJSON.messages);
                });
            }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,--}}
                {{--    "application": {{$application->id}},--}}
                {{--    "transaction": trans_id--}}
                {{--});--}}
                {{--formData.append('data', JSON.stringify(objArr));--}}
                {{--console.log("request data is "+ objArr);--}}
                {{--$(".customBtn").attr("disabled", true);--}}
                {{--$.ajax({--}}
                {{--    url: "{{route('parent.applicationTransactionPaymentAttempt')}}",--}}
                {{--    method: 'POST',--}}
                {{--    data : formData,--}}

                formData.append('receipt', $('#formFile').prop('files')[0]);
                formData.append('requested_ammount', payment_amount);
                formData.append('method_id', paymentGetaway);
                formData.append('bank_id', bankId);
                formData.append('coupon', coupon);
                formData.append('coupon_value', coupon_value);
                formData.append('wallet_id', wallet_id);
                formData.append('wallet_discount', wallet_discount);
                formData.append('application', {{$application->id}});
                formData.append('transaction', trans_id);
                // console.log("request data is "+ objArr);
                $(".customBtn").attr("disabled", true);
                showLoader()
                $.ajax({
                    {{--url: "{{route('parent.transferRequestTransactionPaymentAttempt')}}",--}}
                    url: "/parent/application/" + {{$application->id}} + "/transaction/" + trans_id,
                    method: 'POST',
                    data : formData,
                    contentType: false,
                    processData: false,
                    cache : false,
                    async : true,
                    success: function (response){
                        $(".responseErrorMessage").css("display","block");
                        $('.responseErrorMessageBody').text(response.message);
                        if(response.code == 200){
                            $(".responseErrorMessage").removeClass("alert-danger");
                            $(".responseErrorMessage").addClass("alert-success");
                                    $(".customBtn").attr("disabled", false);
                            setTimeout(
                                    window.location.href = "/parent/applicationTransaction?application=" + {{$application->id}}
                                ,2000);
                        }else if (response.code == 401){
                            $(".couponErrorMessage").css("display","block");
                            $('.couponErrorMessageBody').text("قسيمة غير صالحة");
                            $(".customBtn").attr("disabled", false);
                        }else if (response.code == 400 || response.code == 422){
                            $(".responseErrorMessage").css("display","block");
                            $(".responseErrorMessage").addClass("alert-danger");
                            $(".responseErrorMessage").removeClass("alert-success");
                            $('.responseErrorMessageBody').text(response.message);
                            $(".walletErrorMessage").css("display","block");
                            $('.walletErrorMessageBody').text(response.message);
                            $(".customBtn").attr("disabled", false);
                        }
                        else{
                            $(".responseErrorMessage").removeClass("alert-danger");
                            $(".responseErrorMessage").addClass("alert-success");

                            $(".customBtn").attr("disabled", false);
                            setTimeout(
                                {{--window.location.href = "{{ route('parent.showChildrens') }}"--}}
                            {{--window.location.href = "{{ route('parent.contractTransaction', ['student_id' => $contract->student_id, 'contract_id' => $contract->id]) }}"--}}
                            window.location.href = "/parent/applicationTransaction?application=" + {{$application->id}}
                                ,2000);
                        }

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

            }

        });
    });

    const button = $("#submit");
    button.prop("disabled", false);
    button.on("click", function() {
        button.prop("disabled", true);
    });


</script>
@endsection