@extends('layouts.master')
@section('main_title', 'قائمة الامتحانات')
@section('main_page', 'الامتحانات')
@section('title', 'الامتحانات')

@section('content')
    <style>
        #chaptersContainer {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            /* Optional: Adds space between items */
        }
    </style>
    <div id="kt_app_content_container" class="app-container container-fluid">
        <!--begin::Row-->
        <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">

            <div class="card">
                <!--begin::Card header-->
                <div class="card-header border-0 pt-6">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1">
                            <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                            <input type="text" data-kt-data-table-filter="search"
                                class="form-control form-control-solid w-200px ps-12" placeholder="Search" />
                        </div>

                        <div class="d-flex align-items-center position-relative my-1">
                            <select class="form-select ms-2 form-control form-control-solid w-210px ps-12" data-dir="rtl"
                                style="width: 100%" id="search_class_room_id" data-control="select2"
                                name="search_class_room_id" data-placeholder="المراحل التعليمية ">
                                <option value="-1" selected>المراحل التعليمية</option>
                                <option value="">المراحل التعليمية</option>

                                @foreach ($classRooms as $value)
                                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="d-flex align-items-center position-relative my-1">
                            <select class="form-select ms-2 form-control form-control-solid w-210px ps-12" data-dir="rtl"
                                style="width: 100%" id="search_material_id" data-control="select2"
                                name="search_class_room_id" data-placeholder="المادة التعليمية ">
                                <option value="-1" selected>المادة التعليمية</option>

                            </select>
                        </div>



                        <!--end::Search-->
                    </div>
                    <!--begin::Card title-->
                    <!--begin::Card toolbar-->
                    <div class="card-toolbar">
                        <!--begin::Toolbar-->
                        <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                            <!--begin::Filter-->

                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#kt_modal_add_edit">اضافة امتحان جديد</button>
                            <!--end::Add customer-->
                        </div>
                        <!--end::Toolbar-->
                        <!--begin::Group actions-->
                        <div class="d-flex justify-content-end align-items-center d-none"
                            data-kt-customer-table-toolbar="selected">
                            <div class="fw-bold me-5">
                                <span class="me-2" data-kt-customer-table-select="selected_count"></span>Selected
                            </div>
                            <button type="button" class="btn btn-danger"
                                data-kt-customer-table-select="delete_selected">Delete Selected</button>
                        </div>
                        <!--end::Group actions-->
                    </div>
                    <!--end::Card toolbar-->
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-0">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="data-table">



                        <thead>
                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0" style="width: 100%">

                            <tr class="fw-semibold fs-6 text-gray-800">
                                <th style="20%">الاسم</th>
                                <th style="10%">الصف الدراسي</th>
                                <th style="10%">المادة الدراسية</th>
                                <th style="10%">عدد الاسئلة</th>
                                <th style="30%"></th>
                            </tr>

                        </thead>
                        <tbody>

                        </tbody>

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

        </div>
    </div>


    <input type="hidden" name="show_modal" id="show_modal" value="{{ $modal }}">

    @include('dashboard.exams.Model.create_update')





    @include('Shared.delete')
@endsection

@section('scripts')
    @include('dashboard.exams.js.js')
@endsection