@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/children/paymentMethods.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">
              <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="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">الاجمالي 1100 ر.س</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="row">

          <form class="" method="POST" action="#">
            <div class="col-12 mt-1">
              <label for="select2Basic" class="form-label">طرق الدفع</label>
              <select
                id="select2Basic"
                class="select2 form-select activitySelector"
                data-allow-clear="true"

              >
                <option class="hidden_option" selected disabled>
                  طرق الدفع
                </option>
                <option value="BankSelected">دفع البنك</option>
                <option value="OnlineSelected">دفع اونلاين</option>
              </select>
            </div>
            <div class="col-12 mt-1 banks-col d-none">
              <label for="select2Basic" class="form-label">البنوك</label>
              <select
                id="select2Basic"
                class="select2 form-select"
                data-allow-clear="true"
              >
                <option class="hidden_option" selected disabled>
                  طرق الدفع
                </option>
                <option>بنك الراجحي (390608010086203)</option>
                <option>بنك ساب (73004350001)</option>
                <option>بنك الاهلي (2435294000104)</option>
                <option>الاهلي التجاري 500 “سامبا سابقا” (5950001265500)</option>
              </select>
            </div>
            <div class="col-12 mt-2 text-col d-none">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="كود الخصم" aria-label="Username" aria-describedby="basic-addon11" />
                    <span class="input-group-text" id="basic-addon11">اختر</span>
                </div>
            </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>
          <!-- 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');
                $(".text-col").removeClass('d-none');
                $(".file-col").removeClass('d-none');
                $(".action-col").removeClass('d-none');
            }
            if (this.value == "OnlineSelected") {
                $(".banks-col").addClass('d-none');
                $(".file-col").addClass('d-none');
                $(".text-col").removeClass('d-none');
                $(".action-col").removeClass('d-none');

            }

        });



    });
</script>
@endsection