@if($user->profiles == null)
<div id="personal-info-ajax">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/personal-information.svg")}}' alt="contact-information" class="mr-3">Personal information</h2>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center">
        <div class="empty-info text-center">
            <img src="{{asset('img/personal-info.svg')}}" alt="Personal information">
            <p class="gray mt-3">Add your personal information to help us find your suitable jobs</p>
            <a href="javascript:void(0)" id="" class="btn btn-transparent update-personal">Add</a>
        </div>
    </div>
</div>
@elseif($user->profiles->nationality != null)
<div id="personal-info-ajax">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/personal-information.svg")}}' alt="contact-information" class="mr-3"> Personal information</h2>
        <a href="javascript:void(0)" class="btn btn-transparent btn-sm mb-2 update-personal"><i class="material-icons">edit</i> Update</a>
    </div>
    <form action="">
        <div class="form-body">
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Nationality</label>
                        <p class="display-info">@if($user->profiles){{$user->profiles->nationalities->name}}@endif</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Gender</label>
                        @if($user->profiles->gender == "male")
                        <p class="display-info">Male</p>
                        @else
                        <p class="display-info">Female</p>
                        @endif
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Date Of Birth</label>
                        @if($user->profiles->birth_date)
                        <p class="display-info">{{$user->profiles->birth_date_formatted}}</p>
                        @endif
                    </div>
                </div>

                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Marital Status</label>
                        <p class="display-info">@if($user->profiles->maritalstautses){{$user->profiles->maritalstautses->name}} @else - @endif</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Number of Children</label>
                        <p class="display-info">{{$user->profiles->no_of_children}}</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Origin</label>
                        <p class="display-info">@if($user->profiles->ethnicities){{$user->profiles->ethnicities->name}} @else - @endif</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Driving Licence?</label>
                        <p class="display-info">@if($liscenceList)@foreach($liscenceList as $key => $liscence) {{$liscenceList[$key]}}@if($key != count($liscenceList) - 1), @endif @endforeach @endif</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Own a vehicle?</label>
                        @if($user->profiles->have_vehicle == 1)
                        <p class="display-info">Yes</p>
                        @else
                        <p class="display-info">No</p>
                        @endif
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Own a Motorcycle?</label>
                        @if($user->profiles->have_motorcycle == 1)
                        <p class="display-info">Yes</p>
                        @else
                        <p class="display-info">No</p>
                        @endif
                    </div>
                </div>
                <div class="col-lg-8 col-sm-12">
                    <div class="form-group">
                        <label class="control-label">LinkedIn Profile</label>
                        @if($user->profiles->linkedin_profile)
                        <p class="display-info">{{$user->profiles->linkedin_profile}}</p>
                        @else
                        <p class="display-info">-</p>
                        @endif
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Skype</label>
                        <p class="display-info">@if($user->profiles->skype) {{$user->profiles->skype}} @else - @endif</p>
                    </div>
                </div>
                @if(count($user->languages) > 0)
                <div class="col-lg-12 col-sm-12">
                    <div class="title-wrapper">
                        <h2 class="box-title body-font-size">Language & Proficiency</h2>
                    </div>
                    @foreach($user->languages as $language)
                    <div class="d-flex form-group">
                        <p class="w-25 mt-1">{{ ($language->name == 'English') ? 'English (Default)' : $language->name }}</p>
                        <fieldset class="rating view-only">

                            <input type="radio" id="star5" value="5" disabled @if($language->pivot->rating == 5) checked @endif/>
                            <label class="full" style="pointer-events: none" for="star5" title="Awesome - 5 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="star4" value="4" disabled  @if($language->pivot->rating == 4) checked @endif>
                            <label class="full" style="pointer-events: none" for="star4" title="Pretty good - 4 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="star3"  value="3" disabled  @if($language->pivot->rating == 3) checked @endif>
                            <label class="full" style="pointer-events: none" for="star3" title="Meh - 3 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="star2" value="2" disabled  @if($language->pivot->rating == 2) checked @endif>
                            <label class="full" style="pointer-events: none" for="star2" title="Kinda bad - 2 stars"><i class="material-icons">star</i></label>

                            <input type="radio" id="star1" value="1" disabled @if($language->pivot->rating == 1) checked @endif>
                            <label class="full" style="pointer-events: none" for="star1" title="Sucks big time - 1 star"><i class="material-icons">star</i></label>

                        </fieldset>
                    </div>
                    @endforeach
                </div>
                @endif

            </div>
        </div>
        <!-- <div class="form-action">
            <a href="javascript:void(0)" class="btn btn-transparent update-personal">Update Details</a>
        </div> -->
    </form>

</div>
@else
<div id="personal-info-ajax">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/personal-information.svg")}}' alt="contact-information" class="mr-3">Personal information</h2>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center">
        <div class="empty-info text-center">
            <img src="{{asset('img/personal-info.svg')}}" alt="Personal information">
            <p class="gray mt-3">Add your personal information to help us find your suitable jobs</p>
            <a href="javascript:void(0)" id="" class="btn btn-transparent update-personal">Add</a>
        </div>
    </div>
