@extends('layouts.simpleLayoutMaster')

@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/renewalRequests/addNewRequest.css') }}">
@endsection

@section('breadcrumb')
<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="#"> الرئيسية</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#"> طلبات التجديد</a>
            </li>
            <li class="breadcrumb-item">
              <span> تسجيل تجديد</span>
            </li>

          </ol>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('content')
<div class="page">
  <div class="addRequest-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/add-file.svg') }}"
                  alt=""
                  srcset=""
                />
                <h2 class="header-text">تسجيل طلب تجديد</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-9 form-wrapper">
          <form class="row" method="POST" action="#">
            <div class="col-12 mt-1">
              <x-inputs.text.Input
                label="اسم الطالب"
                name="#"
                placeholder="الطالب"
              />
            </div>
            <div class="col-12 mt-1">
              <label for="paymentPlansMaster" class="form-label"
                >خطط سداد الرسوم الدراسيه
              </label>
              <select
                id="paymentPlansMaster"
                class="select2 form-select paymentPlansMaster"
                data-allow-clear="true"
              >
                <option class="hidden_option" selected disabled>
                  اختر خطة السداد
                </option>
                <option>سداد كامل</option>
                <option>سداد تقسيط</option>
                <option>سداد فصلي</option>
              </select>
            </div>
            <div class="col-12 form-check mt-1 check-box">
              <label for="transportationFlag" class="form-check-label">
                <input
                  id="transportationFlag"
                  class="form-check-input"
                  type="checkbox"
                  value=""
                />
                الاشتراك في خدمة النقل
              </label>
            </div>
            <!-- خطط النقل -->
            <div
              id="transportationPlansTitle"
              class="transportationFlag d-none col-12 d-flex justify-content-center mt-3"
            >
              <span class="title-form-center">خطط النقل</span>
            </div>
            <div
              id="transportationServiceSelector"
              class="transportationFlag d-none col-12 mt-1"
            >
              <label for="transportationService" class="form-label"
                >خدمة النقل</label
              >
              <select
                id="transportationService"
                class="select2 form-select"
                data-allow-clear="true"
              >
                <option class="hidden_option" selected disabled>
                  خدمة النقل
                </option>
                <option value="#">ذهاب فقط</option>
                <option value="#">عودة فقط</option>
                <option value="#">ذهاب و عودة</option>
                <option value="#">نصف سنة ذهاب و عودة</option>
                <option value="#">نصف سنة مسار واحد</option>
              </select>
            </div>
            <div
              id="paymentWaySelector"
              class="transportationFlag d-none col-12 mt-1"
            >
              <label for="paymentWay" class="form-label">طريقة السداد </label>
              <select
                id="paymentWay"
                class="select2 form-select"
                data-allow-clear="true"
              >
                <option class="hidden_option" selected disabled>
                  طريقة السداد
                </option>
                <option value="#">سنوي</option>
                <option value="#">فصلي</option>
                <option value="#">شهري</option>
              </select>
            </div>
            <!-- خطط سداد المديونيات -->
            <!-- transportationFlag item -->
            <div
            id="paymentPlansTitle"
            class="transportationFlag d-none col-12 d-flex justify-content-center mt-3"
            >
            <span class="title-form-center">خطط سداد المديونيات</span>
        </div>
        <!-- transportationFlag item -->
            <div
              id="paymentPlansSelector"
              class="transportationFlag d-none col-12 mt-1"
            >
              <label for="paymentPlans" class="form-label">حد الدفع</label>
              <select
                id="paymentPlans"
                class="select2 form-select"
                data-allow-clear="true"
              >
                <option class="hidden_option" selected disabled>
                  حد الدفع
                </option>
                <option value="#">الحد الادني</option>
                <option value="#">المديونية كاملة</option>
                <option id="moneyAmount" value="#">مبلغ محدد</option>
              </select>
            </div>
            <div id="moneyAmountInput" class="d-none col-12 mt-1">
              <label for="target" class="form-label">المبلغ</label>
              <input
                id="target"
                class="form-control"
                placeholder="المبلغ"
                required=""
                name="#"
                type="text"
                value="1400"
              />
              <div id="validationServer03Feedback" class="valid-feedback">
                عفوا المبلغ يجب الا يقل عن قيمة الحد الادني.
              </div>
            </div>
            <!-- وسائل الدفع -->
            <div class="col-12 d-flex justify-content-center mt-3">
              <span class="title-form-center">وسائل الدفع</span>
            </div>
            <div class="col-12 mt-1">
              <label for="paymentMethods" class="form-label">وسائل الدفع</label>
              <select
                id="paymentMethods"
                class="select2 form-select activitySelector"
                data-allow-clear="true"
              >
                <option class="hidden_option" selected disabled>
                  وسائل الدفع
                </option>
                <option value="BankSelected">تحويل بنكي</option>
                <option value="#">دفع بالمدرسة</option>
                <option value="OnlineSelected">دفع اونلاين</option>
              </select>
            </div>
            <!-- transportationFlag item -->
            <div class="transportationFlag d-none col-12 mt-1 banks-col">
              <label for="banksSelector" class="form-label">البنك</label>
              <select
                id="banksSelector"
                class="select2 form-select"
                data-allow-clear="true"
              >
                <option class="hidden_option" selected disabled>
                  اختر بنك
                </option>
                <option
                  id="390608010086203"
                  text="بنك الراجحي"
                  value="بنك الراجحي (390608010086203)"
                >
                  بنك الراجحي (390608010086203)
                </option>
                <option
                  id="73004350001"
                  text="بنك ساب"
                  value="بنك ساب (73004350001)"
                >
                  بنك ساب (73004350001)
                </option>
                <option
                  id="2435294000104"
                  text="بنك الاهلي"
                  value="بنك الاهلي (2435294000104)"
                >
                  بنك الاهلي (2435294000104)
                </option>
              </select>
            </div>
            <div class="col-6 mt-1 bankNameWrapper d-none">
              <label for="bankName" class="form-label">اسم البنك</label>
              <input
                type="text"
                class="form-control"
                id="bankName"
                placeholder="اسم البنك"
                aria-describedby="defaultFormControlHelp"
              />
            </div>
            <div class="col-6 mt-1 accountBankNumberWrapper d-none">
              <label for="accountBankNumber" class="form-label"
                >رقم حساب البنك</label
              >
              <input
                type="text"
                class="form-control"
                id="accountBankNumber"
                placeholder="رقم حساب البنك"
                aria-describedby="defaultFormControlHelp"
              />
            </div>
            <!-- transportationFlag item -->
            <div class="transportationFlag d-none col-12 mt-2 file-col">
              <div class="input-group">
                <input
                  type="file"
                  class="form-control"
                  id="inputGroupFile02"
                  title="ايصال الدفع"
                />
              </div>
            </div>
            <!-- transportationFlag item -->
            <div
              class="transportationFlag d-none col-12 mt-2 action-col d-flex justify-content-center"
            >
              <div class="col-6 col-md-3">
                <x-inputs.submit
                  type="button"
                  id="submit"
                  class="btn btn-primary w-100 btn-submit"
                  data-bs-toggle="modal"
                  data-bs-target="#modalToggle"
                >
                  <span class="btn-text secoundery-header centered"
                    >تاكيد
                  </span>
                </x-inputs.submit>
              </div>
            </div>
          </form>
        </div>

        <div class="col info-wrapper">
          <h2 class="info-title">عرض التفاصيل</h2>
          <span class="info-lead">مديونيات سابقه</span>
          <div class="money-info">
            <span>مديونيات سابقه</span>
            <span>14000 ر.س</span>
          </div>
          <div class="money-info">
            <span>الحد الادني</span>
            <span>1400 ر.س</span>
          </div>
          <!-- transportationFlag item -->
          <span class="transportationFlag d-none info-lead"
            >رسوم السنه القادمه</span
          >
          <!-- transportationFlag item -->
          <div class="transportationFlag d-none money-info">
            <span>رسوم اساسيه</span>
            <span>9701 ر.س</span>
          </div>
          <!-- transportationFlag item -->
          <div class="transportationFlag d-none money-info">
            <span>قيمة الضريبه </span>
            <span>500 ر.س</span>
          </div>
          <!-- transportationFlag item -->
          <span class="transportationFlag d-none info-lead"
            >اجمالي الرسوم المستحقه + المديونات</span
          >
          <!-- transportationFlag item -->
          <div class="transportationFlag d-none money-info">
            <span>المبلغ المطلوب</span>
            <span>25201 ر.س</span>
          </div>
        </div>

        <!-- Modal 1-->
        <div
          class="modal fade"
          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 () {


        $("#transportationFlag").on('change', function () {
            $(".transportationFlag").toggleClass('d-none');
        });

        $("#paymentPlans").on('change', function () {
            let opId  = $(this).children(":selected").attr("id");
            if (opId == "moneyAmount") {
                $("#moneyAmountInput").removeClass('d-none');
            }

        });

        // validation  moneyAmount:isValidFloat & value> minAmount
        const myTextbox = document.getElementById("target");
        myTextbox.addEventListener("keypress", isValidFloat, false);

        function isValidFloat(e) {
            let keyCode = e.keyCode ? e.keyCode : e.which;
            if (
            ((keyCode < 48 || keyCode > 57) &&
                (keyCode !== 46 || myTextbox.value.toString().indexOf(".") != -1)) ||
            (keyCode == 46 && myTextbox.value.toString().indexOf(".") != -1)
            ) {
            // 46 is dot
            e.preventDefault();
            }
        }

        $(".activitySelector").on('change', function () {
            if (this.value == "BankSelected") {
                $(".banks-col").removeClass('d-none');
                $(".file-col").removeClass('d-none');
                $(".action-col").removeClass('d-none');

                $(".bankNameWrapper").removeClass('d-none');
                $(".accountBankNumberWrapper").removeClass('d-none');
            }
            if (this.value == "OnlineSelected") {
                $(".banks-col").addClass('d-none');
                $(".bankNameWrapper").addClass('d-none');
                $(".accountBankNumberWrapper").addClass('d-none');
                $(".file-col").removeClass('d-none');
                $(".action-col").removeClass('d-none');

            }

        });

        $("#banksSelector").on('change', function () {
            let bankName = $(this).children(":selected").attr("text");
            let accountNum = $(this).children(":selected").attr("id");

            $("#bankName").val(bankName);
            $("#accountBankNumber").val(accountNum);

        });



        $("#submit").on('click', function () {
            if (! $( "#moneyAmountInput" ).hasClass( "d-none" )) {

                var moneyInput = document.getElementById("target");
                if (moneyInput.value < 1400) {
                    $("#target").addClass('is-invalid');
                    $("#validationServer03Feedback").removeClass('valid-feedback');
                    $("#validationServer03Feedback").addClass('invalid-feedback');
                } else {

                    setTimeout(() => {
                        $(".first-img").addClass('d-none');
                        $(".first-text").addClass('d-none');
                        $(".secound-img").removeClass('d-none');
                        $(".secound-text").removeClass('d-none');
                    }, 3000)
                }

            } else {
                setTimeout(() => {
                    $(".first-img").addClass('d-none');
                    $(".first-text").addClass('d-none');
                    $(".secound-img").removeClass('d-none');
                    $(".secound-text").removeClass('d-none');
                }, 3000)

}

        });



    });
</script>
@endsection