@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-250px 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-250px 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>
                        <!--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">

                                                <tr class="fw-semibold fs-6 text-gray-800">

                                <th>الاسم</th>
                                <th>المرحلة الدراسية</th>
                                <th></th>
                            </tr>

                        </thead>
                        <tbody>

                        </tbody>

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

        </div>
    </div>


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

    @include('dashboard.classSections.Model.create_update')
    @include('dashboard.classSections.Model.view')





    @include('Shared.delete')
@endsection

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