@include('site.controllers.header')

<div class="setting-account">
    <div class="container">
        <div class="setting-title text-center">
            <p class="p-5"><a href="{{route('edit-account')}}" class="bordered-btn"><i class="icon-options px-5"></i>إعدادات
                    الحساب</a></p>
            <!-- <p class="p-5"> <a href="#conversation" data-toggle="modal" data-target="#conversation" class="bordered-btn">تغيير ميعاد المحادثه</a></p> -->

            <img src="{{$user->image}}" alt="">
            <h4><strong>{{$user->fullname}}</strong></h4>
            <ul>
                <li class="color-gray"><i class="icon-person px-5"></i>{{$user->job_title}}</li>
                <li class="color-gray"><i class="icon-work px-5"></i>باحث عن عمل</li>
                <li class="color-gray"><i class="icon-pin px-5"></i>{{$user->city->name}}</li>
            </ul>
        </div>

        <div class="tab-setting">
            <ul class="nav nav-pills main">
                <li><a data-toggle="pill" href="#menu1"><i class="icon-person px-5"></i>الملف الشخصى</a></li>
                <li class="active"><a data-toggle="pill" href="#menu2"><i class="icon-ads px-5"></i>السيرة الذاتية </a>
                </li>
                <li><a data-toggle="pill" href="#menu3"><i class="icon-mortarboard px-5"></i>المؤهل العلمى</a></li>
            </ul>

            <div class="row">
                <div class="col-md-8 p-0">
                    <div class="tab-content">
                        <div id="menu1" class="tab-pane fade">
                            <div class="personal-doc">
                                <h4 class="my-0">الملف الشخصى</h4>
                            </div>
                            <ul class="lists-table">
                                <div class="row">
                                    <div class="col-sm-6 st">
                                        <li>العمر : <span>  {{$user->age}}  عام </span></li>
                                    </div>

                                    <div class="col-sm-6 st">
                                        <li>الخبرة الشخصية :
                                            <span>{{$user->experiences  ? $user->experiences :  " لا يوجد "}}</span>
                                        </li>
                                    </div>

                                    <div class="col-sm-6 st">
                                        <li>الحالة الإجتماعية :
                                            <span>{{UserSocialStatus()}}</span>
                                        </li>
                                    </div>
                                    <div class="col-sm-6 st">
                                        <li>الموقع الشخصي :
                                            <span>{{$user->facebook ? $user->facebook : 'لا يوجد'}}</span>
                                        </li>
                                    </div>
                                    <div class="col-sm-6 st">
                                        <li>الإعالة :
                                            <span>{{$worker->children ? $worker->children : 'لا يوجد'}} فرد </span>
                                        </li>
                                    </div>
                                    <div class="col-sm-6 st">
                                        <li>الرخصة :
                                            <span>{{ ($worker->licence  == 'true') ? " يوجد " : "لا يوجد"  }}  </span>
                                        </li>
                                    </div>
                                    <div class="col-sm-6 st">
                                        <li>نوع الرخصة :
                                            <span>{{ $worker->licence_type }}  </span>
                                        </li>
                                    </div>


                                </div>
                            </ul>

                        </div>

                        {{--            second section            --}}

                        <div id="menu2" class="tab-pane fade  in active">
                            <div class="personal-doc">
                                <h4 class="my-0">السيرة الذاتية</h4>
                            </div>
                            <div class="mt-20 text-center">
                                <img src="{{asset('site/images/search__cv.svg')}}" alt="">
                                <h4>تعديل سيرة ذاتية</h4>
                                <p>يمكنكم رفع أو إنشاء سيرتكم الذاتية</p>
                                <a href="{{route('edit_cv')}}" class="newlink"><i class="icon-ads px-5"></i>سيرتي
                                    الذاتية</a>




                                <a href="#upload_cv" data-toggle="modal"
                                   data-target="#upload_cv"
                                   class="bordered-btn ">

                                    رفع سيرة ذاتية
                                </a>

                                <div class="modal fade text-center" id="upload_cv" role="dialog">
                                    <div class="modal-dialog">
                                        <!-- Modal content-->
                                        <div class="modal-content p-0">
                                            <div class="modal-header p-0">
                                                <section class="global-head global-head__no-border text-center mt-0 p-20">
                                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                    <article>
                                                        <h4><strong>يرجي رفع السيرة الذاتية</strong></h4>
                                                    </article>
                                                </section>
                                            </div>
                                            <div class="modal-body model-style">
                                                <div class="row">
                                                    <form method="post" action="{{route('upload_cv')}}"
                                                          class="global-form" enctype="multipart/form-data">
                                                        {{csrf_field()}}
                                                        <div class="form-horizontal mb-20">
                                                            <div class="form-group mb-0">
                                                                <label class="control-label col-sm-4">
                                                                    <span class="color-gray">عنوان الخبره</span>
                                                                    <span class="is-required">*</span>
                                                                    <br/>
                                                                    <span class="validation-color">ملف السيرة الذاتية</span>
                                                                </label>

                                                                <div class="col-sm-8">
                                                                    <input type="file" class="form-control" required name="file"
                                                                           placeholder="ملف السيرة الذاتية">
                                                                </div>
                                                            </div>
                                                        </div>


                                                        <div class="form-group ">
                                                            <div class="col-sm-6 mt-20">
                                                                <label class="control-label">هذه البيانات مطلوبه ويجب إدخالها
                                                                    (*)</label>
                                                            </div>
                                                            <div class="col-sm-offset-2 col-sm-4 mt-20">
                                                                <button type="submit" style="width:100%" class="btn btn-primary">
                                                                    أضف
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>




                            </div>
                        </div>


                        <div id="menu3" class="tab-pane fade">
                            <div class="personal-doc">
                                <h4 class="my-0">المؤهل العلمى <a class="float-adjust" href="#qualification"
                                                                  data-toggle="modal" data-target="#qualification"> <i
                                            class="fa fa-plus px-5"></i> أضف جديد</a></h4>
                            </div>
                            <div class="body-content">
                                <!-- repeated-section -->


                                @foreach($qualifications as $new_qualification)
                                    <section class="mt-20">
                                        <h5 class="my-0">
                                            <strong class="three-dots">{{$new_qualification->certificate_title}}



                                                <div class="dropdown">
                                                    <button class="btn  dropdown-toggle" type="button"
                                                            data-toggle="dropdown">
                                                        <i class="fa fa-ellipsis-h color-gray"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li>
                                                            <a class=" l-h-25" href="#edit_qualification{{$new_qualification->id}}"
                                                               data-toggle="modal" data-target="#edit_qualification{{$new_qualification->id}}">
                                                                <i class="fa fa-pencil px-5"></i>
                                                                تعديل المؤهل
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#delete_qualification_{{$new_qualification->id}}" data-toggle="modal"
                                                               data-target="#delete_qualification_{{$new_qualification->id}}"
                                                               class="is-favorite l-h-25 ">
                                                                <i class="fa fa-trash px-5"></i>
                                                                حذف المؤهل
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </strong>
                                        </h5>
                                        <span>{{$new_qualification->certificate_univercity}}</span>
                                        <p>{{$new_qualification->from}} - {{$new_qualification->to}}</p>




                                    </section>

                                    <div class="modal fade text-center" id="edit_qualification{{$new_qualification->id}}" role="dialog">
                                        <div class="modal-dialog">
                                            <!-- Modal content-->
                                            <div class="modal-content p-0">
                                                <div class="modal-header p-0">
                                                    <section
                                                        class="global-head global-head__no-border text-center mt-0 p-20">
                                                        <button type="button" class="close" data-dismiss="modal">
                                                            &times;
                                                        </button>
                                                        <article>
                                                            <h4><strong>مؤهل علمى جديد</strong></h4>
                                                            <p>من فضلك أكمل البيانات لاضافة مؤهل علمى جديد </p>
                                                        </article>
                                                    </section>
                                                </div>
                                                <div class="modal-body model-style">
                                                    <div class="row">
                                                        <form method="post"
                                                              action="{{route('update_single_qualification',$new_qualification->id)}}"
                                                              class="global-form">
                                                            {{csrf_field()}}
                                                            <div class="form-horizontal mb-20">
                                                                <div class="form-group mb-0">
                                                                    <label class="control-label col-sm-4">
                                                                        <span class="color-gray">عنوان المؤهل</span>
                                                                        <span class="is-required">*</span>
                                                                        <br/>
                                                                        <span class="validation-color">عنوان المؤهل بالتفصيل</span>
                                                                    </label>

                                                                    <div class="col-sm-8">
                                                                        <input type="text"
                                                                               value="{{$new_qualification->certificate_title}}"
                                                                               name="certificate_title" required
                                                                               class="form-control"
                                                                               placeholder="عنوان المؤهل بالتفصيل">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-horizontal mb-20">
                                                                <div class="form-group">
                                                                    <label class="control-label col-sm-4">
                                                                        <span class="color-gray">مصدر المؤهل</span>
                                                                        <span class="is-required">*</span>
                                                                        <br/>
                                                                        <span
                                                                            class="validation-color">مصدر المؤهل</span>
                                                                    </label>
                                                                    <div class="col-sm-8">
                                                                        <input type="text"
                                                                               value="{{$new_qualification->certificate_univercity}}"
                                                                               required
                                                                               name="certificate_univercity"
                                                                               class="form-control"
                                                                               placeholder="مصدر المؤهل بالتفصيل">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-horizontal mb-20">
                                                                <div class="form-group mb-0">
                                                                    <label class="control-label col-sm-4">
                                                                        <span class="color-gray">فترة المؤهل</span>
                                                                        <span class="is-required">*</span>
                                                                        <br/>
                                                                        <span
                                                                            class="validation-color">فترة المؤهل</span>
                                                                    </label>

                                                                    <div class="col-sm-4">
                                                                        <input type="date"
                                                                               value="{{$new_qualification->from}}"
                                                                               name="from" class="form-control"
                                                                               placeholder="تاريخ البداية">
                                                                    </div>
                                                                    <div class="col-sm-4">
                                                                        <input type="date"
                                                                               value="{{$new_qualification->to}}"
                                                                               name="to" class="form-control"
                                                                               placeholder="تاريخ النهاية">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group ">
                                                                <div class="col-sm-6 mt-20">
                                                                    <label class="control-label">هذه البيانات مطلوبه
                                                                        ويجب إدخالها (*)</label>
                                                                </div>
                                                                <div class="col-sm-offset-2 col-sm-4 mt-20">
                                                                    <button type="submit" style="width:100%"
                                                                            class="btn btn-primary">تعديل
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal fade text-center" id="delete_qualification_{{$new_qualification->id}}" role="dialog">
                                        <div class="modal-dialog">
                                            <!-- Modal content-->
                                            <div class="modal-content delete-modal p-0">
                                                <div class="modal-header p-0">
                                                    <section
                                                        class="global-head global-head__no-border text-center mt-0 p-20">
                                                        <button type="button" class="close" data-dismiss="modal">
                                                            &times;
                                                        </button>
                                                        <article>
                                                            <h4><strong>تاكيد الحذف</strong></h4>
                                                            <p>هل أنت متأكد ؟ </p>
                                                        </article>
                                                    </section>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-sm-6">


                                                            <form method="post"
                                                                  action="{{route('delete_qualification',$new_qualification->id)}}">
                                                                {{csrf_field()}}
                                                                @method('DELETE')
                                                                <button class="delete-btn" type="submit">حذف
                                                                </button>

                                                            </form>

                                                        </div>
                                                        <div class="col-sm-6">
                                                            <button class="withdraw-btn" data-dismiss="modal">
                                                                تراجع
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 p-0">
                    <div class="left-side">
                        <div class="personal-doc">
                            <h4 class="my-0"><i class="icon-ads color-primary px-5"></i> خبراتى الوظيفيه <a
                                    href="#experience" data-toggle="modal" data-target="#experience"> <i
                                        class="fa fa-plus px-5"></i> أضف جديد</a></h4>
                        </div>
                        <div class="body-content">
                            <!-- repeated-section -->
                            @foreach($experiences as $experience)
                                <section class="mt-20">
                                    <h5 class="my-0">
                                        <strong class="three-dots">{{$experience->title}}
                                            <div class="dropdown">
                                                <button class="btn  dropdown-toggle" type="button"
                                                        data-toggle="dropdown">
                                                    <i class="fa fa-ellipsis-h color-gray"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class=" l-h-25" href="#edit_experience{{$experience->id}}" data-toggle="modal"
                                                           data-target="#edit_experience{{$experience->id}}">
                                                            <i class="fa fa-pencil px-5"></i>
                                                            تعديل الخبره
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#delete_experience{{$experience->id}}" data-toggle="modal"
                                                           data-target="#delete_experience{{$experience->id}}" class="is-favorite l-h-25 ">
                                                            <i class="fa fa-trash px-5"></i>
                                                            حذف الخبره
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </strong>
                                    </h5>
                                    <p class="job-date">{{$experience->experience_place}}</p>
                                    <p class="job-date">{{$experience->from}} - {{$experience->to}}</p>
                                </section>
                                {{--                  update modal      --}}
                                <div class="modal fade text-center" id="edit_experience{{$experience->id}}" role="dialog">
                                    <div class="modal-dialog">
                                        <!-- Modal content-->
                                        <div class="modal-content p-0">
                                            <div class="modal-header p-0">
                                                <section
                                                    class="global-head global-head__no-border text-center mt-0 p-20">
                                                    <button type="button" class="close" data-dismiss="modal">&times;
                                                    </button>
                                                    <article>
                                                        <h4><strong>تعديل بيانات الخبرة</strong></h4>
                                                        <p>من فضلك أكمل البيانات لاضافة خبراتك الوظيفيه الجديده </p>
                                                    </article>
                                                </section>
                                            </div>
                                            <div class="modal-body model-style">
                                                <div class="row">

                                                    <form method="post"
                                                          action="{{route('update_single_experience',$experience->id)}}"
                                                          class="global-form">
                                                        {{csrf_field()}}
                                                        <div class="form-horizontal mb-20">
                                                            <div class="form-group mb-0">
                                                                <label class="control-label col-sm-4">
                                                                    <span class="color-gray">عنوان الخبره</span>
                                                                    <span class="is-required">*</span>
                                                                    <br/>
                                                                    <span
                                                                        class="validation-color">عنوان الخبره بالتفصيل</span>
                                                                </label>

                                                                <div class="col-sm-8">
                                                                    <input type="text" value="{{$experience->title}}"
                                                                           class="form-control" required name="title"
                                                                           placeholder="عنوان الخبره بالتفصيل">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-horizontal mb-20">
                                                            <div class="form-group">
                                                                <label class="control-label col-sm-4">
                                                                    <span class="color-gray">مصدر الخبره</span>
                                                                    <span class="is-required">*</span>
                                                                    <br/>
                                                                    <span class="validation-color">مصدر الخبره</span>
                                                                </label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" required
                                                                           name="experience_place"
                                                                           value="{{$experience->experience_place}}"
                                                                           placeholder="مصدر الخبره بالتفصيل">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-horizontal mb-20">
                                                            <div class="form-group mb-0">
                                                                <label class="control-label col-sm-4">
                                                                    <span class="color-gray">فترة الخبرة</span>
                                                                    <span class="is-required">*</span>
                                                                    <br/>
                                                                    <span class="validation-color">فترة الخبرة</span>
                                                                </label>

                                                                <div class="col-sm-4">
                                                                    <input type="date" name="from"
                                                                           value="{{$experience->from}}"
                                                                           class="form-control"
                                                                           placeholder="تاريخ البداية">
                                                                </div>
                                                                <div class="col-sm-4">
                                                                    <input type="date" name="to"
                                                                           value="{{$experience->to}}"
                                                                           class="form-control"
                                                                           placeholder="تاريخ النهاية">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group ">
                                                            <div class="col-sm-6 mt-20">
                                                                <label class="control-label">هذه البيانات مطلوبه ويجب
                                                                    إدخالها (*)</label>
                                                            </div>
                                                            <div class="col-sm-offset-2 col-sm-4 mt-20">
                                                                <button type="submit" style="width:100%"
                                                                        class="btn btn-primary">أضف
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- DELETE MODAl --}}

                            <!-- delete modal -->
                                <div class="modal fade text-center" id="delete_experience{{$experience->id}}" role="dialog">
                                    <div class="modal-dialog">
                                        <!-- Modal content-->
                                        <div class="modal-content delete-modal p-0">
                                            <div class="modal-header p-0">
                                                <section
                                                    class="global-head global-head__no-border text-center mt-0 p-20">
                                                    <button type="button" class="close" data-dismiss="modal">&times;
                                                    </button>
                                                    <article>
                                                        <h4><strong>تاكيد الحذف</strong></h4>
                                                        <p>هل أنت متأكد ؟ </p>
                                                    </article>
                                                </section>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-sm-6">


                                                        <form method="post"
                                                              action="{{route('delete_experience',$experience->id)}}">
                                                            {{csrf_field()}}
                                                            @method('DELETE')
                                                            <button class="delete-btn" type="submit">حذف</button>

                                                        </form>

                                                    </div>
                                                    <div class="col-sm-6">
                                                        <button class="withdraw-btn" data-dismiss="modal">تراجع</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @endforeach

                        </div>
                    </div>

                    <div class="left-side">
                        <div class="personal-doc">
                            <h4 class="my-0"><i class="icon-mortarboard color-primary px-5"></i> مهاراتى <a
                                    href="#skills" data-toggle="modal" data-target="#skills"> <i
                                        class="fa fa-plus px-5"></i> أضف جديد</a></h4>
                        </div>
                        <div class="body-content">
                            <ul>

                                @foreach($skills as $skill)
                                    <li class="span-style">
                                        <span><a href="{{route('delete_skill',$skill->id)}}"
                                                 class="close-item remove">x</a>{{$skill->title}}</span>
                                    </li>
                                @endforeach

                            </ul>
                        </div>
                    </div>


                    <!-- qualification modal -->
                    <div class="modal fade text-center" id="qualification" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content p-0">
                                <div class="modal-header p-0">
                                    <section class="global-head global-head__no-border text-center mt-0 p-20">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <article>
                                            <h4><strong>مؤهل علمى جديد</strong></h4>
                                            <p>من فضلك أكمل البيانات لاضافة مؤهل علمى جديد </p>
                                        </article>
                                    </section>
                                </div>
                                <div class="modal-body model-style">
                                    <div class="row">
                                        <form method="post" action="{{route('add_new_qualification')}}"
                                              class="global-form">
                                            {{csrf_field()}}
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">عنوان المؤهل</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">عنوان المؤهل بالتفصيل</span>
                                                    </label>

                                                    <div class="col-sm-8">
                                                        <input type="text" name="certificate_title" required
                                                               class="form-control" placeholder="عنوان المؤهل بالتفصيل">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">مصدر المؤهل</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">مصدر المؤهل</span>
                                                    </label>
                                                    <div class="col-sm-8">
                                                        <input type="text" required name="certificate_univercity"
                                                               class="form-control" placeholder="مصدر المؤهل بالتفصيل">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">فترة المؤهل</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">فترة المؤهل</span>
                                                    </label>

                                                    <div class="col-sm-4">
                                                        <input type="date" name="from" class="form-control"
                                                               placeholder="تاريخ البداية">
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <input type="date" name="to" class="form-control"
                                                               placeholder="تاريخ النهاية">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group ">
                                                <div class="col-sm-6 mt-20">
                                                    <label class="control-label">هذه البيانات مطلوبه ويجب إدخالها
                                                        (*)</label>
                                                </div>
                                                <div class="col-sm-offset-2 col-sm-4 mt-20">
                                                    <button type="submit" style="width:100%" class="btn btn-primary">
                                                        أضف
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- experience modal  CREATE NEW EXPERIENCE -->


                    <div class="modal fade text-center" id="experience" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content p-0">
                                <div class="modal-header p-0">
                                    <section class="global-head global-head__no-border text-center mt-0 p-20">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <article>
                                            <h4><strong>خبراتى الوظيفيه الجديده</strong></h4>
                                            <p>من فضلك أكمل البيانات لاضافة خبراتك الوظيفيه الجديده </p>
                                        </article>
                                    </section>
                                </div>
                                <div class="modal-body model-style">
                                    <div class="row">
                                        <form method="post" action="{{route('add_new_experience')}}"
                                              class="global-form">
                                            {{csrf_field()}}
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">عنوان الخبره</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">عنوان الخبره بالتفصيل</span>
                                                    </label>

                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" required name="title"
                                                               placeholder="عنوان الخبره بالتفصيل">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">مصدر الخبره</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">مصدر الخبره</span>
                                                    </label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" required
                                                               name="experience_place"
                                                               placeholder="مصدر الخبره بالتفصيل">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">فترة الخبرة</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">فترة الخبرة</span>
                                                    </label>

                                                    <div class="col-sm-4">
                                                        <input type="date" name="from" class="form-control"
                                                               placeholder="تاريخ البداية">
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <input type="date" name="to" class="form-control"
                                                               placeholder="تاريخ النهاية">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group ">
                                                <div class="col-sm-6 mt-20">
                                                    <label class="control-label">هذه البيانات مطلوبه ويجب إدخالها
                                                        (*)</label>
                                                </div>
                                                <div class="col-sm-offset-2 col-sm-4 mt-20">
                                                    <button type="submit" style="width:100%" class="btn btn-primary">
                                                        أضف
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- skills modal -->
                    <div class="modal fade text-center" id="skills" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content p-0">
                                <div class="modal-header p-0">
                                    <section class="global-head global-head__no-border text-center mt-0 p-20">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <article>
                                            <h4><strong>مهاره جديده</strong></h4>
                                            <p>من فضلك أكمل البيانات لاضافة مهاره جديده </p>
                                        </article>
                                    </section>
                                </div>
                                <div class="modal-body model-style">
                                    <div class="row">
                                        <form method="post" action="{{route('add_new_skill')}}" class="global-form">
                                            {{csrf_field()}}
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">عنوان المهاره</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">عنوان المهاره بالتفصيل</span>
                                                    </label>

                                                    <div class="col-sm-8">
                                                        <input name="title" type="text" class="form-control"
                                                               placeholder="عنوان المهاره بالتفصيل">
                                                    </div>
                                                </div>
                                                <hr>
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4">
                                                        <span class="color-gray">تفاصيل المهاره</span>
                                                        <span class="is-required">*</span>
                                                        <br/>
                                                        <span class="validation-color">تفاصيل المهاره بالتفصيل</span>
                                                    </label>

                                                    <div class="col-sm-8">
                                                        <input name="details" required type="text" class="form-control"
                                                               placeholder="تفاصيل المهاره بالتفصيل">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group ">
                                                <div class="col-sm-6 mt-20">
                                                    <label class="control-label">هذه البيانات مطلوبه ويجب إدخالها
                                                        (*)</label>
                                                </div>
                                                <div class="col-sm-offset-2 col-sm-4 mt-20">
                                                    <button type="submit" style="width:100%" class="btn btn-primary">
                                                        أضف
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- delete modal -->
                    <div class="modal fade text-center" id="delete" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content delete-modal p-0">
                                <div class="modal-header p-0">
                                    <section class="global-head global-head__no-border text-center mt-0 p-20">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <article>
                                            <h4><strong>تاكيد الحذف</strong></h4>
                                            <p>هل أنت متأكد ؟ </p>
                                        </article>
                                    </section>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <button class="delete-btn">حذف</button>
                                        </div>
                                        <div class="col-sm-6">
                                            <button class="withdraw-btn">تراجع</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Conversation Date -->
                    <!-- <div class="modal fade text-center" id="conversation" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content p-0">
                                <div class="modal-header p-0">
                                    <section class="global-head global-head__no-border text-center mt-0 p-20">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <article>
                                            <h4><strong>تحديد موعد المقابله</strong></h4>
                                            <p>من فضلك أكمل البيانات للوصول للوظيفه المرغوبه   </p>
                                        </article>
                                    </section>
                                </div>
                                <div class="modal-body model-style">
                                    <div class="row">
                                        <form class="global-form">
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4" >
                                                        <span class="color-gray">ميعاد المقابله</span>
                                                        <span class="is-required">*</span>
                                                        <br />
                                                        <span class="validation-color">ميعاد المقابله </span>
                                                    </label>

                                                    <div class="col-sm-8">
                                                        <input type="date" class="form-control"  placeholder="ميعاد المقابله " >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-horizontal mb-20">
                                                <div class="form-group mb-0">
                                                    <label class="control-label col-sm-4" >
                                                        <span class="color-gray">نص وصفى</span>
                                                        <span class="is-required">*</span>
                                                        <br />
                                                        <span class="validation-color">نص وصفى </span>
                                                    </label>

                                                    <div class="col-sm-8">
                                                        <textarea name="" id="" cols="10" rows="5" placeholder="نص وصفى "></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group ">
                                                <div class="col-sm-6 mt-20">
                                                    <label class="control-label" >هذه البيانات مطلوبه ويجب إدخالها (*)</label>
                                                </div>
                                                <div class="col-sm-offset-2 col-sm-4 mt-20">
                                                <button type="submit" style="width:100%" class="btn btn-primary">حفظ</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

    </div>
</div>
@include('site.controllers.footer')