@if(count($user->consultant_experiences) > 0)
<div id="experience-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title">Consultancy Experience</h2>
        <a href="javascript:void(0)" onclick="openConsultancyExperienceModal()"
            class="btn btn-transparent btn-sm mb-2"><i class="material-icons">add</i> Add New</a>
        <p>Have you ever worked as Consultant on a previous project? Consultants who have previous consultancy
            experience have a better chance of winning more project – so let us know what experience you have.</p>
    </div>
    <ul class="detail-list m-0 p-0">
        @foreach($user->consultant_experiences as $key => $experience)
        <li>
            <h3 class="detail-subtitle bold">{{$experience->project_title}}
                @if($experience->is_current == 1)<a href="javascript:void(0)"
                    onclick="openConsultancyExperienceModal('{{$experience->id}}')"
                    class="font-green float-sm-right d-block">This project is ongoing<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 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>
            </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($experience->description)
            <p class="related-list">
                <span>{{$experience->description}}</span>
            </p>
            @endif
            <div class="action-wrapper">
                <a href="javascript:void(0)" onclick="openConsultancyExperienceModal('{{$experience->id}}')"><i
                        class="material-icons">edit</i></a>
                <a href="javascript:void(0)"
                    watever-data="{{route('front.profile.consultancy_experience.destroy',['id' => $experience->id])}}"
                    class="remove deleteentity"><i class="material-icons">add</i></a>
            </div>
        </li>
        @endforeach
    </ul>
</div>
@else
<div id="consultancy-experience-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title">Consultancy Experience</h2>
        <a href="javascript:void(0)" onclick="openConsultancyExperienceModal()"
            class="btn btn-transparent btn-sm mb-2"><i class="material-icons">add</i> Add
            New</a>
        <p>Have you ever worked as Consultant on a previous project? Consultants who have previous consultancy
            experience have a better chance of winning more project – so let us know what experience you have.</p>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center" id="experience-box">
        <div class="empty-info text-center">
            <p class="gray mt-3">Add Consultancy Experience to serve you the best relevant jobs</p>
        </div>
    </div>
</div>
@endif

@push('pageModals')
<div class="modal fade" id="consultancy-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">Consultancy Experience</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form method="post" id="frmConsultancyExperience" 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="projectTitle">Project Title</label>
                                    <input class="form-control" type="text" name="projectTitle" id="projectTitle"
                                        placeholder="Project Title" required>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="description">Description</label>
                                    <textarea class="form-control" name="description" id="description"
                                        placeholder="Description" required></textarea>
                                </div>
                            </div>
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="consultancy_position_category_id">Category</label>
                                    <select class="form-control select-two js-example-basic-multiple"
                                        id="consultancy_position_category_id" name="consultancy_position_category_id"
                                        multiple="multiple" required>
                                        @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">
                                    <label class="control-label" for="consultancy_industry_id">Company Industry</label>
                                    <select class="form-control js-example-basic-multiple select-two"
                                        id="consultancy_industry_id" name="consultancy_industry_id" multiple="multiple">
                                        @isset($industryList)
                                        @foreach ($industryList as $industry)
                                        <option value="{{ $industry->id }}">{{ $industry->name }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="consultancy_country_id">Country of Company</label>
                                    <select class="form-control select-two js-example-basic-single"
                                        id="consultancy_country_id" name="consultancy_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="consultancy_city_id">City of Company</label>
                                    <select class="form-control js-example-basic-multiple select-two"
                                        id="consultancy_city_id" name="consultancy_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="consultancy_experience_id" name="consultancy_experience_id"
                                        value="">
                                    <label class="control-label" for="consultancy_companyname">Company Name</label>
                                    <select class="form-control js-data-example-ajax select-two"
                                        id="consultancy_companyname" name="consultancy_companyname" required disabled>
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-4 col-xs-12">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div id="currentProjectStatus" class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="is_current_project"
                                            name="is_current_project" value="1">
                                        <label class="custom-control-label control-label" for="is_current_project">This
                                            project is ongoing</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="consultancy_start_date" name="consultancy_start_date"
                                            placeholder="Select" value="" required autocomplete="off" readonly>
                                        <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="consultancy_end_date"
                                            name="consultancy_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>
                    </div>
                    <div class="form-action">
                        <input id="update-personalfrm-button" type="submit" class="btn btn-transparent fmrConsExprSubmit btnSubmit"
                            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({
        dropdownParent: $('#consultancy-experience-information .modal-content'),
        placeholder: 'Select an option',
        minimumInputLength: 3,
        tags: true,
        allowClear: true,
        ajax: {
            delay: 250,
            url: '{{route("common.get_search_json")}}',
            dataType: 'json',
            data: function(params) {
                var query = {
                    search: params.term,
                    country: $('#frmConsultancyExperience #consultancy_country_id').val(),
                    type: 'company'
                }
                return query;
            },
            processResults: function(response) {
                return {
                    results: response,
                };
            }
        }
    });

    $('#frmConsultancyExperience #consultancy_country_id').on('change', function() {
        if($(this).val() != ''){
            $('#frmConsultancyExperience #consultancy_city_id').attr('disabled', false);
            $('#frmConsultancyExperience #consultancy_companyname').attr('disabled', false);
            $('#frmConsultancyExperience #consultancy_city_id').val('').trigger('change');
            $('#frmConsultancyExperience #consultancy_companyname').val('').trigger('change');
        } else {
            $('#frmConsultancyExperience #consultancy_city_id').attr('disabled', true);
            $('#frmConsultancyExperience #consultancy_companyname').attr('disabled', true);
            $('#frmConsultancyExperience #consultancy_city_id').val('').trigger('change');
            $('#frmConsultancyExperience #consultancy_companyname').val('').trigger('change');
        }
    });

    $('#consultancy_city_id').on('change', function() {
        $(this).valid();
    });
    $('#consultancy_city_id').select2({
        dropdownParent: $('#consultancy-experience-information .modal-content'),
        placeholder: 'Select an option',
        // minimumInputLength: 2,
        allowClear: true,
        ajax: {
            delay: 250,
            url: "{{route('city.ajaxSearchWithPagination')}}",
            dataType: 'json',
            data: function(params) {
                var query = {
                    search: params.term,
                    country_id: $("#consultancy_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
                    }
                };
            }
        }
    });

    $('#consultancy_country_id').on('change', function() {
        $(this).valid();
    });
    $('#consultancy_country_id').select2({
        dropdownParent: $('#consultancy-experience-information .modal-content'),
        placeholder: 'Select an option',
        minimumInputLength: 2,
        allowClear: true,
        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