@extends('layouts.contentLayoutMaster')

@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">--}}
                        {{-- <x-inputs.select.generic :required="true" select2="" label="المدرسة" onLoad="{{ request('school_id') ? null : 'change'}}" name="school_id" data-placeholder="اختر المدرسة" data-msg="رجاء اختيار المدرسة" :options="['' => 'اختر المدرسة'] +schools()" />--}}
                        {{-- </div>--}}
                        {{-- <div class="col-lg-3 col-6 mt-1">--}}
                        {{-- <x-inputs.select.generic :required="true" select2="" label="القسم" name="gender_id" data-placeholder="اختر القسم" data-msg="رجاء اختيار القسم" :options="request('school_id') ? ['' => 'اختر القسم'] + App\Models\Gender::genders(true,request('school_id')) : []" />--}}
                        {{-- </div>--}}
                        {{-- <div class="col-3 mt-1">--}}
                        {{-- <x-inputs.select.generic :required="true" select2="" label="المسار" name="grade_id" data-placeholder="اختر المسار" data-msg="رجاء اختيار المسار" :options="request('gender_id') ? ['' => 'اختر المسار'] + App\Models\Grade::grades(true,request('gender_id')) : []" />--}}
                        {{-- </div>--}}
                        {{-- <div class="col-3 mt-1">--}}
                        {{-- <x-inputs.select.generic id="level_id" :required="true" select2="" label="الصف" name="level_id" data-placeholder="اختر الصف" data-msg="رجاء اختيار الصف" :options="request('grade_id') ? ['' => 'اختر الصف'] + App\Models\Level::levels(true,request('grade_id')) : []" />--}}
                        {{-- </div>--}}

                        <div class="col-lg-3 col-6 mt-1">
                            <label for="school_id" class="form-label">المدرسة</label>
                            <select class="form-select" name="school_id" id="school_id">
                                <option value="">إختر المدرسة </option>
                                @foreach(\App\Models\School::Active()->selectedCorporate()->select('id', 'school_name', 'corporate_id')->get() as $school)
                                <option value="{{$school->id}}"> {{$school->school_name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-3 col-6 mt-1">
                            <x-inputs.select.generic select2="" label="القسم" name="gender_id" data-placeholder="اختر القسم" data-msg="رجاء اختيار القسم" :options="old('school_id') ? App\Models\Gender::genders(true,old('school_id')) : []" />
                        </div>

                        <div class="col-lg-3 col-6 mt-1">
                            <x-inputs.select.generic select2="" label="المسار" name="grade_id" data-placeholder="اختر المسار" data-msg="رجاء اختيار المسار" :options="old('gender_id') ?App\Models\Grade::grades(true,old('gender_id')) : []" />
                        </div>

                        <div class="col-lg-3 col-6 mt-1">
                            <x-inputs.select.generic select2="" label="الصف الدراسي" name="level_id" data-placeholder="اختر الصف الدراسي" data-open_year=true data-academic_year_id="{{GetAcademicYear()->id}}" data-msg="رجاء اختيار الصف الدراسي" :options="old('grade_id') ? App\Models\Level::levels(true,old('grade_id'),true) : []" />
                        </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 disabled">
                                    <span class="btn-text secoundery-header centered">بحث
                                    </span>
                                </x-inputs.submit>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="center-card-wrapper d-none 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 id="cat_1" 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 id="cat_2" 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 id="cat_3" 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 id="cat_4" 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 class="col-12 mt-1 mb-3  d-flex justify-content-center">
                            <div class="col-lg-2 col-4">
                                <x-inputs.submit type="button" id="submitComfirm" class="btn btn-primary w-100 btn-submit disabled">
                                    <span class="btn-text secoundery-header centered">تاكيد
                                    </span>
                                </x-inputs.submit>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom-card-wrapper d-none 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 -->

            <!-- Sortable lists section end -->

        </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>
    let selectedIdList = [];

    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();
        });
    }

    function getContractList(classIndex) {
        let contractList = [];
        var containers = Array.prototype.slice.call(document.querySelectorAll('.list-group'));
        let list = containers[classIndex].children;

        Array.from(list).forEach(function(element) {
            contractList.push($(element).attr('contract-id'));
        });

        return contractList;

    }

    $("document").ready(function() {
        $(".toggelSearchForm").on('click', function() {
            $(".searchFormWrapper").toggleClass('d-none');
        });

        $("#level_id").on('change', function() {
            let selected = $(this).children(":selected").val();
            if (selected) {
                $("#submitSearchForm").removeClass('disabled');
            } else {
                $("#submitSearchForm").addClass('disabled');
            }

        });

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

            selectedIdList = [];
            let damy_data_template = `
                <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 id="cat_1" 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 id="cat_2" 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 id="cat_3" 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 id="cat_4" 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 class="col-12 mt-1 mb-3  d-flex justify-content-center">
                                <div class="col-lg-2 col-4">
                                    <x-inputs.submit type="button" id="submitComfirm" class="btn btn-primary w-100 btn-submit disabled">
                                        <span class="btn-text secoundery-header centered">تاكيد
                                        </span>
                                    </x-inputs.submit>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            $(".center-card-wrapper").empty();
            $(".bottom-card-wrapper").empty();
            $(".center-card-wrapper").append(damy_data_template);

            $("#cat_1").empty();
            $("#cat_2").empty();
            $("#cat_3").empty();
            $("#cat_4").empty();
            $(".center-header-text").text('جاري البحث...');
            $("#submitSearchForm").addClass('disabled');
            $("#submitComfirm").addClass('d-none');



            // let level_id = $("#level_id").val();
            let selectLevel = document.getElementById('level_id');
            let level_id = selectLevel.value;
            let fullUrl = "{{ url('admin_dashboard/classrooms/level') }}/" + level_id;

            $.ajax({
                type: 'GET',
                url: `${fullUrl}`,
                success: function(data) {
                    // handle the response data here
                    const numRecords = Object.keys(data).length;
                    if (!numRecords) {
                        let empty_data_template = `
                            <div class="row ">
                                <h4 class="error-text col-12 mt-1  d-flex justify-content-center">عفوا لا يوجد بيانات</h4>
                            </div>
                        `;
                        $(".center-card-wrapper").empty();
                        $(".center-card-wrapper").append(empty_data_template);

                    } else {

                        let cat_1_list = data.cat_1 ?? [];
                        let cat_2_list = data.cat_2 ?? [];
                        let cat_3_list = data.cat_3 ?? [];
                        let cat_4_list = data.cat_4 ?? [];

                        $(".center-header-text").text('اختر فصلين دراسين');

                        cat_1_list.forEach(element => {
                            let class_name = element.class_name;
                            let class_room_id = element.class_room_id;
                            let number_students = element.number_students;
                            let student_percentage = parseFloat(element.student_percentage.replace('%', '')).toFixed(1);
                            let chart_id = `percentage_yellow_${class_room_id}`;


                            let cat_1_template = `
                                <div class_room_id="${class_room_id}"  class="col-12 card inner-card yellow">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل ${class_name}</h2>
                                        <div id="${chart_id}"></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">${number_students} طالب</h5>
                                    </div>
                                </div>
                            `;

                            $("#cat_1").append(cat_1_template);

                            // percentage_yellow
                            let chartIdyellow = `#${chart_id}`;
                            let chartColoryellow = '#D9DD05';
                            let chartPercentageyellow = student_percentage;
                            generateChart(chartIdyellow, chartColoryellow, chartPercentageyellow);
                        });

                        cat_2_list.forEach(element => {
                            let class_name = element.class_name;
                            let class_room_id = element.class_room_id;
                            let number_students = element.number_students;
                            let student_percentage = parseFloat(element.student_percentage.replace('%', '')).toFixed(1);
                            let chart_id = `percentage_tint_green_${class_room_id}`;


                            let cat_2_template = `
                                <div class_room_id="${class_room_id}"  class="col-12 card inner-card tint-green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل ${class_name}</h2>
                                        <div id="${chart_id}"></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">${number_students} طالب</h5>
                                    </div>
                                </div>
                            `;

                            $("#cat_2").append(cat_2_template);


                            // percentage_tint_green
                            let chartIdTintGreen = `#${chart_id}`;
                            let chartColorTintGreen = '#00DDB1';
                            let chartPercentageTintGreen = student_percentage;
                            generateChart(chartIdTintGreen, chartColorTintGreen, chartPercentageTintGreen);
                        });

                        cat_3_list.forEach(element => {
                            let class_name = element.class_name;
                            let class_room_id = element.class_room_id;
                            let number_students = element.number_students;
                            let student_percentage = parseFloat(element.student_percentage.replace('%', '')).toFixed(1);
                            let chart_id = `percentage_green_${class_room_id}`;


                            let cat_3_template = `
                                <div class_room_id="${class_room_id}"  class="col-12 card inner-card green">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل ${class_name}</h2>
                                        <div id="${chart_id}"></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">${number_students} طالب</h5>
                                    </div>
                                </div>
                            `;

                            $("#cat_3").append(cat_3_template);


                            // percentage_green
                            let chartIdGreen = `#${chart_id}`;
                            let chartColorGreen = '#0B8101';
                            let chartPercentageGreen = student_percentage;
                            generateChart(chartIdGreen, chartColorGreen, chartPercentageGreen);
                        });

                        cat_4_list.forEach(element => {
                            let class_name = element.class_name;
                            let class_room_id = element.class_room_id;
                            let number_students = element.number_students;
                            let student_percentage = parseFloat(element.student_percentage.replace('%', '')).toFixed(1);
                            let chart_id = `percentage_tint_red_${class_room_id}`;


                            let cat_4_template = `
                                <div class_room_id="${class_room_id}"  class="col-12 card inner-card tint-red">
                                    <div class="inner-card-header">
                                        <h2 class="text">فصل ${class_name}</h2>
                                        <div id="${chart_id}"></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">${number_students} طالب</h5>
                                    </div>
                                </div>
                            `;

                            $("#cat_4").append(cat_4_template);


                            // percentage_tint_red
                            let chartIdTintRed = `#${chart_id}`;
                            let chartColorTintRed = '#FC1B1B';
                            let chartPercentageTintRed = student_percentage;
                            generateChart(chartIdTintRed, chartColorTintRed, chartPercentageTintRed);
                        });

                        switch (numRecords) {
                            case 2:
                                $(".col-inner-cards").addClass('col-6');
                                break;
                            case 3:
                                $(".col-inner-cards").addClass('col-4');
                                break;

                            default:
                                break;
                        }

                        $("#submitComfirm").removeClass('d-none');


                    }
                },
                error: function(xhr, status, error) {
                    // handle the error here
                    let error_data_template = `
                            <div class="row ">
                                <h4 class="error-text col-12 mt-1  d-flex justify-content-center">عفوا حدث خطا ما.</h4>
                            </div>
                        `;
                    $(".center-card-wrapper").empty();
                    $(".center-card-wrapper").append(error_data_template);
                }
            });

        });

        $(document).on("click", ".inner-card", function() {
            $(this).addClass("selected");
            let selectedClassRoomId = $(this).attr("class_room_id");

            if (selectedIdList.indexOf(selectedClassRoomId) == -1) {
                selectedIdList.push(selectedClassRoomId);
            }

            if (selectedIdList.length > 2) {
                let freeItemId = selectedIdList.shift();
                $(`[class_room_id=${freeItemId}]`).removeClass('selected');
            }

            if (selectedIdList.length == 2) {
                $("#submitComfirm").removeClass('disabled');
            } else {
                $("#submitComfirm").addClass('disabled');
            }

        });


        $(document).on("click", "#submitComfirm", function() {
            $(".bottom-card-wrapper").removeClass('d-none').empty();

            if (selectedIdList.length) {
                classIdOne = selectedIdList[0];
                classIdTwo = selectedIdList[1];
                let fullUrl = "{{ url('admin_dashboard/classrooms/contracts') }}";

                $.ajax({
                    type: 'GET',
                    url: `${fullUrl}`,
                    data: {
                        class_id_one: classIdOne,
                        class_id_two: classIdTwo
                    },
                    success: function(data) {
                        // handle the response data here
                        if (data.length) {
                            let level_name = data[0].level_name;
                            let tempHeader = `
                                <div class="bottom-header-wrapper">
                                    <h2 class="bottom-header-text">الفصول الدراسيه</h2>
                                    <h4 class="bottom-header-text-lead">قائمة الفصول -${level_name}</h4>
                                </div>
                            `;
                            $(".bottom-card-wrapper").append(tempHeader);

                            let tempMain = `
                                <section id="sortable-lists">
                                    <div class="row">

                                        <div class="col-sm-12">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row row-lists-wrapper">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <div class="col-12  d-flex justify-content-center">
                                    <div class="col-lg-2 col-4">
                                        <x-inputs.submit type="button"  data-bs-toggle="modal" data-bs-target="#modalToggle" id="submitSortableLists" class="btn btn-primary w-100 btn-submit">
                                            <span class="btn-text secoundery-header centered">حفظ
                                            </span>
                                        </x-inputs.submit>
                                    </div>
                                </div>
                            `;
                            $(".bottom-card-wrapper").append(tempMain);

                            data.forEach(element => {
                                let class_name = element.class_name;
                                let class_status = element.class_status;
                                let contracts = element.contracts;
                                let total_contracts = element.total_contracts;
                                let level_name = element.level_name;
                                let list_id = `multiple_list_group_${element.class_id}`;

                                let template_normal_head = `
                                        <div class="col-md-6 col-sm-12 draggable-list-wrapper yellow">
                                            <h4 class="draggable-list-header mt-1">قائمة فصل - ${class_name}</h4>
                                            <h4 class="my-1 draggable-list-count">عدد الطلاب : <span id="studentCount">${total_contracts}</span> طالب</h4>
                                            <ul class="draggable-list list-group list-group-flush" id="${list_id}" class-id="${element.class_id}">
                                            </ul>
                                            <input type="hidden" name="${list_id}[]" id="input-${list_id}">
                                        </div>
                                `;
                                $(".row-lists-wrapper").append(template_normal_head);


                                contracts.forEach(element => {
                                    let contract_id = element.contract_id;

                                    let template_normal_item = `
                                            <li class="list-group-item draggable mb-1"  contract-id="${contract_id}">
                                                <div class="d-flex align-items-center flex-on-phone">
                                                    <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 cut-1-line">${element.student_name}</h5>
                                                        <h6 class="text-student-id">${element.national_id}</h6>
                                                    </div>
                                                </div>
                                            </li>
                                    `;
                                    $(`#${list_id}`).append(template_normal_item);
                                });

                            });

                            var containers = Array.prototype.slice.call(document.querySelectorAll('.list-group'));
                            // Create a new dragula instance
                            var dragulaInstance = dragula(containers);

                        }


                    },
                    error: function(xhr, status, error) {
                        // handle the error here

                    }
                });
            }

        });

        $(document).on("click", "#submitSortableLists", function() {
            var lists = Array.prototype.slice.call(document.querySelectorAll('.draggable-list'));

            let class_id_1 = $(lists[0]).attr('class-id');
            let list_1 = getContractList(0);
            let class_id_2 = $(lists[1]).attr('class-id');
            let list_2 = getContractList(1);

            let class_1 = {
                class_id: class_id_1,
                class_list: list_1,
            }
            let class_2 = {
                class_id: class_id_2,
                class_list: list_2,
            }

            var fullUrl = "{{ url('admin_dashboard/classrooms/transfer-students/update') }}";
            var data = {
                class_1: class_1,
                class_2: class_2
            };
            // Set up the request headers and body
            let token = $('meta[name="csrf-token"]').attr('content');
            var options = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    'X-CSRF-TOKEN': token
                },
                body: JSON.stringify(data)
            };

            // Send the POST request with the JSON data
            fetch(fullUrl, options)
                .then(response => response.json())
                .then(data => {
                    if (data.ok) {

                        $(".first-img").addClass('d-none');
                        $(".first-text").addClass('d-none');
                        $(".secound-img").removeClass('d-none');
                        $(".secound-text").removeClass('d-none');

                    }
                })
                .catch(error => console.error(error));
        });

    });
</script>

@endsection