@if(count($user->educations) > 0)
<div id="education-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title">Education</h2>
        <a href="javascript:void(0)" class="btn btn-transparent btn-sm mb-2" onclick="openEducationModal()"><i
                class="material-icons">add</i> Add
            New</a>
        <p class="w-100 mb-2">Tell us about any awards and certificates you have attained during your career. For
            example; Certified Internal Auditor, Best Employee Award, PMP, CPA or any other</p>
    </div>
    <ul class="detail-list m-0 p-0">
        @foreach($user->educations as $key => $education)
        <li>
            <h3 class="detail-subtitle bold">{{$education->title}} @if($education->qualifications) ({{$education->qualifications->name}}) @endif
                @if($education->currently_studing == 1)<a href="javascript:void(0)"
                    onclick="openEducationModal({{$education->id}})" class="font-green float-sm-right d-block">I am
                    currently studing here<i class="material-icons font-green">check_box</i></a>@endif
            </h3>
            <p class="related-list"><span>@foreach($education->qualificationcategories as $ckey => $category)
                    {{$category->name}}@if($ckey != count($education->qualificationcategories) - 1),@endif
                    @endforeach</span></p>
            <p class="related-list">
                <span>@if($education->institutions){{$education->institutions->name}}@if($education->countries != null),
                    {{$education->countries->name}}@endif
                    @endif</span><span>{{date('F-Y',strtotime($education->start_date))}}
                    - @if($education->currently_studing == 1) Present @else
                    {{date('F-Y',strtotime($education->end_date))}} @endif</span></p>
            <div class="action-wrapper">
                <a href="javascript:void(0)" onclick="openEducationModal({{$education->id}})"><i
                        class="material-icons">edit</i></a>
                <a href="javascript:void(0)"
                    watever-data="{{route('profile.education.destroy',['id' => $education->id])}}?from=consultantRequest"
                    class="remove deleteentity"><i class="material-icons">add</i></a>
            </div>
        </li>
        @endforeach
    </ul>
</div>
@else
<div id="education-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title">Education</h2>
        <a href="javascript:void(0)" class="btn btn-transparent btn-sm mb-2" onclick="openEducationModal()"><i
                class="material-icons">add</i> Add
            New</a>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center">
        <div class="empty-info text-center">
            <p class="gray mt-3">Add Education to serve you the best relevent jobs</p>
        </div>
    </div>
</div>
@endif

@push('pageModals')
<div class="modal fade" id="education-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">Education</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form method="post" id="frmeducation" autocomplete="off">
                    @csrf
                    <div class="form-body">
                        <div class="row">
                            <div class="col-sm-12 col-xs-12">
                                <input type="hidden" value="" id="edu_id" name="edu_id">
                                <div class="form-group required">
                                    <label class="control-label" for="edu_title">Course Title</label>
                                    <input class="form-control" type="text" name="edu_title" id="edu_title"
                                        placeholder="E.g. BSc in Engineering" required>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required ">
                                    <label class="control-label " for="qualcat_id">Qualification Category</label>
                                    <select class="form-control js-example-basic-multiple select-two" id="qualcat_id"
                                        name="qualcat_id" multiple="multiple" required>
                                        @isset($qualificationCategoryList)
                                        @foreach($qualificationCategoryList as $qualification)
                                        <option value="{{ $qualification->id }}">{{ $qualification->name }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required select">
                                    <label class="control-label" for="qualification_id">Level</label>
                                    <select class="form-control select-two" id="qualification_id"
                                        name="qualification_id" required>
                                        @isset($qualificationList)
                                        @foreach($qualificationList as $qualification)
                                        <option value="{{ $qualification->id }}">{{ $qualification->name }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required select">
                                    <label class="control-label" for="inst_country_id">Country of Institution</label>
                                    <select class="form-control select-two" id="inst_country_id" name="inst_country_id"
                                        required>
                                        @isset($countries)
                                        @foreach ($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                        @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="institution_id">Institution</label>
                                    <select class="form-control js-data-example-ajax select-two" id="institution_id"
                                        name="institution_id" required disabled>
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required date">
                                    <label class="control-label">Start Date</label>
                                    <div class="input-group date">
                                        <input type="text" class="form-control bg-white" id="start_date" name="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-6 col-xs-12">
                                <div class="form-group date required">
                                    <label class="control-label">End Date</label>
                                    <div class="input-group date" data-provide="datepicker">
                                        <input type="text" class="form-control bg-white" id="end_date" name="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-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="currently_studing"
                                            name="currently_studing" value="1">
                                        <label class="custom-control-label control-label"
                                            for="currently_studing">Currently Studying At</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-action">
                        <button id="edu_btn" type="submit" class="btn btn-transparent edufrmsubmit">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endpush

@push('pageJs')
<script type="text/javascript">
    $(document).ready(function() {


        $('#institution_id').on('change', function() {
            $(this).valid();
        });

        $('#frmeducation #inst_country_id').on('change', function() {
            $('#institution_id').attr('disabled', false);
            $('#frmeducation #institution_id').empty();
        });

        $('#frmeducation #institution_id').select2({
            placeholder: 'Select an option',
            minimumInputLength: 3,
            tags: true,
            allowClear: true,
            dropdownParent: $("#education-information"),
            ajax: {
                delay: 250,
                url: '{{route("common.get_search_json")}}',
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term,
                        type: 'educationInstitute',
                        country: $('#frmeducation #inst_country_id').val()
                    }
                    return query;
                },
                processResults: function(response) {
                    return {
                        results: response,
                    };
                }
            }
        });
    });
</script>
@endpush