</div>
@endif


@push('pageModals')
<!-- personal-information Modal -->
<div class="modal fade" id="personal-information">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal body -->
            <div class="modal-body">
                <div class="title-wrapper">
                    <h2 class="box-title">Personal information</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form action="" id="frmmodalpersonal" autocomplete="off">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required select">
                                    <label class="control-label" for="nationality">Nationality</label>
                                    <select class="form-control select-two js-example-placeholder-single" name="nationality" id="nationality" required>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required select">
                                    <label class="control-label" for="gender">Gender</label>
                                    <select class="form-control select-two" name="gender" id="gender" required>
                                        <option value="" hidden="">Select</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required date">
                                    <label class="control-label">Date of Birth</label>
                                    <div class="input-group date">
                                        <input type="text" class="form-control bg-white" data-toggle="birth_date_datepicker" id="birth_date" name="birth_date"
                                        autocomplete="off" readonly required>
                                        <!-- <div class="input-group-addon">
                                            <span class="material-icons">date_range</span>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label" for="linkedin_profile">LinkedIn Profile Link</label>
                                    <input class="form-control" type="url" name="linkedin_profile" id="linkedin_profile" placeholder="LinkedIn Profile Link">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label" for="skype">Skype</label>
                                    <input class="form-control" type="text" name="skype" id="skype" placeholder="Skype">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group select">
                                    <label class="control-label" for="marital_status_id">Marital
                                        Status</label>
                                    <select class="form-control select-two" id="marital_status_id" name="marital_status_id">
                                        @isset($maritalStatusList)
                                            @foreach($maritalStatusList as $status)
                                                <option value="{{ $status->id }}">{{ $status->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group select">
                                    <label class="control-label" for="no_of_children">No. of Children</label>
                                    <select class="form-control select-two" id="no_of_children" name="no_of_children">
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group select">
                                    <label class="control-label" for="ethnicity_id">Origin</label>
                                    <select class="form-control select-two" id="ethnicity_id" name="ethnicity_id">
                                        @isset($ethnicityList)
                                        @foreach ($ethnicityList as $ethinicity)
                                            <option value="{{ $ethinicity->id }}">{{ $ethinicity->name }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="have_driving_liscence">Driving
                                        Licence?</label>
                                    <select class="form-control js-example-basic-multiple select-two" name="have_driving_liscence[]" id="have_driving_liscence" required multiple="multiple">
                                        @isset($liscences)
                                        @foreach($liscences as $key => $liscence)
                                            <option value="{{ $key }}">{{ $liscence }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required select">
                                    <label class="control-label" for="have_vehicle">Owns a Vehicle?</label>
                                    <select class="form-control select-two" id="have_vehicle" name="have_vehicle" required>
                                        <option value="" hidden="">Select</option>
                                        <option value="1">Yes</option>
                                        <option value="0">No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required select">
                                    <label class="control-label" for="have_motorcycle">Owns a Motorcycle?</label>
                                    <select class="form-control select-two" id="have_motorcycle" name="have_motorcycle" required>
                                        <option value="" hidden="">Select</option>
                                        <option value="1">Yes</option>
                                        <option value="0">No</option>
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required select">
                                    <label class="control-label" for="language1">Language 1
                                        Spoken</label>
                                    <select class="form-control select-two js-example-placeholder-single" name="language1" id="language1" required>
                                        <option value="">Select</option>
                                        @isset($languages)
                                        @foreach($languages as $language)
                                            <option value="{{ $language['id'] }}">{{ $language['name'] }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group select">
                                    <label class="control-label" for="language2">Language 2
                                        Spoken</label>
                                    <select class="form-control select-two" name="language2" id="language2">
                                        <option value="">Select</option>
                                        @isset($languages)
                                        @foreach($languages as $language)
                                            <option value="{{ $language['id'] }}">{{ $language['name'] }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group select">
                                    <label class="control-label" for="language3">Language 3
                                        Spoken</label>
                                    <select class="form-control select-two" name="language3" id="language3">
                                        <option value="">Select</option>
                                        @isset($languages)
                                        @foreach($languages as $language)
                                            <option value="{{ $language['id'] }}">{{ $language['name'] }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div> --}}
                            <div class="col-lg-12 col-sm-12 col-xs-12">
                                <div class="table-responsive table-checkable language-rating-table">
                                    <table class="table table-borderless m-0">
                                        <tbody class="addNewLang">
                                            <tr data-id="1">
                                                <td class="border-0">
                                                    <div class="form-group mb-0">
                                                        <label class="control-label d-block" for="marital-status">&nbsp;</label>
                                                        <a href="javascript:void(0)" class="d-block mt-3 text-center addNewLangBtn"><span class="material-icons gray">add</span></a>
                                                    </div>
                                                </td>
                                                <td class="border-0 w-50">
                                                    <div class="form-group btm-arrow select mb-0">
                                                        <label class="control-label" for="language_id_1">Language</label>
                                                        <select class="form-control select-two langIdClass" name="language[0]" id="language_id_1">
                                                            <option value="">Select</option>
                                                            @isset($languages)
                                                            @foreach($languages as $language)
                                                                <option value="{{ $language['id'] }}">{{ $language['name'] }}</option>
                                                            @endforeach
                                                            @endisset
                                                        </select>
                                                    </div>
                                                </td>
                                                <td class="border-0">
                                                    <div class="form-group mb-0 radio-img">
                                                        <label class="control-label d-block" for="marital-status">Proficiency</label>
                                                        <fieldset class="rating view-only single-line-rating">

                                                            <input type="radio" class="langRatingClass validLangRatingClass" value="5" name="langRatings" id="language_5_1" required>
                                                            <label class="full" for="language_5_1" title="Awesome - 5 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="4" name="langRatings" id="language_4_1">
                                                            <label class="full" for="language_4_1" title="Pretty good - 4 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="3" name="langRatings" id="language_3_1">
                                                            <label class="full" for="language_3_1" title="Meh - 3 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="2" name="langRatings" id="language_2_1">
                                                            <label class="full" for="language_2_1" title="Kinda bad - 2 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="1" name="langRatings" id="language_1_1">
                                                            <label class="full" for="language_1_1" title="Sucks big time - 1 star"><i 
                                                                class="material-icons">star</i></label>

                                                        </fieldset>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-action">
                        <input id="update-personalfrm-button" type="submit" class="btn btn-transparent submit" value="Update">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endpush

@push('pageJs')
<script>
    function addNewLanguage() {
        var langLength = $('.addNewLang').children(':last').data('id') + 1
        var langs = '';
        var block = '<tr class="appendedLangRow_'+ langLength +' appendedRow" data-id="'+ langLength +'">\
            <td class="border-0">\
                            <div class="form-group mb-0">\
                                <label class="control-label d-block" for="marital-status">&nbsp;</label>\
                                <a href="javascript:void(0)" data-id="'+ langLength +'" class="d-block mt-3 text-center \
                                    removeAppendedLangBtn"><span class="material-icons gray">close</span></a>\
                            </div>\
                        </td>\
                        <td class="border-0 w-50">\
                            <div class="form-group btm-arrow select mb-0">\
                                <label class="control-label" for="language_id_' + langLength + '"></label>\
                                <select class="form-control select-two langIdClass" name="language[' + langLength + ']" id="language_id_'+ langLength +'">\
                                    @isset($languages)\
                                    @foreach($languages as $language)\
                                    <option value="{{ $language["id"] }}">{{ $language["name"] }}</option>\
                                    @endforeach\
                                    @endisset\
                                    <option value="">Select</option>'+langs+'</select>\
                            </div>\
                        </td>\
                        <td class="border-0">\
                            <div class="form-group mb-0 radio-img">\
                                <label class="control-label d-block" for="marital-status">&nbsp;</label>\
                                <fieldset class="rating view-only single-line-rating">\
                                    <input type="radio" class="langRatingClass validLangRatingClass" value="5" name="langRatings['+ langLength +']" id="language_5_'+ langLength +'" required="required">\
                                    <label class="full" for="language_5_'+ langLength +'" title="Awesome - 5 stars"><i \
                                        class="material-icons">star</i></label>\
                                    <input type="radio" class="langRatingClass" value="4" name="langRatings['+ langLength +']" id="language_4_'+ langLength +'">\
                                    <label class="full" for="language_4_'+ langLength +'" title="Pretty good - 4 stars"><i \
                                        class="material-icons">star</i></label>\
                                    <input type="radio" class="langRatingClass" value="3" name="langRatings['+ langLength +']" id="language_3_'+ langLength +'">\
                                    <label class="full" for="language_3_'+ langLength +'" title="Meh - 3 stars"><i \
                                        class="material-icons">star</i></label>\
                                    <input type="radio" class="langRatingClass" value="2" name="langRatings['+ langLength +']" id="language_2_'+ langLength +'">\
                                    <label class="full" for="language_2_'+ langLength +'" title="Kinda bad - 2 stars"><i \
                                        class="material-icons">star</i></label>\
                                    <input type="radio" class="langRatingClass" value="1" name="langRatings['+ langLength +']" id="language_1_'+ langLength +'">\
                                    <label class="full" for="language_1_'+ langLength +'" title="Sucks big time - 1 star"><i \
                                        class="material-icons">star</i></label>\
                                </fieldset>\
                            </div>\
                        </td>\
                    </tr>';
        $('.addNewLang').append(block);
        
        singleSelcet2InModal("#language_id_" + langLength);
        
        validateLangIdClass();

        var langLength = langLength + 1;

    }

    function singleSelcet2InModal(elementId) {
        $('#frmmodalpersonal' + ' ' + elementId).select2({
            placeholder: "Select",
            allowClear: true,
            dropdownParent: $('#personal-information .modal-content')
        });
    }
</script>
@endpush