@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/editRequestsUnderReview.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">
                <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="editRequest-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/edit2.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="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>
              <div class="col-12 mt-1">
                <x-inputs.text.Input
                  label="المبلغ المتبقي"
                  name="#"
                  placeholder="المبلغ المتبقي"
                />
              </div>
              <div class="col-12 mt-1 banks-col d-none">
                <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 bankNameWrapper d-none">
                <label for="accountBankNumber" class="form-label"
                  >رقم حساب البنك</label
                >
                <input
                  type="text"
                  class="form-control"
                  id="accountBankNumber"
                  placeholder="رقم حساب البنك"
                  aria-describedby="defaultFormControlHelp"
                />
              </div>
              <div class="col-12 mt-2 file-col d-none">
                <div class="input-group">
                  <input
                    type="file"
                    class="form-control"
                    id="inputGroupFile02"
                    title="ايصال الدفع"
                  />
                </div>
              </div>
              <div
                class="col-12 mt-2 action-col d-none 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>
          <div class="money-info success">
            <span>المبلغ المدفوع</span>
            <span>13000 ر.س</span>
          </div>
          <div class="money-info error">
            <span>المبلغ المتبقي</span>
            <span>1000 ر.س</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 () {
        $("#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 == "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);

        });



    });
</script>
@endsection