@extends('layouts.contentLayoutMaster')

@php
$breadcrumbs = [[['link' => route('users.index'), 'name' => "حسابات المستخدمين"], [ 'name' => "تسجيل مستخدم جديد"]],['title' => 'تسجيل مستخدم']];
@endphp
@section('title', 'اضافة مستخدم')

@section('vendor-style')
<link rel="stylesheet" href="{{asset(mix('vendors/css/forms/select/select2.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/katex.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/monokai-sublime.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/quill.snow.css'))}}">
@endsection

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <style>
        .phone-input-wrapper {
            position: relative;
        }
        .phone-input-wrapper input {
            width: 85%;
        }
        .phone-input-wrapper input {
            width: 100%;
        }
        .phone-input-wrapper .hint-text {
            /* *برجاء كتابة ”966” في حالة استخدام رقم الجوال */
            position: absolute;
            height: 22px;
            /* Small text */
            font-family: 'Cairo';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 22px;
            display: flex;
            align-items: center;
            text-align: right;
            color: #95959D;
        }
        .phone-input-wrapper .prefix {
            position: absolute;
            top: 50%;
            right: 80%;
        }
        .phone-input-wrapper .input-group{
            width: 80%;
        }
    </style>
@endsection


@section('content')

@component('components.forms.formCard',['title' => 'اضافة مستخدم جديد' ])
    {{ Form::open(['route' => 'users.store','method'=> 'POST' , 'class' => 'row','id' => 'createUserForm']) }}
    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
                <div class="alert-body">

                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
    <x-ui.divider>معلومات المستخدم</x-ui.divider>
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input icon="user" label="الاسم الاول" name="first_name" placeholder="ادخل الاسم الاول" data-msg="الاسم الاول بشكل صحيح" />
        </div>

        <div class="col-md">
            <x-inputs.text.Input label="الاسم الاخير" icon="user" name="last_name" placeholder="ادخل الاسم الاخير" data-msg="الاسم الاخير بشكل صحيح" />
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input type="email" icon="mail" label="البريد الألكتروني" name="email" placeholder="ادخل البريد الألكتروني" data-msg="رجاء ادخال البريد الألكتروني بشكل صحيح" />
        </div>

        <div class="col-md phone-input-wrapper">
            <x-inputs.text.Input label="رقم الهاتف" id="phone" icon="smartphone" name="phone" class="phone-input" placeholder="ادخل رقم الهاتف بالصيغة الدولية" data-msg="ادخل رقم الهاتف بشكل صحيح" />
            <span class="prefix">966+</span>
        </div>
    </div>

    <div class="row mb-1">
        <div class="col-md-6">
            <x-inputs.select.generic label="الدولة" name="country_id" data-placeholder="اختر الدولة" data-msg="رجاء اختيار الدولة" :options="getCountries()" class="select2" />
        </div>
    </div>
    <x-ui.divider>كلمة المرور</x-ui.divider>

        <div class="row mb-1">
            <div class="col-6">
                <x-inputs.password  name="password" label="كلمة المرور" />
            </div>

            <div class="col-6">
                <x-inputs.password  name="password_confirmation" label="تاكيد كلمة المرور" />
            </div>
        </div>

        <div class="row mb-1 mt-1">
            <div class="col-4">
                <label class="form-label mr-1" for="isAdmin">عضوية الأدارة ؟</label>
                <x-inputs.checkbox :checked="old('isAdmin')" onchange="togglegStutus(this)" name="isAdmin">انشاء حساب مدير</x-inpurs.checkbox>
            </div>

            <div class="col-4">
                <label class="form-label mr-1" for="isGuardian">عضوية ولي امر ؟</label>
                <x-inputs.checkbox :checked="old('isGuardian')" onchange="togglegStutus(this)" name="isGuardian"> انشاء حساب ولي امر</x-inpurs.checkbox>
            </div>

            <div class="col-4">
                <label class="form-label mr-1" for="isTeacher">عضوية معلم ؟</label>
                <x-inputs.checkbox :checked="old('isTeacher')" onchange="togglegStutus(this)" name="isTeacher"> انشاء حساب معلم</x-inpurs.checkbox>
            </div>
        </div>

        <div id="isAdminDiv">
            <x-ui.divider color="danger">معلومات عضوية مدير</x-ui.divider>

                <div class="row mb-1">
                    <div class="col-md">
                        <x-inputs.text.Input :required="false"  icon="mail" label="المسمي الوظيفي" class="" name="job_title" placeholder="ادخل المسمي الوظيفي" data-msg="رجاء ادخال المسمي الوظيفي بشكل صحيح" />
                    </div>

                    <div class="col-md">
                        <x-inputs.select.generic :required="false"  label="الأدوار" name="roles[]" data-placeholder="اختر الدور" data-msg="رجاء اختيار الدور" :options="getRoles()" class="select2 " multiple />
                    </div>
                </div>

                <div class="row mb-1">
                    <div class="col-4">
                        <label class="form-label mr-1" for="admin_active">حالة عضوية المدير</label>
                        <x-inputs.checkbox :checked="old('admin_active')" name="admin_active">مفعل</x-inpurs.checkbox>
                    </div>
                </div>
        </div>

        <div id="isGuardianDiv">
            <x-ui.divider>معلومات عضوية ولي الامر</x-ui.divider>

                <div class="row mb-1">
                    <div class="col-md">
                        <x-inputs.select.generic label="الدولة" name="nationality_id" data-placeholder="اختر الدولة" data-msg="رجاء اختيار الدولة" :options="App\Models\Country::countries()" />
                    </div>

                    <div class="col-md">
                        <x-inputs.text.Input :required="false" icon="file-text" label="رقم الهوية" name="national_id" placeholder="ادخل رقم الهوية" data-msg="رجاء ادخال رقم الهوية بشكل صحيح" />
                    </div>

                    <div class="col-md">
                        <x-inputs.text.Input :required="false" icon="map-pin" label="عنوان الاقامة" name="address" placeholder="ادخل عنوان الاقامة" data-msg="رجاء اسم ادخال عنوان الاقامة بشكل صحيح" />
                    </div>
                </div>

                <div class="row mb-1">
                    <div class="col-md">
                        <x-inputs.text.Input :required="false" label="مدينة الاقامة" icon="map" name="city_name" placeholder="ادخل مدينة الاقامة" data-msg="ادخل مدينة الاقامة بشكل صحيح" />
                    </div>
                    <div class="col-md">
                        <x-inputs.select.generic :required="false" label="فئة ولي الأمر" name="category_id"  data-placeholder="اختر فئة ولي الأمر" data-msg="رجاء اختيار فئة ولي الأمر" :options="$roles" class="select2" :options="App\Models\Category::categories()" />
                    </div>
                    <div class="col-md">
                        <label class="form-label mr-1" for="guardian_active">حالة عضوية ولي الامر</label>
                        <x-inputs.checkbox :checked="old('guardian_active')" name="guardian_active">مفعل</x-inpurs.checkbox>
                    </div>
                </div>
        </div>

        <div id="isTeacherDiv">
            <x-ui.divider color="warning">معلومات عضوية المعلم</x-ui.divider>

                <div class="row mb-1">
                    <div class="col-4">
                        <label class="form-label mr-1" for="teacher_active">حالة عضوية المعلم</label>
                        <x-inputs.checkbox :required="false" :checked="old('teacher_active')" name="teacher_active">مفعل</x-inpurs.checkbox>
                    </div>
                </div>
        </div>

        <div class="col-12 text-center mt-2">
            <x-inputs.submit>تسجيل الحساب</x-inputs.submit>
            <x-inputs.link route="users.index">عودة</x-inputs.link>
        </div>

        {!! Form::close() !!}

        @endcomponent
        @endsection

        @section('vendor-script')
        <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
        <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
        @endsection

        @section('page-script')
        <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
        <script>
            function togglegStutus(e) {
                let div = document.getElementById(e.id + 'Div');
                let admin=document.getElementById('isAdmin');
                let guardian=document.getElementById('isGuardian');


                // const inputs = div.getElementsByClassName('required-on-checked')


                // for (const key in inputs) {
                //     if (e.checked) {
                //         inputs[key].required = true;
                //     } else {
                //         inputs[key].required = false;
                //     }
                // }
                if(admin.checked){

                    $("input[name=job_title]").attr("disabled", false);

                }else{
                    $("input[name=job_title]").attr("disabled", true);

                }

                if(guardian.checked){
                    $("input[name=national_id]").attr("disabled", false);
                    $("input[name=city_name]").attr("disabled", false);
                    $("input[name=address]").attr("disabled", false);


                }else{
                    $("input[name=national_id]").attr("disabled", true);
                    $("input[name=city_name]").attr("disabled", true);
                    $("input[name=address]").attr("disabled", true);
                }

                div.style = !e.checked ? 'display:none;' : '';

            }

            togglegStutus(document.getElementById('isAdmin'));
            togglegStutus(document.getElementById('isGuardian'));
            togglegStutus(document.getElementById('isTeacher'));
        </script>
        @endsection