@extends('layouts.simpleLayoutMaster')

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

@section('vendor-style')
{{-- vendor css files --}}
<link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/dragula.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-drag-drop.css')) }}">
<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/studentsTransfer.css') }}">
@endsection


@section('content')
<div class="page">
    <div class="students-transfer-page-wrapper">
        <div class="top-card-wrapper card">

            <div class="header-wrapper">
                <div class="top-header-wrapper toggelSearchForm">
                    <div class="icon-text-wrapper">
                        <img src="{{ asset('assets/search.svg') }}" alt="" srcset="" />
                        <h2 class="header-text">البحث</h2>
                    </div>
                </div>
                <img class="toggelSearchForm" src="{{ asset('assets/search1.svg') }}" alt="" srcset="" />
            </div>

            <div class="row mt-1 searchFormWrapper">
                <div class="col-12 form-wrapper">
                    <form class="row" method="POST" action="#" id="searchForm">
                        <div class="col-lg-3 col-6 mt-1">
                            <label for="school" class="form-label">المدرسه</label>
                            <select id="school" name="school" class="select2 form-select schoolSelector" data-allow-clear="true">
                                <option class="hidden_option" selected disabled>
                                    بحث المدرسه
                                </option>
                                <option value="school1">مدرسة النبلاء لرياض الاطفال </option>
                                <option value="school2">مدرسة النبلاء للبنين</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-6 mt-1">
                            <label for="track" class="form-label">المسار</label>
                            <select id="track" name="track" class="select2 form-select trackSelector" data-allow-clear="true">
                                <option class="hidden_option" selected disabled>
                                    اختر المسار
                                </option>
                                <option value="track1">عام</option>
                                <option value="track2">شرعي</option>
                                <option value="track3">صحي</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-6 mt-1">
                            <label for="section" class="form-label">القسم</label>
                            <select id="section" name="section" class="select2 form-select sectionSelector" data-allow-clear="true">
                                <option class="hidden_option" selected disabled>
                                    اختر القسم
                                </option>
                                <option value="section1">رياض اطفال عام</option>
                                <option value="sectio2">الابتدائي بنين</option>
                                <option value="sectio3">الاعدادي بنين</option>
                                <option value="section4">الثانوي بنين</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-6 mt-1">
                            <label for="line" class="form-label">الصف</label>
                            <select id="line" name="line" class="select2 form-select lineSelector" data-allow-clear="true">
                                <option class="hidden_option" selected disabled>
                                    اختر الصف
                                </option>
                                <option value="line1">الاول الابتدائي</option>
                                <option value="line2">الثاني الابتدائي</option>
                                <option value="line3">الثالث الابتدائي</option>
                                <option value="line4">الرابع الابتدائي</option>
                                <option value="line5">الخامس الابتدائي</option>
                                <option value="line6">السادس الابتدائي</option>
                                <option value="line7">الاول المتوسط</option>
                                <option value="line8">الثاني المتوسط</option>
                                <option value="line9">الثالث المتوسط</option>
                            </select>
                        </div>

                        <div class="col-12 mt-1 action-col  d-flex justify-content-center">
                            <div class="col-lg-2 col-4">
                                <x-inputs.submit type="button" id="submitSearchForm" class="btn btn-primary w-100 btn-submit">
                                    <span class="btn-text secoundery-header centered">بحث
                                    </span>
                                </x-inputs.submit>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="center-card-wrapper  card">
            <div class="center-header-wrapper">
                <h2 class="center-header-text">اختر فصلين دراسين </h2>
                <img src="{{ asset('assets/interrogation.svg') }}" alt="" srcset="" />
            </div>

            <div class="row mt-1">
                <div class="col-12">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-12 col-inner-cards d-flex justify-content-center">
                            <div class="row row-inner-cards">
                                <div class="col-12 card inner-card yellow">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 9/1</h2>
                                        <div class="percentage_yellow"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">20 طالب</h5>
                                    </div>
                                </div>
                                <div class="col-12 card inner-card yellow">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 3/1</h2>
                                        <div class="percentage_yellow"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">20 طالب</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-12 col-inner-cards d-flex justify-content-center">
                            <div class="row row-inner-cards">
                                <div class="col-12 card inner-card tint-green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 2/1</h2>
                                        <div class="percentage_tint_green"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">25 طالب</h5>
                                    </div>
                                </div>
                                <div class="col-12 card inner-card tint-green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 6/1</h2>
                                        <div class="percentage_tint_green"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">25 طالب</h5>
                                    </div>
                                </div>
                                <div class="col-12 card inner-card tint-green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 10/1</h2>
                                        <div class="percentage_tint_green"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">25 طالب</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-12 col-inner-cards d-flex justify-content-center">
                            <div class="row row-inner-cards">
                                <div class="col-12 card inner-card green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 5/1</h2>
                                        <div class="percentage_green"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">28 طالب</h5>
                                    </div>
                                </div>
                                <div class="col-12 card inner-card green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 4/1</h2>
                                        <div class="percentage_green"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">28 طالب</h5>
                                    </div>
                                </div>
                                <div class="col-12 card inner-card green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 7/1</h2>
                                        <div class="percentage_green"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">28 طالب</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-12 col-inner-cards d-flex justify-content-center">
                            <div class="row row-inner-cards">
                                <div class="col-12 card inner-card tint-red">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 1/1</h2>
                                        <div class="percentage_tint_red"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">35 طالب</h5>
                                    </div>
                                </div>
                                <div class="col-12 card inner-card tint-red">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل 8/1</h2>
                                        <div class="percentage_tint_red"></div>
                                    </div>
                                    <div class="inner-card-body">
                                        <div class="avatar-group">
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>
                                            <div data-bs-placement="bottom" title="" class="avatar pull-up">
                                                <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="18" height="18" />
                                            </div>

                                        </div>
                                        <h5 class="avatars-text">35 طالب</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom-card-wrapper  card">
            <div class="bottom-header-wrapper">
                <h2 class="bottom-header-text">الفصول الدراسيه</h2>
                <h4 class="bottom-header-text-lead">قائمة الفصول - رياض الاطفال - 1/1</h4>
            </div>
            <!-- Sortable lists section start -->
            <section id="sortable-lists">
                <div class="row">
                    <!-- Multiple List Group starts -->
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-lists-wrapper">
                                    <div class="col-md-6 col-sm-12 draggable-list-wrapper tint-red">
                                        <h4 class="draggable-list-header mt-1">قائمة فصل - 1/1</h4>
                                        <h4 class="my-1 draggable-list-count exeed">عدد الطلاب : وصل للحد الاقصي <span id="studentCount">31</span> طالب</h4>
                                        <ul class="list-group list-group-flush" id="multiple-list-group-a">

                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" value="2">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">مهره بنت عبدالرحمن بن نواف</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" class="studentsInputs" value="1">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">أمنه بنت محمد</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" class="studentsInputs" value="1">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">محمد بن عيد بن احمد</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" class="studentsInputs" value="1">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">احمد بن عيد بن احمد</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" class="studentsInputs" value="1">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">عمر بن عيد بن ميمون</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>

                                    <div class="col-md-6 col-sm-12 draggable-list-wrapper yellow">
                                        <h4 class="draggable-list-header mt-1">قائمة فصل - 9/1</h4>
                                        <h4 class="my-1 draggable-list-count low">عدد الطلاب : <span id="studentNotInClassCount">19</span> طالب</h4>
                                        <ul class="list-group list-group-flush" id="multiple-list-group-b">

                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" value="2">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">سالم بن محمد بن محمود</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" class="studentsInputs" value="1">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">نيره بنت عبدالرحمن بن نواف</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" class="studentsInputs" value="1">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">نواف بن احمد </h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item draggable mb-1">
                                                <div class="d-flex align-items-center">
                                                    <input type="hidden" name="students[]" class="studentsInputs" value="1">
                                                    <div class="avatar-wrapper">
                                                        <div class="avatar bg-light-info me-1"><span class="avatar-content"> <img src="{{ asset('assets/children1.svg') }}" alt="Avatar" width="36" height="36" /></span></div>
                                                    </div>
                                                    <div class="more-info">
                                                        <h5 class="text-student-name">سعد بن عيد بن سهيل</h5>
                                                        <h6 class="text-student-id">114-897-63</h6>
                                                    </div>
                                                </div>
                                            </li>

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

                            </div>
                        </div>
                    </div>
                    <!-- Multiple List Group ends -->
                </div>
            </section>
            <!-- Sortable lists section end -->
            <div class="col-12  d-flex justify-content-center">
                <div class="col-lg-2 col-4">
                    <x-inputs.submit type="button" id="submitSortableLists" class="btn btn-primary w-100 btn-submit">
                        <span class="btn-text secoundery-header centered">حفظ
                        </span>
                    </x-inputs.submit>
                </div>
            </div>
        </div>

        <div class="fix-height"></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>
