@extends('layout.app')
@section('title')
    {{ __('Add User') }}
@stop

{{-- تضمين CSS الخاص بـ Select2 --}}
@section('css')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css">
    <!-- END: Vendor CSS-->
@stop

@section('content')

    <div class="content-wrapper">
        <div class="content-body">
            <!-- users edit start -->
            <section class="app-user-edit">

                <!-- users edit account form start -->
                <form method="POST" action="{{ route('users.store') }}">
                    @csrf
                    <div class="card">
                        <div class="card-header mb-2">
                            <h4 class="card-title">{{ __('Add User') }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {{-- User Name --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="name" class="form-label">{{ __('Name') }}</label>
                                        <input type="text" class="form-control" id="name" name="name"
                                            value="{{ old('name') }}" required autofocus>
                                    </div>
                                </div>
                                {{-- End User Name --}}

                                {{-- User Email --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="email" class="form-label">{{ __('Email') }}</label>
                                        <input id="email" class="form-control" type="email" name="email"
                                            value="{{ old('email') }}" required>
                                    </div>
                                </div>
                                {{-- End User Email --}}

                                {{-- User Role (Hidden) --}}
                                <div class="col-lg-6 col-md-6 col-sm-12" style="display: none;">
                                    <div class="form-group">
                                        <label for="user_name" class="form-label">صلاحية المستخدم</label>
                                        <select id="user_name" class="form-control" name="user_name" required>
                                            @if (auth()->user()->user_name == 'admin')
                                                <option value="admin" {{ old('user_name') == 'admin' ? 'selected' : '' }}>
                                                    أدمن
                                                </option>
                                            @else
                                                <option value="member" {{ old('user_name') == 'member' ? 'selected' : '' }}>
                                                    عضو
                                                </option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                {{-- End User Role --}}

                                {{-- User Phone Number --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="phone" class="form-label">{{ __('Mobile Number') }}</label>
                                        <input type="text" id="phone" name="phone" value="{{ old('phone') }}"
                                            class="form-control" required autocomplete="tel">
                                    </div>
                                </div>
                                {{-- End Phone Number --}}

                                {{-- User Password --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="password" class="form-label">{{ __('Password') }}</label>
                                        <input class="form-control" type="password" name="password" id="password" required
                                            autocomplete="new-password">
                                    </div>
                                </div>
                                {{-- End User Password --}}

                                {{-- Password Confirmation --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="password_confirmation"
                                            class="form-label">{{ __('Confirm Password') }}</label>
                                        <input type="password" id="password_confirmation" class="form-control"
                                            name="password_confirmation" required autocomplete="new-password">
                                    </div>
                                </div>
                                {{-- End Password Confirmation --}}

                                {{-- User School (Hidden) --}}
                                <div class="col-lg-6 col-md-6 col-sm-12" style="display: none;">
                                    <div class="form-group">
                                        <label for="school_id" class="form-label">{{ __('المدرسة') }}</label>
                                        <select name="school_id" id="school_id" class="form-control">
                                            @foreach (App\Models\School::where('id', Auth::user()->school_id)->get() as $school)
                                                <option value="{{ $school->id }}"
                                                    @if ($school->id == old('school_id')) selected @endif>{{ $school->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @if (Auth::user()->user_name == 'admin')
                                    @php
                                        $schools = App\Models\School::get();
                                        $firstSchoolId = $schools->isNotEmpty() ? $schools->first()->id : null;
                                    @endphp
                                    <div class="col-lg-6 col-md-6 col-sm-12" style="display: none;">
                                        <div class="form-group">
                                            <label for="school_id" class="form-label">{{ __('المدرسة') }}</label>
                                            <select name="school_id" id="school_id" class="form-control">
                                                <option value="">{{ __('اختر المدرسة ') }}</option>
                                                @foreach ($schools as $school)
                                                    <option value="{{ $school->id }}"
                                                        @if ($school->id == old('school_id', $firstSchoolId)) selected @endif>
                                                        {{ $school->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                {{-- End User School --}}

                                {{-- User Job Title and Subjects Selection (لغير الأدمن فقط) --}}
                                @if (Auth::user()->user_name != 'admin')
                                    {{-- User Job Title --}}
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label for="job_title_id" class="form-label">{{ __('المسمى الوظيفي') }}</label>
                                            <select name="job_title_id" id="job_title_id" class="form-control select2"
                                                required>
                                                <option value="">{{ __('اختار من الوظائف المتاحة') }}</option>
                                                @foreach (App\Models\JobTitle::get() as $item)
                                                    <option value="{{ $item->id }}"
                                                        data-assignable="{{ $item->assignable_to_subjects ? '1' : '0' }}"
                                                        {{ old('job_title_id') == $item->id ? 'selected' : '' }}>
                                                        {{ $item->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    {{-- End User Job Title --}}

                                    {{-- User Last Qualification --}}
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label for="last_qualification"
                                                class="form-label">{{ __('اَخر مؤهل ') }}</label>
                                            <input type="text" class="form-control" name="last_qualification"
                                                id="last_qualification" value="{{ old('last_qualification') }}" required>
                                        </div>
                                    </div>
                                    {{-- End User Last Qualification --}}

                                    {{-- User Date Qualification --}}
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label for="date_qualification"
                                                class="form-label">{{ __('تاريخ الحصول على اَخر مؤهل') }}</label>
                                            <input type="text" class="form-control hijri-picker"
                                                name="date_qualification" id="date_qualification"
                                                value="{{ old('date_qualification') }}" required>
                                        </div>
                                    </div>
                                    {{-- End User Date Qualification --}}

                                    {{-- User Direct Date --}}
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label for="direct_date"
                                                class="form-label">{{ __('تاريخ المباشرة  بالمدرسة ') }}</label>
                                            <input type="text" class="form-control hijri-picker" name="direct_date"
                                                id="direct_date" value="{{ old('direct_date') }}" required>
                                        </div>
                                    </div>
                                    {{-- End User Direct Date --}}

                                    {{-- User Years of Service --}}
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label for="years_of_service"
                                                class="form-label">{{ __('عدد سنوات الخدمة في المدرسة') }}</label>
                                            <input type="number" class="form-control" name="years_of_service"
                                                id="years_of_service" value="{{ old('years_of_service') }}"
                                                min="0" required>
                                        </div>
                                    </div>
                                    {{-- End User Years of Service --}}

                                    {{-- Subjects Selection (Hidden by default) --}}
                                    <div class="col-lg-12 col-md-12 col-sm-12" id="subjects-selection">
                                        <div class="form-group">
                                            <label for="subjects" class="form-label">{{ __('المواد الدراسية') }}</label>
                                            <select name="subjects[]" id="subjects"
                                                class="form-control select2-multiple" multiple="multiple">
                                                @foreach (App\Models\Subject::all() as $subject)
                                                    <option value="{{ $subject->id }}"
                                                        {{ collect(old('subjects'))->contains($subject->id) ? 'selected' : '' }}>
                                                        {{ $subject->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    {{-- End Subjects Selection --}}
                                @endif
                                {{-- End User Job Title and Subjects Selection --}}

                                {{-- User Status --}}
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="status" class="form-label">{{ __('الحالة') }}</label>
                                        <select name="status" id="status" class="form-control" required>
                                            <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>
                                                {{ __('مفعل') }}
                                            </option>
                                            <option value="2" {{ old('status') == '2' ? 'selected' : '' }}>
                                                {{ __('غير مفعل') }}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                {{-- End User Status --}}

                                {{-- User Type --}}
                                @if (Auth::user()->user_name != 'admin')
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label for="type" class="form-label">{{ __('النوع') }}</label>
                                            <select name="type" id="type" class="form-control" required>
                                                <option value="0" {{ old('type') == '0' ? 'selected' : '' }}>
                                                    {{ __('معلم في المدرسة') }}
                                                </option>
                                                <option value="1" {{ old('type') == '1' ? 'selected' : '' }}>
                                                    {{ __('مششرف تربوي او مدرب من خارج المدرسة') }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                {{-- End User Type --}}
                            </div>
                        </div>
                    </div>

                    {{-- Roles Selection --}}
                    @if (count(App\Models\Role::where('id', '<>', 1)->get()) != 0)
                        <div class="card">
                            <div class="card-header">
                                <h3>{{ __('الصلاحيات') }}</h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @foreach (App\Models\Role::where('id', '<>', 1)->get() as $item)
                                        <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                                            <div class="form-check form-switch">
                                                <input type="checkbox" class="form-check-input" name="role[]"
                                                    value="{{ $item->id }}" id="customSwitch{{ $item->id }}"
                                                    @if (in_array($item->id, old('role') ?? [])) checked @endif>
                                                <label class="form-check-label" for="customSwitch{{ $item->id }}">
                                                    <h6>{{ $item->name }}</h6>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="row mt-4">
                                    <div class="col-lg-12 col-md-12 col-sm-12 text-center">
                                        <button type="submit" class="btn btn-primary">{{ __('Submit') }}</button>
                                        <button type="reset"
                                            class="btn btn-outline-secondary">{{ __('إلغاء') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    {{-- End Roles Selection --}}
                </form>
                <!-- users edit account form ends -->
            </section>
            <!-- users edit ends -->
        </div>
    </div>

@endsection

{{-- تضمين JavaScript الخاص بـ Select2 والتحكم في ظهور الحقل --}}
@section('js')
    <!-- BEGIN: Vendor JS-->
    {{-- تأكد من أن jQuery لم يتم تضمينها مرة أخرى في layout.app --}}
    {{-- إذا كانت موجودة بالفعل في layout.app، قم بإزالة السطر التالي --}}
    {{-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
    <!-- END: Vendor JS-->

    {{-- إذا كانت هناك مكتبات JS أخرى تحتاجها، تأكد من تضمينها هنا --}}

    <script>
        $(document).ready(function() {
            // Initialize Select2 for single select (Job Title)
            $('#job_title_id').select2({
                placeholder: "{{ __('اختار من الوظائف المتاحة') }}",
                allowClear: true
            });

            // Initialize Select2 for multiple select (Subjects)
            $('.select2-multiple').select2({
                placeholder: "{{ __('Select Subjects') }}",
                allowClear: true
            });

            // Function to toggle subjects selection
            function toggleSubjectsSelection() {
                var selectedOption = $('#job_title_id').find('option:selected');
                var isAssignable = selectedOption.data('assignable');
                console.log('Selected Job Title ID:', selectedOption.val(), 'Assignable:', isAssignable); // للتصحيح

                if (isAssignable === '1') { // تأكد من مقارنة كـ string
                    $('#subjects-selection').slideDown();
                } else {
                    $('#subjects-selection').slideUp();
                    $('#subjects').val(null).trigger('change'); // مسح الاختيارات إذا كان الحقل مخفيًا
                }
            }

            // Initial check on page load
            toggleSubjectsSelection();

            // Check on job title change
            $('#job_title_id').on('change', function() {
                toggleSubjectsSelection();
            });
        });
    </script>
@endsection