@if(count($user->references) > 0)
<div id="reference-box">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/profile-referees.svg")}}' alt="contact-information" class="mr-3"> Referees</h2>
        <a href="javascript:void(0)" onclick="openReferenceModal()" class="btn btn-transparent btn-sm mb-2"><i class="material-icons">add</i> Add New</a>
        <p>Please share with us relevant referees for conducting reference checks. “A referee is defined as a previous/current line manager or organisational leader who is willing to testify in writing about your character & technical abilities. Please include referees from organisations you have worked for or interacted with”.</p>
    </div>
    <div class="form-body">
        <ul class="detail-list m-0 p-0">
            @foreach($user->references as $key => $reference)
            <li>
                <h3 class="detail-subtitle bold">{{$reference->name}} <span class="tag">@if($reference->relationTypes){{$reference->relationTypes->name}}@endif</span></h3>
                <p>{{$reference->position}} @if($reference->companies)at {{$reference->companies->name}}@endif</p>
                <div class="reach-us">
                    @if($reference->phone)
                    <a href="tel:{{$reference->phone}}" target="_blank"><i class="material-icons">phone_android</i>{{$reference->phone}}</a>
                    @endif
                    <a href="mailto:{{$reference->email}}" target="_blank"><i class="material-icons">mail_outline</i>{{$reference->email}}</a>
                </div>
                <div class="action-wrapper">
                    <a href="javascript:void(0)" onclick="openReferenceModal({{$reference->id}})"><i class="material-icons">edit</i></a>
                    <a href="javascript:void(0)" watever-data="{{route('front.profile.reference.destroy',['id' => $reference->id])}}" class="remove deleteentity"><i class="material-icons">add</i></a>
                </div>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@else
<div id="reference-box">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/profile-referees.svg")}}' alt="contact-information" class="mr-3"> Referees</h2>
        <p>Please share with us relevant referees for conducting reference checks. “A referee is defined as a previous/current line manager or organisational leader who is willing to testify in writing about your character & technical abilities. Please include referees from organisations you have worked for or interacted with”.</p>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center">
        <div class="empty-info text-center">
            <img src="img/referees.svg" alt="Referees">
            <p class="gray mt-3">Add Referees</p>
            <a href="javascript:void(0)" onclick="openReferenceModal()" class="btn btn-transparent">Add</a>
        </div>
    </div>
</div>
@endif


@push('pageModals')
<div class="modal fade" id="reference-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">Referees</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form method="post" id="frmreference" autocomplete="off">
                    @csrf
                    <div class="form-body">
                        <div class="row">
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <input type="hidden" id="reference_id" name="reference_id" value="">
                                    <label class="control-label" for="name">Name</label>
                                    <input class="form-control" type="text" name="name" id="name" placeholder="Name" required>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="position">Position</label>
                                    <input class="form-control" type="text" name="position" id="position" placeholder="Position" required>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="country_id">Country of Company</label>
                                    <select class="form-control" id="country_id" name="country_id" required>
                                        <option value="" hidden="">Select</option>
                                        @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="company_id">Company Name</label>
                                    <select class="form-control js-data-example-ajax select-two" id="company_id" name="company_id" required disabled>
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="relation_type_id">Relationship</label>
                                    <select class="form-control js-example-basic-multiple" id="relation_type_id" name="relation_type_id" required>
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="email">Email</label>
                                    <input class="form-control" type="text" name="refemail" id="refemail" placeholder="Email" required>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="refmobile">Mobile</label>
                                    <input class="form-control mobile" type="text" name="refmobile" id="refmobile" placeholder="Mobile" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-action">
                        <input id="update-personalfrm-button" type="submit" class="btn btn-transparent frmreferencesubmit submit" value="Add">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endpush
@push('pageJs')
<script type="text/javascript">
    $('#company_id').on('change', function() {
        $(this).valid();
    });

    $('#frmreference #country_id').on('change', function() {
        $('#company_id').attr('disabled', false);
        $('#frmreference #company_id').empty();
    });

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