@if(count($user->experiences) > 0)
<div id="experience-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/profile-experience.svg")}}' alt="contact-information" class="mr-3">Experience</h2>
        <a href="javascript:void(0)" onclick="openExperienceModal()" class="btn btn-transparent btn-sm mb-2"><i class="material-icons">add</i> Add New</a>
        <p>Please input all the relevant work experience you have had; include your entire work history, promotions within organisations, consultancy work, memberships and advisory roles.</p>
    </div>
    <div class="form-body">
        <ul class="detail-list m-0 p-0">
            <li>
                <div id="employment-box">
                    @include('front.modules.profile.sections.employment')
                </div>
            </li>
            @foreach($user->experiences as $key => $experience)
            <li>
                <h3 class="detail-subtitle bold">{{$experience->positiontitle}}
                    @if($experience->is_current == 1)<a href="javascript:void(0)" onclick="openExperienceModal('{{$experience->id}}')" class="font-green float-sm-right d-block">I am currently working in this position <i class="material-icons font-green">check_box</i></a>@endif
                </h3>
                <p> {{$experience->commancompanies->name}}
                    @if($experience->jobindustryName1)
                    @if($experience->jobindustryName2)
                    @if($experience->jobindustryName3)
                    ({{$experience->jobindustryName1->name}}, {{$experience->jobindustryName2->name}}, {{$experience->jobindustryName3->name}} )
                    @else
                    ({{$experience->jobindustryName1->name}}, {{$experience->jobindustryName2->name}})
                    @endif
                    @else
                    ({{$experience->jobindustryName1->name}})
                    @endif
                    @endif
                </p>
                <p> @if($experience->city){{$experience->city->name}}@if($experience->country), {{$experience->country->name}} @endif @endif </p>
                <p class="related-list"><span>@if($experience->jobCategoryName1) {{$experience->jobCategoryName1->name}} @endif
                        @if($experience->jobCategoryName2), {{$experience->jobCategoryName2->name}} @endif
                        @if($experience->jobCategoryName3), {{$experience->jobCategoryName3->name}} @endif
                    </span>
                    @if($experience->joblevels && $experience->joblevels->name)
                    <span>{{$experience->joblevels->name}}</span>
                    @endif
                    @if($experience->no_reports)
                    <span>@if($experience->no_reports == "251") 250+ Reports @else {{$experience->no_reports}} @endif Reports</span>
                    @endif
                </p>
                @if($experience->start_date)<p class="related-list"><span>{{$experience->start_date_formatted}} -
                        @if($experience->is_current != 1) {{$experience->end_date_formatted}} @else Present @endif</span><span>
                        {{$experience->formatDateDiff($experience->start_date,$experience->end_date)}}</span></p>@endif
                @if(count($experience->achievementSummary) > 0)
                    <p class="related-list">
                        <span></span>
                        @foreach($experience->achievementSummary as $achievement)
                            <span>{{ $achievement->summary }}</span>
                        @endforeach
                    </p>
                @endif
                <div class="action-wrapper">
                    <a href="javascript:void(0)" onclick="openExperienceModal('{{$experience->id}}')"><i class="material-icons">edit</i></a>
                    <a href="javascript:void(0)" watever-data="{{route('front.profile.experience.destroy',['id' => $experience->id])}}" class="remove deleteentity"><i class="material-icons">add</i></a>
                </div>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@else
<div id="experience-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/profile-experience.svg")}}' alt="contact-information" class="mr-3">Experience</h2>
        <p>Please input all the relevant work experience you have had; include your entire work history, promotions within organisations, consultancy work, memberships and advisory roles.</p>
    </div>
    <div class="form-body">
        <ul class="detail-list m-0 p-0">
            <li>
                <div id="employment-box">
                    @include('front.modules.profile.sections.employment')
                </div>
            </li>
        </ul>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center border-top" id="experience-box">
        <div class="empty-info text-center">
            <img src="img/experience.svg" alt="Experience">
            <p class="gray mt-3">Add Experience to serve you the best relevent jobs</p>
            <a href="javascript:void(0)" onclick="openExperienceModal()" class="btn btn-transparent">Add</a>
        </div>
    </div>
</div>
@endif


