@extends('layouts.simpleLayoutMaster')

@section('title', 'طلبات الالتحاق')

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset('css/custom/enrollmentApplications/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">
                            <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 class="row header">
                <div class="col-12">
                    <div class="header-wrapper">
                        <div class="icon-text-wrapper">
                            <img src="{{ asset('assets/archive.svg') }}" alt="" srcset="">
                            <h2 class="header-text">طلبات تحت المراجعه</h2>
                        </div>
                        <h3 class="header-lead">قائمة الطلبات المقدمه .. 3 طلب</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>
                                    <th>النقل</th>
                                    <th>رقم الجوال</th>
                                    <th>رقم الهوية</th>
                                    <th>اخر تعديل</th>
                                    <th>بواسطة</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td class="special-text">مهره بنت عبد الرحمن</td>
                                    <td>
                                        <div class="time-line-wrapper">
                                            <div class="time-line-cel cel-one">
                                                <span class="cel-txt cel-txt-one">تقديم الطلب</span>
                                                <span class="cel-prog-wrapper">
                                                    <span class="circle circle-one">1</span>
                                                    <span class="line line-one"></span>
                                                </span>
                                            </div>
                                            <div class="time-line-cel cel-two">
                                                <span class="cel-txt cel-txt-two">قبول اداري</span>
                                                <span class="cel-prog-wrapper">
                                                    <span class="line line-one"></span>
                                                    <span class="circle circle-two">2</span>
                                                    <span class="line line-two"></span>
                                                </span>
                                            </div>
                                            <div class="time-line-cel cel-three">
                                                <span class="cel-txt cel-txt-three">قبول مادي</span>
                                                <span class="cel-prog-wrapper">
                                                    <span class="line line-two"></span>
                                                    <span class="circle circle-three">3</span>
                                                </span>
                                            </div>

                                        </div>
                                        <span class="first-text lead-text ">انتظار القبول الاداري</span>
                                        <span class="first-text-done lead-text d-none">تم القبول اداريا</span>
                                        <span class="secound-text-wait lead-text">---</span>
                                        <span class="secound-text lead-text d-none">انتظار الموافقة علي سند الامر</span>
                                        <span class="secound-text-done lead-text d-none">تم الموافقة علي سند الامر</span>
                                    </td>
                                    <td class="success-text">9405 ر.س</td>
                                    <td>الرابع الابتدائي</td>
                                    <td>2022/2023</td>
                                    <td>لا يرغب</td>
                                    <td>+9215845587451</td>
                                    <td>15845587451</td>
                                    <td>7-7-2022-07:30</td>
                                    <td class="cel-lg">محمد طلال عبد المعطي</td>
                                </tr>



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

                    <div class="table-info-wrapper mt-2">
                        <span class="table-txt-info">القبول الاداري : هو مطابقة البيانات لكل شروط الاداريه و المقابلات الشخصيه بالمدرسه</span>
                        <span class="table-txt-info">القبول المالي : هو الموافقه علي بيانات السندات و الموافقه علي إنشائها</span>
                    </div>

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

@endsection

@section('page-script')
<script>
    setTimeout(() => {
        $(".cel-txt-one").addClass('active');
        $(".circle-one").addClass('active');

    }, 1000)

    setTimeout(() => {
        $(".line-one").addClass('active');
        $(".circle-two").addClass('active');
        $(".cel-txt-two").addClass('active');
        $(".first-text").addClass('d-none');
        $(".first-text-done").removeClass('d-none');
        $(".secound-text-wait").addClass('d-none');
        $(".secound-text").removeClass('d-none');
    }, 3000)

    setTimeout(() => {
        $(".line-two").addClass('active');
        $(".circle-three").addClass('active');
        $(".cel-txt-three").addClass('active');
        $(".secound-text").addClass('d-none');
        $(".secound-text-done").removeClass('d-none');
    }, 6000)
</script>
@endsection