@if(!empty($user->expectations))
<div id="remuneration-box">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/profile-remuneration.svg")}}' alt="contact-information" class="mr-3"> Remuneration</h2>
        <a href="javascript:void(0)" onclick="openRemunarationModal()" class="btn btn-transparent btn-sm mb-2"><i class="material-icons">edit</i> Update</a>
        <p>When we recruit for organisations they often share with us their remuneration packages for the role; we will only share opportunities with you that are in line with your current remuneration package. Please provide factual information for effective job placement.</p>
    </div>
    <form action="">
        <div class="form-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="control-label">Currency</label>
                        <p class="display-info">
                        @if($user->expectations->countries)
                        {{$user->expectations->countries->currency_symbol}} - 
                        {{$user->expectations->countries->name}}</p>
                        @else
                        -
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Current Salary (per month)</label>
                        @if($user->expectations->current_salary && $user->expectations->countries)
                        <p class="display-info">{{$user->expectations->countries->currency_symbol}} {{number_format($user->expectations->current_salary)}}</p>
                        @else
                        <p class="display-info">-</p>
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Ideal Salary (per month)</label>
                        @if($user->expectations->ideal_salary && $user->expectations->countries)
                        <p class="display-info">{{$user->expectations->countries->currency_symbol}} {{number_format($user->expectations->ideal_salary)}}</p>
                        @else
                        <p class="display-info">-</p>
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Minimum Expectation (per month)</label>
                        @if($user->expectations->min_expected_salary && $user->expectations->countries)
                        <p class="display-info">{{$user->expectations->countries->currency_symbol}} {{number_format($user->expectations->min_expected_salary)}}</p>
                        @else
                        <p class="display-info">-</p>
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Monthly Benefits</label>
                        @php ($count = 0)
                        @foreach($user->userjobsbenefits as $benefit)
                        @if($benefit->type == "monthly")
                        @php ($count++)
                        <p class="display-info">{{$benefit->name}}</p>
                        @endif
                        @endforeach
                        @if($count == 0)
                        <p class="display-info">-</p>
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Annual Benefits</label>
                        @php ($count = 0)
                        @foreach($user->userjobsbenefits as $key => $benefit)
                        @if($benefit->type == "annual")
                        @php ($count++)
                        <p class="display-info">
                            {{$benefit->name}}</p>
                        @endif
                        @endforeach
                        @if($count == 0)
                        <p class="display-info">-</p>
                        @endif
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="form-group">
                        <label class="control-label">Other Benefits</label>
                        @php ($count = 0)
                        @foreach($user->userjobsbenefits as $key => $benefit)
                        @if($benefit->type == "others")
                        @php ($count++)
                        <p class="display-info">
                            {{$benefit->name}}</p>
                        @endif
                        @endforeach
                        @if($count == 0)
                        <p class="display-info">-</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@else
<div id="remuneration-box">
    <div class="title-wrapper">
        <h2 class="box-title"><img src='{{asset("img/profile-remuneration.svg")}}' alt="contact-information" class="mr-3"> Remuneration</h2>
        <p>When we recruit for organisations they often share with us their remuneration packages for the role; we will only share opportunities with you that are in line with your current remuneration package. Please provide factual information for effective job placement.</p>
    </div>
    <div class="empty-content d-flex align-items-center justify-content-center">
        <div class="empty-info text-center">
            <img src="img/remuneration.svg" alt="Remuneration">
            <p class="gray mt-3">Add remuneration to get you the best jobs in the industry</p>
            <a href="javascript:void(0)" onclick="openRemunarationModal()" class="btn btn-transparent">Add</a>
        </div>
    </div>
</div>
@endif


@push('pageModals')
<div class="modal fade" id="remuneration-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">Remuneration</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <p>Please input your monthly remuneration details below – all figures should be a NET/Take Home salary.</p>
                </div>
                <form method="post" id="frmremunaration" autocomplete="off">
                    @csrf
                    <div class="form-body">
                        <div class="row">
                            <div class="col-lg-4 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="currency_country_id">Currency</label>
                                    <select class="form-control select-two js-example-basic-single" id="currency_country_id" name="currency_country_id" required>
                                        <option value="" hidden="">Select</option>
                                        @isset($countries)
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->id }}">{{ $country->currency_symbol }} - {{ $country->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-8 col-xs-12"></div>

                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="current_salary" data-toggle="tooltip" title="What are you currently earning?">Current Salary</label>
                                    <input class="form-control money" type="text" id="current_salary" name="current_salary" value="" placeholder="Current Salary" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="ideal_salary" data-toggle="tooltip" title="What is your dream salary?">Ideal Salary</label>
                                    <input class="form-control money" type="text" name="ideal_salary" id="ideal_salary" placeholder="Ideal Salary">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group required">
                                    <label class="control-label" for="min_expected_salary" data-toggle="tooltip" title="What is the absolute minimum salary you will accept for your dream job?">Minimum Expectation</label>
                                    <input class="form-control money" id="min_expected_salary" name="min_expected_salary" type="text" placeholder="Minimum Expectation" required>
                                </div>
                            </div>
                            <div class="col-lg-12 col-sm-12 col-xs-12">
                                <p></p>
                                <p>What benefits do you receive from your current employer?</p>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="monthly_benifites_id">Monthly Benefits</label>
                                    <select class="form-control js-example-basic-multiple" name="monthly_benifites_id" id="monthly_benifites_id" multiple="multiple">
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="annual_benifites_id">Annual Benefits</label>
                                    <select class="form-control js-example-basic-multiple" name="annual_benifites_id" id="annual_benifites_id" multiple="multiple">
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="other_benifites_id">Other Benefits</label>
                                    <select class="form-control js-example-basic-multiple" name="other_benifites_id" id="other_benifites_id" multiple="multiple">
                                        <option value="" hidden="">Select</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="form-action">
                        <input id="update-personalfrm-button" type="submit" class="btn btn-transparent frmrenumarationsubmit submit" value="Update">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endpush