@extends('layout.app')
@section('title')
    {{ __('الصفوف المدرسية') }}
@stop

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title">{{ __('الصفوف المدرسية') }}</h4>
            <button class="btn btn-primary btn-sm waves-effect waves-float waves-light" tabindex="0"
                aria-controls="DataTables_Table_0" type="button" data-toggle="modal" data-target="#modals-create"><span>اضافة
                    صف </span></button>
        </div>
        <div class="table-responsive">
            {{-- <x-alert /> --}}
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>م</th>
                        <th>{{ __('الصف') }}</th>
                        <th>{{ __('المرحلة') }}</th>
                        <th>{{ __('مربي الصف') }}</th>
                        <th>{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($classes as $class)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <span class="font-weight-bold">{{ $class->name }}</span>
                            </td>
                            <td>
                                <span class="font-weight-bold">{{ $class->stage->name }}</span>
                            </td>
                            <td>
                                @if ($class->user)
                                    <span class="font-weight-bold">{{ $class->user->name }}</span>
                                @else
                                    <span class="badge text-danger">لم يتم اختيار مربي بعد</span>
                                @endif
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button class="btn btn-outline-primary dropdown-toggle waves-effect" type="button"
                                        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        العمليات
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a href="#" class="dropdown-item" data-toggle="modal"
                                            data-target="#modals-delete-{{ $class->id }}">
                                            <span class="text-danger">حذف</span></a>
                                        <a href="#" class="dropdown-item" data-toggle="modal"
                                            data-target="#modals-edit-{{ $class->id }}">
                                            <span>تعديل</span></a>
                                        <a href="{{ route('class.students', $class->id) }}" class="dropdown-item">
                                            <span>طلاب الصف</span></a>
                                    </div>
                                </div>

                                <!-- Modal to delete class starts-->
                                <div class="modal fade" id="modals-delete-{{ $class->id }}">
                                    <div class="modal-dialog">
                                        <form class="add-new-user modal-content pt-0"
                                            action="{{ route('classes.destroy', $class->id) }}" method="POST">
                                            @csrf
                                            {{ method_field('DELETE') }}
                                            <div class="modal-header mb-1">
                                                <h5 class="modal-title" id="exampleModalLabel">حذف الصف</h5>
                                            </div>
                                            <div class="modal-body flex-grow-1">
                                                <h4>هل تريد حذف الصف؟</h4>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-danger mr-1 data-submit">حذف</button>
                                                <button type="reset" class="btn btn-outline-secondary"
                                                    data-dismiss="modal">الغاء
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <!-- Modal to delete class Ends-->

                                <!-- Modal to edit class starts-->
                                <div class="modal fade" id="modals-edit-{{ $class->id }}">
                                    <div class="modal-dialog">
                                        <form class="create-new-nature modal-content pt-0"
                                            action="{{ route('classes.update', $class->id) }}" method="POST">
                                            @csrf
                                            {{ method_field('PUT') }}
                                            <div class="modal-header mb-1">
                                                <h5 class="modal-title" id="exampleModalLabel">تعديل الصف</h5>
                                            </div>
                                            <div class="modal-body flex-grow-1">
                                                <div class="form-group">
                                                    <label for="name">اسم الصف</label>
                                                    <input type="text" class="form-control" value="{{ $class->name }}"
                                                        name="name" id="name" required>
                                                </div>

                                                <div class="form-group">
                                                    <label class="form-label">{{ __('المرحلة') }}</label>
                                                    <select name="stage" id="association_search" class="form-control"
                                                        required>
                                                        <option value="">اختار مرحلة</option>
                                                        @foreach ($stages as $da)
                                                            <option value="{{ $da->id }}"
                                                                @if ($da->id == $class->stage_id) selected @endif>
                                                                {{ $da->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label class="form-label">{{ __('مربي الصف') }}</label>
                                                    <select class="select2 form-control" id="user_{{ $class->id }}"
                                                        aria-describedby="user_{{ $class->id }}" name="user">
                                                        <option value="">اختار معلم</option>
                                                        @forelse ($users as $item)
                                                            <option value="{{ $item->id }}"
                                                                @if ($class->user_id == $item->id) selected @endif>
                                                                {{ $item->name }}</option>
                                                        @empty
                                                            <option value="">لا يوجد معلمين متاحين</option>
                                                        @endforelse
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label for="age">متوسط اعمار الصف</label>
                                                    <input type="text" class="form-control" value="{{ $class->age }}"
                                                        name="age" id="age">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-primary mr-1 data-submit">حفظ</button>
                                                <button type="reset" class="btn btn-outline-secondary"
                                                    data-dismiss="modal">الغاء
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <!-- Modal to edit class Ends-->
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">لا توجد بيانات متاحة</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Modal to add new class starts-->
        <div class="modal fade" id="modals-create">
            <div class="modal-dialog">
                <form class="create-new-nature modal-content pt-0" action="{{ route('classes.store') }}" method="POST">
                    @csrf
                    <div class="modal-header mb-1">
                        <h5 class="modal-title" id="exampleModalLabel">اضافة صف جديد</h5>
                    </div>
                    <div class="modal-body flex-grow-1">
                        <div class="form-group">
                            <label for="name">{{ __('اسم الصف') }}</label>
                            <input type="text" class="form-control" name="name" id="name" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">{{ __('المرحلة') }}</label>
                            <select name="stage" id="association_search" class="form-control" required>
                                <option value="">اختار مرحلة</option>
                                @foreach ($stages as $da)
                                    <option value="{{ $da->id }}">{{ $da->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">{{ __('مربي الصف') }}</label>
                            <select class="select2 form-control" id="user_c" aria-describedby="user_c"
                                name="user">
                                <option value="">اختار معلم</option>
                                @forelse ($users as $item)
                                    <option value="{{ $item->id }}" @if (old('user') == $item->id) selected @endif>
                                        {{ $item->name }}</option>
                                @empty
                                    <option value="">لا يوجد معلمين متاحين</option>
                                @endforelse
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="age">متوسط اعمار الصف</label>
                            <input type="text" class="form-control" name="age" id="age">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary mr-1 data-submit">حفظ</button>
                        <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">الغاء</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- Modal to add new class Ends-->
    </div>
@endsection