@endsection

@section('vendor-script')
{{-- vendor files --}}
<script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/dragula.min.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/extensions/ext-component-drag-drop.js')) }}"></script>
@endsection

@section('page-script')
<script>
    $("document").ready(function() {
        $(".toggelSearchForm").on('click', function() {
            $(".searchFormWrapper").toggleClass('d-none');
        });

        $("#submitSearchForm").on('click', function() {
            $(".center-card-wrapper").removeClass('d-none');

        });


        function generateChart(id, color, percentage) {
            const slelctors = document.querySelectorAll(id);

            slelctors.forEach((slelctor) => {

                let options = {
                    chart: {
                        height: 45,
                        width: 45,
                        type: 'radialBar',
                    },
                    colors: [color],
                    plotOptions: {
                        radialBar: {
                            size: 45,
                            hollow: {
                                size: '40%'
                            },
                            track: {
                                background: '#DBDADE',
                                strokeWidth: '40%'
                            },
                            dataLabels: {
                                name: {
                                    show: false,
                                },
                                value: {
                                    fontSize: "1rem",
                                    fontWeight: '700',
                                },
                            }
                        }
                    },
                    grid: {
                        show: false,
                        padding: {
                            left: -15,
                            right: -15,
                            top: 0,
                        }
                    },
                    series: [percentage],
                    stroke: {
                        lineCap: 'round'
                    },

                };
                let chart = new ApexCharts(slelctor, options);
                chart.render();
            });
        }



        // percentage_yellow
        let chartIdyellow = '.percentage_yellow';
        let chartColoryellow = '#D9DD05';
        let chartPercentageyellow = 45;
        generateChart(chartIdyellow, chartColoryellow, chartPercentageyellow);

        // percentage_tint_green
        let chartIdTintGreen = '.percentage_tint_green';
        let chartColorTintGreen = '#00DDB1';
        let chartPercentageTintGreen = 80;
        generateChart(chartIdTintGreen, chartColorTintGreen, chartPercentageTintGreen);

        // percentage_green
        let chartIdGreen = '.percentage_green';
        let chartColorGreen = '#0B8101';
        let chartPercentageGreen = 100;
        generateChart(chartIdGreen, chartColorGreen, chartPercentageGreen);

        // percentage_tint_red
        let chartIdTintRed = '.percentage_tint_red';
        let chartColorTintRed = '#FC1B1B';
        let chartPercentageTintRed = 101;
        generateChart(chartIdTintRed, chartColorTintRed, chartPercentageTintRed);















        // Helper
        $(".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