@extends('front.layouts.main')

@section('title')Profile @endsection

@section('content')

<main class="profile-page">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="sidebar left">
                    <div class="box white profile-progress">
                        @if($currentScore > 0)
                        <div class="progress">
                            <progress id="progressBarVal" max="100" value="{{$currentScore}}"></progress>
                        </div>
                        <p>Your profile is <span id="progressBarText">{{$currentScore}}</span>% {{ @trans('client_profile.complete') }}</p>
                        @else
                        <div class="progress">
                            <progress id="progressBarVal" max="100" value="0"></progress>
                        </div>
                        <p>Your profile is <span id="progressBarText">0</span>% {{ @trans('client_profile.complete') }}</p>
                        @endif
                    </div>

                    <div class="sidebar-menu">
                        <ul class="m-0 p-0 d-none d-md-block">
                            <li><a href="#contact-box">{{ @trans('client_profile.contact_information') }}</a></li>
                            <li><a href="#personal-box">{{ @trans('client_profile.personal_infromation') }}</a></li>
                            <li><a href="#education-box">{{ @trans('client_profile.education_qulification') }}</a></li>
                            <li><a href="#certificate-box">{{ @trans('client_profile.award_certificates') }}</a></li>
                            <li><a href="#experience-box">{{ @trans('client_profile.employment_history') }}</a></li>
                            <li><a href="#reference-box">{{ @trans('client_profile.referees') }}</a></li>
                            <li><a href="#remuneration-box">{{ @trans('client_profile.remuneration') }}</a></li>
                            <li><a href="#documents-box">{{ @trans('client_profile.cv_documetation') }}</a></li>
                        </ul>
                        <div class="form-group btm-arrow select d-md-none">
                            <label class="control-label">&nbsp;</label>
                            <select class="form-control" onchange="javascript:location.href = this.value;">
                                <option value="#contact-box">{{ @trans('client_profile.contact_information') }}</option>
                                <option value="#personal-box"> {{ @trans('client_profile.personal_infromation') }}</option>
                                <option value="#education-box"> {{ @trans('client_profile.education_qulification') }}</option>
                                <option value="#certificate-box">{{ @trans('client_profile.award_certificates') }}</option>
                                <option value="#experience-box"> {{ @trans('client_profile.employment_history') }}</option>
                                <option value="#reference-box">{{ @trans('client_profile.referees') }}</option>
                                <option value="#remuneration-box">{{ @trans('client_profile.remuneration') }}</option>
                                <option value="#documents-box">{{ @trans('client_profile.cv_documetation') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-7 col-md-9">
                <div class="main-content">
                    <div class="box white contact-info-ajax" id="contact-box">
                        @include('front.modules.profile.sections.contactInformation')
                    </div>

                    <div class="box white personal-info-ajax" id="personal-box">
                        @include('front.modules.profile.sections.personal')
                    </div>

                    <div class="box white education-info-ajax" id="education-box">
                        @include('front.modules.profile.sections.education')
                    </div>

                    <div class="box white certificate-info-ajax" id="certificate-box">
                        @include('front.modules.profile.sections.certificates')
                    </div>

                    <div class="box white experience-info-ajax" id="experience-box">
                        @include('front.modules.profile.sections.experience')
                    </div>

                    <div class="box white reference-info-ajax" id="reference-box">
                        @include('front.modules.profile.sections.reference')
                    </div>

                    <div class="box white remuneration-info-ajax" id="remuneration-box">
                        @include('front.modules.profile.sections.remuneration')
                    </div>

                    <div class="box white documents-info-ajax" id="documents-box">
                        @include('front.modules.profile.sections.documents')
                    </div>
                </div>
            </div>

            <!-- <div class="col-xl-2 d-none d-xl-block">
                <div class="sidebar right">
                    <div class="box orange r-plus">
                        <h2 class="h2 title">Become a R+</h2>
                        <p class="sub-title m-0">Get paid for referring your contacts</p>
                        <a href="javascript:void(0)" class="btn btn-transparent d-block">Apply Now</a>
                    </div>
                    <div class="box orange c-plus">
                        <h2 class="h2 title">Become a C+</h2>
                        <p class="sub-title m-0">Get paid for teaching candidates</p>
                        <a href="javascript:void(0)" class="btn btn-transparent d-block">Apply Now</a>
                    </div>
                </div>
            </div> -->
            @if($isAlreadySuper == false)
            <div class="col-xl-2 d-none d-xl-block">
                <div class="sidebar right">
                    <div class="box orange">
                        <h2 class="h2 title">Super Senior Profile</h2>
                        <p class="sub-title m-0">Special benefits for Super Senior Candidate Profile</p>
                        <a href="{{ route('front.dashboard.super-senior') }}" class="btn btn-transparent d-block">Apply Now</a>
                    </div>
                </div>
            </div>
            @endif
        </div>


    </div>
</main>
@endsection

@push('pageModals')
@include('front.components.deletemodal')
@endpush

@push('pageCss')
<script>
    var userId = "{{auth()->user()->id}}";
    var uploadIcon = "{{asset('img/pr-upload-cv.svg')}}";

    var stateUrl = "{{route('state.showByCountryId')}}";
    var cityUrl = "{{route('city.showByStateId')}}";
    var checkEmail = "{{route('front.profile.emailexist')}}";

    var showAbout = "{{route('profile.about')}}";
    var storeAboutUrl = "{{route('front.profile.contact.store')}}";

    var personalModaUrl = "{{route('personal.create')}}";
    var storePersonalUrl = "{{route('personal.store')}}";
    var updatePersonalUrl = "{{route('front.profile.personal.update')}}";

    var educationUrl = "{{route('profile.education.create',['id' => null])}}";
    var storeEducationUrl = "{{route('profile.education.store')}}";
    var instituteCountryUrl = "{{route('profile.education.instituteCountryId',['id' => null])}}";

    var certificateUrl = "{{route('front.profile.certificate.add',['id' => null])}}";
    var storeCertificateUrl = "{{route('front.profile.certificate.store')}}";

    var experienceUrl = "{{ route('front.profile.experience.add',['id' => null])}}";
    var storeExperienceUrl = "{{ route('front.profile.experience.store')}}";

    var referenceUrl = "{{ route('front.profile.reference.add',['id' => null])}}";
    var storeReferenceUrl = "{{ route('front.profile.reference.store')}}";

    var remunerationUrl = "{{ route('front.profile.remuneration.add')}}";
    var storeExpactationeUrl = "{{ route('front.profile.remuneration.store')}}";

    var uoloadDocumentUrl = "{{ route('front.profile.documents.upload') }}";
    var uoloadSaleryUrl = "{{ route('front.profile.documents.uploadSalerySlip') }}";
    var uoloadCustomUrl = "{{ route('front.profile.documents.uploadCustomDoc') }}";
    var deleteDocUrl = "{{ route('front.profile.documents.destroy') }}";
</script>

@endpush

@push('pageJs')

<script>
    var languages = null;
</script>

<script type="text/javascript" src="{{ asset('js/front/profile/contactInfo.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/personal.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/profile.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/education.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/certificate.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/experience.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/reference.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/remunaration.js') }}"></script>



<script>
    $(document).ready(function() {

        $("#frmemploymentStatus").validate({
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                if (element.hasClass('select-two')) {
                    error.insertAfter(element.next('.select2-container'));
                }
            },
            submitHandler: function(form) {
                axios.post(updatePersonalUrl, {
                    user_id: $("#user_id").val(),
                    employement_status: $("#employment_status").val(),
                    total_experience: $("#total_experience").val(),
                }).then(function(response) {
                    $("#employment-box").empty();
                    $("#progressBarVal").attr("value", response.data.score);
                    $("#progressBarText").html(response.data.score);
                    if (response.data.score == 100) {
                        $(".note").addClass('d-none');
                    } else {
                        $(".note").removeClass('d-none');
                    }
                    $("#employment-box").append(response.data.html);
                    $("#employment-information").modal('hide');
                })
            }
        });

        $(document).on("click", ".deleteentity", function() {
            var deleteUrl = $(this).attr("watever-data");
            $("#modalDeleteYes").attr("deleteUrl", deleteUrl);
            $("#modalDeleteConfirm").modal("show").on("click", "#modalDeleteYes", function() {
                axios.get(deleteUrl)
                    .then(function(response, sectiondata) {
                        if (response.data.section == "education") {
                            $(".education-info-ajax").empty();
                            $(".education-info-ajax").append(response.data.html);
                        } else if (response.data.section == "certificate") {
                            $(".certificate-info-ajax").empty();
                            $(".certificate-info-ajax").append(response.data.html);
                        } else if (response.data.section == "experience") {
                            $(".experience-info-ajax").empty();
                            $(".experience-info-ajax").append(response.data.html);
                        } else if (response.data.section == "reference") {
                            $(".reference-info-ajax").empty();
                            $(".reference-info-ajax").append(response.data.html);
                        }
                        $("#progressBarVal").attr("value", response.data.score);
                        $("#progressBarText").html(response.data.score);
                        if (response.data.score == 100) {
                            $(".note").addClass('d-none');
                        } else {
                            $(".note").removeClass('d-none');
                        }
                        $("#modalDeleteConfirm").modal("hide");
                    })
            });
        });

    });

    function options(elementId, data, selected) {

        $(elementId).empty();

        $(elementId).append('<option value="" hidden>Select</option>')
        jQuery.each(data, function(i, val) {
            $(elementId).append('<option value="' + val.id + '" >' + val.name + '</option>');
        });
        if (selected != undefined) {
            $(elementId).val(selected);
        }
    }

    function singleSelcet2(elementId) {
        $(elementId).select2({
            placeholder: "Select",
            allowClear: true
        });
    }

    function singleSelcet2Modal(elementId, modalId) {
        $(elementId).select2({
            placeholder: "Select",
            allowClear: true,
            dropdownParent: $(modalId + ' .modal-content')
        });
    }

    function singleTagsSelcet2(elementId) {
        $(elementId).select2({
            placeholder: "Select",
            tags: true,
            allowClear: true
        });
    }

    function openEmploymentStatus() {

        axios.get("{{route('front.profile.personal.showemployment')}}")
            .then(function(response) {

                var employmentStatusId = response.data.user.profiles;
                if (employmentStatusId == null) {
                    employmentStatusId = undefined;
                } else {
                    employmentStatusId = response.data.user.profiles.employement_status
                }
                options("#employment_status", response.data.employments, employmentStatusId);

                $("#total_experience").empty();
                for (var i = 0; i <= 11; i++) {
                    if (i == 11) {
                        $("#total_experience").append('<option value="' + i + '" >' + 10 + '+</option>');
                    } else {
                        $("#total_experience").append('<option value="' + i + '" >' + i + '</option>');
                    }
                }
                $("#total_experience").val(response.data.user.profiles.total_experience);
            })
            .catch()
        singleSelcet2("#employment_status");
        singleSelcet2("#total_experience");
        $("#employment-information").modal('show');
    }
</script>
@endpush