@push('pageModals')
<div class="modal fade" id="experience-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">Experience</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form method="post" id="frmexperience" autocomplete="off">
                    @csrf
                    <div class="form-body">
                        <div class="row">
                            <div class="col-sm-12 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="positiontitle">Position Title</label>
                                    <input class="form-control" type="text" name="positiontitle" id="positiontitle" placeholder="Position Title" required>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="position_category_id">Job Category</label>
                                    <select class="form-control select-two js-example-basic-multiple" id="position_category_id" name="position_category_id" multiple="multiple" required>
                                        {{-- <option value="" hidden="">Select</option> --}}
                                        @isset($jobCategoryList)
                                            @foreach ($jobCategoryList as $jobCategory)
                                                <option value="{{ $jobCategory->id }}">{{ $jobCategory->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="position_level_id">Position Level</label>
                                    <select class="form-control select-two js-example-basic-single" id="position_level_id" name="position_level_id" required>
                                        <option value="" hidden="">Select</option>
                                        @isset($jobLevelList)
                                            @foreach ($jobLevelList as $jobLevel)
                                                <option value="{{ $jobLevel->id }}">{{ $jobLevel->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="insdustry_id">Company Industry</label>
                                    <select class="form-control js-example-basic-multiple select-two" id="insdustry_id" name="insdustry_id" multiple="multiple">
                                        {{-- <option value="" hidden="">Select</option> --}}
                                        @isset($industryList)
                                            @foreach ($industryList as $industry)
                                                <option value="{{ $industry->id }}">{{ $industry->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="exp_country_id">Country of Company</label>
                                    <select class="form-control select-two js-example-basic-single" id="exp_country_id" name="exp_country_id" required>
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="exp_city_id">City of Company</label>
                                    <select class="form-control js-example-basic-multiple select-two" id="exp_city_id" name="exp_city_id" required disabled>
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group required">
                                    <input type="hidden" id="experience_id" name="experience_id" value="">
                                    <label class="control-label" for="companyname">Company Name</label>
                                    <select class="form-control js-data-example-ajax select-two" id="companyname" name="companyname" required disabled>
                                    </select>
                                </div>
                            </div>


                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div id="currentStatus" class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="is_current" name="is_current" value="1">
                                        <label class="custom-control-label control-label" for="is_current">I am currently working in this position</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group date required">
                                    <label class="control-label">Start Date</label>
                                    <div class="input-group date">
                                        <input type="text" class="form-control expdatepicker bg-white" id="exp_start_date" name="exp_start_date" placeholder="Select" value="" 
                                            autocomplete="off" readonly required>
                                        <div class="input-group-addon">
                                            <span class="material-icons">date_range</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group date required">
                                    <label class="control-label">Completion Date</label>
                                    <div class="input-group date">
                                        <input type="text" class="form-control expdatepicker bg-white" id="exp_end_date" name="exp_end_date" placeholder="Select" value=""
                                            autocomplete="off" readonly>
                                        <div class="input-group-addon">
                                            <span class="material-icons">date_range</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label " for="no_reports">​How many people reported to you in this role?</label>
                                    <select class="form-control js-example-basic-multiple" id="no_reports" name="no_reports">
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-12 col-xs-12">
                                <span class="control-label d-flex">Achievements / Summary</span>
                                <span class="control-label">Tell us a little about your achievements and key responsibilities whilst working in this role</span>
                            </div>
                            <div class="col-sm-12 col-xs-12 achievement_section">
                                <div class="align-items-start d-flex" data-id="1">
                                    <div class="form-group mr-2 w-75">
                                        <label class="control-label d-flex">
                                            <span class="ml-auto gray xs-font-size">(<span class="achievement_summary_1 achievement_summary_counter">0</span>/200 characters)</span>
                                        </label>
                                        <input type="text" class="form-control achievementClass" name="achievement_summary[]" id="achievement_summary_1"
                                            maxlength="200">
                                    </div>
                                    <a href="javascript:void(0)" class="mt-4 px-1 pt-3 pb-2 act text-center"><span 
                                        class="material-icons gray add_achievement" data-id="1">add</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-action">
                        <input id="update-personalfrm-button" type="submit" class="btn btn-transparent frmexperiencesubmit submit" value="Add">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endpush

@push('pageJs')
<script type="text/javascript">
    $('.js-data-example-ajax').on('change', function() {
        // $(this).valid();
    });
    $('.js-data-example-ajax').select2({
        placeholder: 'Select an option',
        minimumInputLength: 3,
        tags: true,
        allowClear: true,
        dropdownParent: $('#experience-information .modal-content'),
        ajax: {
            delay: 250,
            url: '{{route("common.get_search_json")}}',
            dataType: 'json',
            data: function(params) {
                var query = {
                    search: params.term,
                    country: $('#frmexperience #exp_country_id').val(),
                    type: 'company'
                }
                return query;
            },
            processResults: function(response) {
                return {
                    results: response,
                };
            }
        }
    });

    $('#frmexperience #exp_country_id').on('change', function() {
        if($(this).val() != '') {
            $('#frmexperience #exp_city_id').attr('disabled', false);
            $('#frmexperience #companyname').attr('disabled', false);
            $('#frmexperience #exp_city_id').val('').trigger('change');
            $('#frmexperience #companyname').val('').trigger('change');
        } else {
            $('#frmexperience #exp_city_id').attr('disabled', true);
            $('#frmexperience #companyname').attr('disabled', true);
            $('#frmexperience #exp_city_id').val('').trigger('change');
            $('#frmexperience #companyname').val('').trigger('change');
        }
    });

    $('#exp_city_id').on('change', function() {
        $(this).valid();
    });
    $('#exp_city_id').select2({
        placeholder: 'Select an option',
        // minimumInputLength: 2,
        allowClear: true,
        dropdownParent: $('#experience-information .modal-content'),
        ajax: {
            delay: 250,
            url: "{{route('city.ajaxSearchWithPagination')}}",
            dataType: 'json',
            data: function(params) {
                var query = {
                    search: params.term,
                    country_id: $("#exp_country_id").val(),
                    page: params.page || 1
                }
                return query;
            },
            processResults: function(response) {
                return {
                    results: response.data,
                    pagination: {
                        more: (response.next_page_url != null) ? true : false
                    }
                };
            }
        }
    });

    $('#exp_country_id').on('change', function() {
        $(this).valid();
    });
    $('#exp_country_id').select2({
        placeholder: 'Select an option',
        minimumInputLength: 2,
        allowClear: true,
        dropdownParent: $('#experience-information .modal-content'),
        ajax: {
            delay: 250,
            url: "{{route('country.coutryajaxsearch')}}",
            dataType: 'json',
            data: function(params) {
                var query = {
                    search: params.term,
                }
                return query;
            },
            processResults: function(response) {
                return {
                    results: response,
                };
            }
        }
    });
    
</script>
@endpush