@extends('layouts.simpleLayoutMaster')

@section('title', 'العقود المنتهيه')

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset('css/custom/children/bondCreation.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">
              <span>انشاء السند</span>
            </li>
            <li class="breadcrumb-item">
              <span>منفرد</span>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('content')
<div class="page">
  <div class="bonds-page-wrapper">
    <div id="bondTypesWrapper" class="top-card-wrapper card">
      <div class="row header">
        <div class="col-12">
          <div class="header-wrapper">
            <div class="icon-text-wrapper">
              <img src="{{ asset('assets/essay.svg') }}" alt="" srcset="" />
              <h2 class="header-text">السندات</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="row bond-types-wrapper d-flex justify-content-center">
        <div class="col-4">
          <div class="card">
            <div id="singleBond" class="card-wrapper">
              <a class="lik" href="#">
                <div class="card-body">
                  <em class="me-1 card-icon" data-feather="file"></em>
                  <h2 class="card-title">سند منفرد</h2>
                </div>
              </a>
            </div>
          </div>
        </div>

        <div class="col-4">
          <div class="card">
            <div id="multiBond" class="card-wrapper">
              <a class="lik" href="#">
                <div class="card-body">
                  <em class="me-1 card-icon" data-feather="layers"></em>
                  <h2 class="card-title">سند متعدد</h2>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="singleBondWrapper" class="top-card-wrapper card d-none">
      <div class="row header">
        <div class="col-12">
          <div class="header-wrapper">
            <div class="icon-text-wrapper">
              <img src="{{ asset('assets/essay.svg') }}" alt="" srcset="" />
              <h2 class="header-text">انشاء السند</h2>
            </div>
            <h3 class="text-info">سند مفرد</h3>
          </div>
        </div>
      </div>
      <div class="row single-bond-wrapper">
        <form class="main-form" method="POST" action="#">
          @csrf
          <div id="firstScreen" class="row screen-wrapper">
            <div class="divider divider-primary">
              <div class="divider-text">سبب الإنشاء</div>
            </div>
            <div class="col-12">
              <x-inputs.text.Input
                label="سبب إنشاء السند"
                name="#"
                placeholder="سبب السند"
              />
            </div>

            <div class="divider divider-primary">
              <div class="divider-text">معلومات ماليه</div>
            </div>
            <div class="col-6">
              <x-inputs.text.Input
                label="قيمة السند*"
                name="#"
                placeholder="قيمة السند"
              />
            </div>
            <div class="col-6">
              <x-inputs.text.Input
                label="العمله"
                name="#"
                placeholder="العمله"
              />
            </div>
            <div class="divider divider-primary">
              <div class="divider-text">معلومات البلد</div>
            </div>
            <div class="col-6">
              <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>المملكه العربيه السعوديه</option>
              </select>
            </div>
            <div class="col-6">
              <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>المملكه العربيه السعوديه</option>
              </select>
            </div>
            <div class="col-6">
              <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>
                <optgroup label="المدن الرئيسيه">
                  <option>الرياض</option>
                  <option>جده</option>
                  <option>المدينه المنوره</option>
                  <option>الرياض</option>
                  <option>جده</option>
                  <option>المدينه المنوره</option>
                  <option>الرياض</option>
                  <option>جده</option>
                  <option>المدينه المنوره</option>
                </optgroup>
              </select>
            </div>
            <div class="col-6">
              <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>
                <optgroup label="المدن الرئيسيه">
                  <option>الرياض</option>
                  <option>جده</option>
                  <option>المدينه المنوره</option>
                  <option>الرياض</option>
                  <option>جده</option>
                  <option>المدينه المنوره</option>
                  <option>الرياض</option>
                  <option>جده</option>
                  <option>المدينه المنوره</option>
                </optgroup>
              </select>
            </div>
            <div class="divider divider-primary">
                <div class="divider-text">الصلاحيات</div>
            </div>
            <div class="col-6">
              <label for="select2Basic" class="form-label">نوع الاستحقاق</label>
              <select
                id="select2Basic"
                class="select2 form-select"
                data-allow-clear="true"
                placeholder="رمز التعريف الداخلي"

              >
                <!-- <option class="hidden_option" selected disabled>
                  نوع الاستحقاق
                </option> -->
                <option>تاريخ محدد</option>
                <option>لدي الإطلاع</option>
              </select>
            </div>
            <div class="col-6">
              <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>5 دقائق</option>
                <option>30 دقيقه</option>
                <option>1 ساعه</option>
                <option>6 ساعات</option>
                <option>24 ساعه</option>
                <option>7 ايام</option>
              </select>
            </div>
            <div class="col-12">
              <x-inputs.text.Input
                label="رمز التعريف الداخلي "
                name="#"
                placeholder="رمز التعريف الداخلي"
              />
            </div>

            <div class="divider divider-primary">
              <div class="divider-text">التاريخ</div>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div id="multiBondWrapper" class="top-card-wrapper card d-none">
      <div class="row header">
        <div class="col-12">
          <div class="header-wrapper">
            <div class="icon-text-wrapper">
              <img src="{{ asset('assets/essay.svg') }}" alt="" srcset="" />
              <h2 class="header-text">السندات</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="row multi-bond-wrapper">
        <div class="divider divider-primary">
          <div class="divider-text">Primary</div>
        </div>
      </div>
    </div>
  </div>
</div>


@endsection

@section('page-script')
    <script>
        $("document").ready(function () {
            $("#singleBond").on('click', function () {
                $("#bondTypesWrapper").addClass('d-none');
                $("#singleBondWrapper").removeClass('d-none');
            });


        });

    </script>
@endsection