@extends('layouts.simpleLayoutMaster')

@section('title', 'طلبات التجديد')

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset('css/custom/renewalRequests/requestsUnderReview.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="requests-page-wrapper">
    <div class="top-card-wrapper card">
        <div id="screen-one">
            <div class="row header">
              <div class="col-12">
                <div class="header-wrapper">
                    <div class="icon-text-wrapper">
                        <img src="{{ asset('assets/documents.svg') }}" alt="" srcset="">
                        <h2 class="header-text">طلبات تحت المراجعه</h2>
                    </div>

                    <div class="alert alert-danger alert-custom" role="alert">
                        <div class="alert-header">طلبك قيد الانتظار</div>
                        <div class="alert-body">يرجي دفع مبلغ و قدره 1000 ر.س لقبول  الطلب</div>
                    </div>

                    <h3 class="text-main">الطالبه : مهره بنت عبد الرحمن بن محمد الحسيني</h3>
                    <h3 class="text-info">تفاصيل العقد</h3>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-12">
                <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>كود الطالب</th>
                        <th>السنة الدراسية</th>
                        <th>الفصول</th>
                        <th>الصف الدراسي</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="cel-sm">
                            <div class="actions-wrapper">
                                <a role="button" class="btn btn-outline-secondary btn-action"  href="{{ route('showEditRequestsUnderReviewPage') }}">
                                    <i class="edit-icon" data-feather='edit-2'></i>
                                    <span class="edit-text">تعديل</span>
                                </a>
                            </div>
                        </td>
                        <td class="cel-sm">11515145</td>
                        <td>2022/2023</td>
                        <td>3 فصول</td>
                        <td>الرابع الابتدائي</td>
                    </tr>
                    </tbody>
                </table>
                </div>

                </div>
            </div>
        </div>
        <div id="screen-two" class="d-none">
            <div class="row header">
              <div class="col-12">
                <div class="header-wrapper">
                    <div class="icon-text-wrapper">
                        <img src="{{ asset('assets/documents.svg') }}" alt="" srcset="">
                        <h2 class="header-text">طلبات تحت المراجعه</h2>
                    </div>

                    <div class="alert-text-wrapper">
                        <h2 class="main-text">طلبك قيد الانتظار الاداري و المالي</h2>
                        <span class="main-first-text b-l  d-none">تم القبول اداريا </span>
                        <span class="main-secound-text  d-none">الطلب المالي قيد الانتظار</span>
                        <span class="main-secound-text-done  d-none">تم القبول ماديا</span>
                    </div>
                    <h3 class="text-main">الطالبه : مهره بنت عبد الرحمن بن محمد الحسيني</h3>
                    <h3 class="text-info">تفاصيل العقد</h3>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-12">
                <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>كود</th>
                        <th>حالة الطلب</th>
                        <th>السداد</th>
                        <th>الفصول</th>
                        <th>الصف</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="cel-sm">
                            <div class="actions-wrapper">
                                <button type="button" class="btn btn-outline-secondary btn-action-delete">
                                <i class="delete-icon" data-feather='trash-2'></i>
                                <span class="delete-text">حذف</span>
                                </button>
                                <a role="button" class="btn btn-outline-secondary btn-action" href="{{ route('showEditRequestsUnderReviewPage') }}">
                                    <i class="edit-icon" data-feather='edit-2'></i>
                                    <span class="edit-text">تعديل</span>
                                </a>
                            </div>
                        </td>
                        <td class="cel-sm">15</td>
                        <td>
                            <span class="first-text lead-text ">تحت الانتظار الاداري...</span>
                            <span class="first-text-done lead-text d-none ">تم القبول الاداري</span>
                            <span class="secound-text lead-text">تحت الانتظار المادي...</span>
                            <span class="secound-text-done lead-text d-none">تم القبول المادي</span>
                        </td>
                        <td class="success-text">9405 ر.س</td>
                        <td>3 فصول</td>
                        <td>الرابع الابتدائي</td>

                    </tr>


                    </tbody>
                </table>
                </div>

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

@endsection

@section('page-script')
    <script>
        // just to show screens -must fit flow as needs.
        setTimeout(() => {
            $("#screen-one").addClass('d-none');
            $("#screen-two").removeClass('d-none');
        }, 3000)

        setTimeout(() => {
            $(".main-text").addClass('d-none');
            $(".main-first-text").removeClass('d-none');
            $(".main-secound-text").removeClass('d-none');
            $(".first-text").addClass('d-none');
            $(".first-text-done").removeClass('d-none');

        }, 6000)

        setTimeout(() => {
            $(".main-secound-text").addClass('d-none');
            $(".main-secound-text-done").removeClass('d-none');
            $(".secound-text").addClass('d-none');
            $(".secound-text-done").removeClass('d-none');
        }, 9000)

    </script>
@endsection