@if(count($user->educations) > 0)
<div id="education-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/education-&-qualifications.svg")}}' alt="contact-information" class="mr-3">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>
    <form action="">
        <div class="form-body">
            <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)({{$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])}}" class="remove deleteentity"><i class="material-icons">add</i></a>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
    </form>
</div>

@else

<div id="education-detail-ajax">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/education-&-qualifications.svg")}}' alt="contact-information" class="mr-3">Education</h2>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center">
        <div class="empty-info text-center">
            <img src="img/graduate.svg" alt="Education">
            <p class="gray mt-3">Add Education to serve you the best relevent jobs</p>
            <a href="javascript:void(0)" class="btn btn-transparent" onclick="openEducationModal();">Add</a>
        </div>
    </div>
</div>

@endif


@push('pageModals')
<!-- Educations and Qualification table -->
<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=""
                                         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 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 submit">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Educations and Qualification table -->
@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 .modal-content"),
            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