@extends('front.modules.cv_builder.main')
@section('title')CV Builder - Skills Based CV @endsection

@section('secondary_content')
<div>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <div class="box white-bg p-0 pdf-box">
                    <table>
                        <tr>
                            <td class="page">
                                <table class="body-part">
                                    <tr>
                                        <td class="text-center" style="padding-bottom: 20px;">
                                            <h1 class="text-center" v-if="userDetails.full_name">@{{ userDetails.full_name }}</h1>
                                            <h1 class="text-center" v-else>Your Name</h1>
                                            <p class="text-center" v-if="userDetails.locations && userDetails.locations.address1
                                                                && userDetails.locations.area_of_residence && userDetails.locations.country_id && userDetails.locations.state_id
                                                                && userDetails.locations.city_id">
                                                @{{ userDetails.locations.address1 }}, <template v-if="userDetails.locations.address2"> @{{ userDetails.locations.address2 }},</template> 
                                                @{{ userDetails.locations.area_of_residence }},<br/>
                                                @{{ userDetails.locations.cities.name }}, <template v-if="userDetails.locations.countries.name != 'Tanzania'">@{{ userDetails.locations.states.name }},</template> 
                                                @{{ userDetails.locations.countries.name }} </p>
                                            <p class="text-center" v-else>Your address</p>
                                            <p class="text-center">
                                                    <a href="javascript:void(0)" v-if="userDetails.mobile">@{{ userDetails.mobile }}</a> 
                                                     <a href="javascript:void(0)" v-else>Your primary mobile number</a> 
                                            </p>
                                            <p class="text-center">
                                                    <a href="javascript:void(0)" v-if="userDetails.email">@{{ userDetails.email }}</a>
                                                    <a href="javascript:void(0)" v-else>Your primary email address</a>
                                            </p>
                                            <div class="alert alert-dismissible fade show alert-danger m-0" 
                                            v-if="(!$v.userDetails.required || !$v.userDetails.full_name.required ||
                                            !$v.userDetails.locations.required || !$v.userDetails.locations.address1.required ||
                                            !$v.userDetails.locations.area_of_residence.required || !$v.userDetails.locations.city_id.required || !$v.userDetails.locations.state_id.required ||
                                            !$v.userDetails.locations.country_id.required) && cv_footer.formSubmit"
                                            :class="{ 'cv--input--error': ($v.userDetails.full_name.$error || $v.userDetails.locations.$error)}">
                                                <button type="button" class="close contact-close" onClick="$(this).closest('.alert').hide()"
                                                    style="left:auto; margin-left: -35px">×</button>
                                                <strong>Contact detail is mandatory to fill up.</strong>
                                            </div>
                                            <a href="javascript:void(0)" class="pdf-btn" @click="openContactDetails">Update Contact Details <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="body-details">
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>Profile <a href="javascript:void(0)" style="float: right;" class="pdf-btn" @click="openProfProfile">Update <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a></h2>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" 
                                                        v-if="(!$v.userDetails.required || !$v.userDetails.profiles.required || 
                                                                !$v.userDetails.profiles.cv_profile_bio.required) && cv_footer.formSubmit"
                                                                :class="{ 'cv--input--error': ($v.userDetails.profiles.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>Profile detail is mandatory to fill up.</strong>
                                                        </div>
                                                        <p class="text-justify" v-if="userDetails.profiles && userDetails.profiles.cv_profile_bio"> @{{ userDetails.profiles.cv_profile_bio }} </p>
                                                        <p class="text-justify" v-else-if="userCvDetails && userCvDetails.cv_profile_bio"> @{{ userCvDetails.cv_profile_bio }} </p>
                                                        <p class="text-justify" v-else>Write a strong opening summary of who you are, your skills, achievements and career goals. A good Profile is 4 – 6 sentences long <br/>
                                                            e.g I am a highly-skilled Human Resource Manager with 10 years’ experience in the Banking Industry. I possess a wide skill set, including learning and 
                                                            development, through working on developing a training program for banking personnel, Performance Management through managing a team of more than 200 
                                                            employees. I am looking to secure a challenging role with a strategic focus in an international corporate company.
                                                        </p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>Skills & Achievements 
                                                            <a href="javascript:void(0)" style="float: right;" class="pdf-btn" @click="openCvModal('addUserSkills')" 
                                                                v-if="userDetails && userDetails.skills && userDetails.skills.length < 8">Add New <img 
                                                                src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a>
                                                        </h2>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || !$v.userDetails.skills.required || 
                                                        !$v.userDetails.skills.$params.minLength) && cv_footer.formSubmit"
                                                        :class="{ 'cv--input--error': ($v.userDetails.skills.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>Skills & Achievements detail is mandatory to fill up.</strong>
                                                        </div>
                                                        <template v-if="userDetails.skills && userDetails.skills.length > 0">
                                                            <template v-for="(skill, index) in userDetails.skills">
                                                                <h3>@{{ skill.skill }}
                                                                    <a href="javascript:void(0)" class="action float-right ml-4" @click="confirm(skill.id, 'skillForm', 'skills', 'removeUserSkill')"><img src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                    <a href="javascript:void(0)" class="action float-right" @click="editUserSkill(index)"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                </h3>
                                                                <ul class="skill-list">
                                                                    <template v-if="skill.detail && skill.detail.length > 0" v-for="detail in skill.detail">
                                                                        <li>@{{ detail.detail }}</li>
                                                                    </template>
                                                                </ul>
                                                            </template>
                                                        </template>
                                                        <template v-else>
                                                            <p>Highlight your key skills and provide your key achievements in that particular skill</p>
                                                            <h3>Eg; Cost Control</h3>
                                                            <ul class="skill-list">
                                                                <li>Managed to reduced operational expenditure by 30% over my first two years as a Financial Controller</li>
                                                                <li>Successfully negotiated improved terms with suppliers reducing fixed costs by 10%</li>
                                                            </ul>

                                                            <h3>Eg; Research</h3>
                                                            <ul class="skill-list">
                                                                <li>Successfully managed quantitative research project that collected data from 5000 farmers and helped inform national commoddity export policies</li>
                                                            </ul>
                                                        </template>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>Career Summary <a href="javascript:void(0)" style="float: right;" class="pdf-btn" @click="addCareerSummary">Add New 
                                                            <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a></h2>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || !$v.userDetails.experiences.required || 
                                                        !$v.userDetails.experiences.$params.minLength) && cv_footer.formSubmit"
                                                        :class="{ 'cv--input--error': ($v.userDetails.experiences.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>Career Summary detail is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <template v-if="userDetails.experiences && userDetails.experiences.length > 0">
                                                            <template v-for="(detail, index) in userDetails.experiences">
                                                                <table style="table-layout: auto;">
                                                                    <tr>
                                                                        <td style="width: 55%">@{{ detail.positiontitle }}, @{{ detail.commancompanies.name }}, @{{ detail.commancompanies.country.name }}</td>
                                                                        <td style="width: 33%">@{{ detail.start_date | monthAndYear }} - @{{ detail.end_date | monthAndYear(detail.is_current) }}</td>
                                                                        <td class="text-right">
                                                                            <a href="javascript:void(0)" class="action" @click="editCareerSummary(index)"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                            <a href="javascript:void(0)" class="action" @click="confirm(detail.id, 'careerSummary', 'experiences', 'removeUserCareerSummary')"><img src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                        </td>
                                                                    </tr>
                                                                </table> 
                                                            </template>
                                                        </template>
                                                        <template v-else>
                                                            <table style="table-layout: auto;">
                                                                <tr>
                                                                    <td>Input your work experience including promotions within an organization and consultancy work.  Make sure you input all of your experience, 
                                                                        even if you worked somewhere for a short period of time</td>
                                                                </tr>
                                                            </table>
                                                        </template>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>Education <a href="javascript:void(0)" style="float: right;" class="pdf-btn" @click="addNewEducation">Add New <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a></h2>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || !$v.userDetails.educations.required || 
                                                        !$v.userDetails.educations.$params.minLength) && cv_footer.formSubmit"
                                                        :class="{ 'cv--input--error': ($v.userDetails.educations.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>Education detail is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <table style="table-layout: auto;">
                                                            <template v-if="userDetails.educations && userDetails.educations.length > 0">
                                                                <template v-for="(detail, index) in userDetails.educations">
                                                                <tr>
                                                                    <td><span class="bold">@{{ detail.title }}, </span>@{{ detail.institutions.name }} - @{{ detail.countries.name }}, @{{ detail.end_date | yearMessage }}</td>
                                                                    <td class="text-right">
                                                                        <a href="javascript:void(0)" class="action" @click="editUserEduction(index)"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                        <a href="javascript:void(0)" class="action" @click="confirm(detail.id, 'education', 'educations', 'removeUserEducation')"><img src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                    </td>
                                                                </tr>
                                                                </template>
                                                            </template>
                                                            <template v-else>
                                                                <tr>
                                                                    <td>Add your education history</td>
                                                                </tr>
                                                            </template>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <table style="table-layout: auto;">
                                                            <h2>Certifications <a href="javascript:void(0)" style="float: right;" class="pdf-btn" @click="addCertificateModal">Add New <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a></h2>
                                                            <template v-if="userDetails.certificates && userDetails.certificates.length > 0">
                                                                <template v-for="(certificate, index) in userDetails.certificates">
                                                                        <tr>
                                                                            <td><span class="bold">@{{ certificate.name }},</span> <template v-if="certificate.institutions && certificate.institutions.name">
                                                                                @{{ certificate.institutions.name  }},</template> 
                                                                                <template v-if="!certificate.is_ongoing">
                                                                                    @{{ certificate.end_date | year }}
                                                                                </template>
                                                                                <template v-else>Ongoing</template>
                                                                            </td>
                                                                            <td class="text-right">
                                                                                <a href="javascript:void(0)" class="action" @click="editUserCertificate(index)"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                                <a href="javascript:void(0)" class="action" @click="confirm(certificate.id, 'certificate', 'certificates', 'removeUserCertificate')"><img src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                                            </td>
                                                                        </tr>
                                                                </template>
                                                            </template>
                                                            <template v-else>
                                                                <tr>
                                                                    <td>
                                                                        <p>Input other courses you have gained certification in throughout your career. E.g CPA, ACCA, PMP</p>
                                                                    </td>
                                                                </tr>
                                                            </template>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <table style="table-layout: auto;">
                                                            <h2>Professional Memberships <a href="javascript:void(0)" style="float: right;" class="pdf-btn" @click="openCvModal('addNewMembership')">Update <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a></h2>
                                                            <template v-if="userDetails.communities && userDetails.communities.length > 0">
                                                                <template v-for="(detail, index) in userDetails.communities">
                                                                <tr>
                                                                    <td>
                                                                        @{{ detail.name }} <br/>
                                                                    </td>
                                                                </tr>
                                                                </template>
                                                            </template>
                                                            <template v-else>
                                                                <p>
                                                                    Highlight all Professional Memberships you are associated with
                                                                    <ul>
                                                                        <li>Eg. Member: Rotary Club</li>
                                                                        <li>Eg. Treasurer: Tanzania Law Society</li>
                                                                        <li>Eg. Board Member: Project Management Institute</li>
                                                                    </ul>
                                                                </p>
                                                            </template>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>Additional Information</h2>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || !$v.userDetails.languages.required || 
                                                         !$v.userDetails.languages.$params.minLength) && cv_footer.formSubmit"
                                                            :class="{ 'cv--input--error': ($v.userDetails.languages.$error)}">
                                                            <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                            <strong>Language detail is mandatory to fill up.</strong>
                                                        </div>
                                                        <table style="table-layout: auto;">
                                                            <tr v-if="userDetails.key_skills && userDetails.key_skills.length == 0 && userDetails.languages && userDetails.languages.length == 0">
                                                                <td>Add any information to give you an added advantage like languages, publications, extra skills and links to portfolio</td>
                                                            </tr>
                                                            <tr>
                                                                <template v-if="userDetails.key_skills && userDetails.key_skills.length > 0">
                                                                    <td>
                                                                        Technical Skills:
                                                                        <template v-for="(skill, index) in userDetails.key_skills">
                                                                            @{{ skill.name | upperCase}}<template v-if="userDetails.key_skills.length-1 != index">,</template>
                                                                        </template>
                                                                        </td>
                                                                    <td class="text-right">
                                                                        <a href="javascript:void(0)" class="action" @click="editUserKeySkill"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                    </td>
                                                                </template>
                                                                <template v-else>
                                                                    <td>
                                                                        <ul class="mb-0">
                                                                            <li>Eg. Technical Skills: Photoshop, Advanced Excel, Autocad</li>
                                                                        </ul>
                                                                    </td>
                                                                    <td class="text-right">
                                                                        <a href="javascript:void(0)" class="action" @click="editUserKeySkill"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                    </td>
                                                                </template>
                                                            </tr>
                                                            <tr>
                                                                <template v-if="userDetails.languages && userDetails.languages.length > 0">
                                                                    <td>
                                                                        Languages:
                                                                        <template v-for="(language, index) in userDetails.languages">
                                                                            @{{ language.name | upperCase}}<template v-if="userDetails.languages.length-1 != index">,</template>
                                                                        </template>
                                                                        </td>
                                                                    <td class="text-right">
                                                                        <a href="javascript:void(0)" class="action" @click="editUserLanguage"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                    </td>
                                                                </template>
                                                                <template v-else>
                                                                    <td>
                                                                        <ul>
                                                                            <li>Eg. Language: French, English, Swahili</li>
                                                                        </ul>
                                                                    </td>
                                                                    <td class="text-right">
                                                                        <a href="javascript:void(0)" class="action" @click="editUserLanguage"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" /></a>
                                                                    </td>
                                                                </template>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td>
                                                        <h2>Interests <a href="javascript:void(0)" style="float: right;" class="pdf-btn" @click="openCvModal('editUserInterestsModal')">Update <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a></h2>
                                                        <template v-if="userDetails.interests && userDetails.interests.length > 0">
                                                            <p class="text-justify">
                                                                <template v-for="(interest, index) in userDetails.interests">
                                                                    @{{ interest.name | upperCase}}<template v-if="userDetails.interests.length-1 != index">,</template>
                                                                </template>
                                                            </p>
                                                        </template>
                                                        <template v-else>
                                                            <p class="text-justify">Add your hobbies and interest, be relevant and truthful <br/>
                                                                Eg. Fitness, Technology, Music, Reading</p>
                                                        </template>
                                                    </td>
                                                </tr>
                                            </table>
                                            <table class="block">
                                                <tr>
                                                    <td colspan="3">
                                                        <h2>Referees 
                                                            <a href="javascript:void(0)" style="float: right;" class="pdf-btn"  @click="openCvModal('addNewRefereeModal')">Add New <img 
                                                                    src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2" /></a>
                                                            <a href="javascript:void(0)" style="float: right;" class="pdf-btn mr-3" @click="openCvModal('selectRefereesModal')"   
                                                            v-if="userDetails.references && userDetails.references.length > 0">Select Referees 
                                                                <img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" class="ml-2"/></a>
                                                        </h2>
                                                        <div class="alert alert-dismissible fade show alert-danger m-0" v-if="(!$v.userDetails.required || !$v.userDetails.references.required || 
                                                            !$v.userDetails.references.minLength) && cv_footer.formSubmit"
                                                            :class="{ 'cv--input--error': ($v.userDetails.references.$error)}">
                                                                <button type="button" class="close" onClick="$(this).closest('.alert').hide()">×</button>
                                                                <strong>At least 3 Referees detail is mandatory to fill up.</strong>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <template v-if="userDetails.references && userDetails.references.length > 0">
                                                    <tr>
                                                        <template v-for="(referee, index) in userDetails.references" v-if="referee.is_selected_for_cv == 1">
                                                        <td>
                                                            <p class="bold mb-0">@{{ referee.name }} 
                                                                <a href="javascript:void(0)" class="action ml-2" @click="editReferee(index)"><img src="{{ asset('img/cv_builder/function_cv/edit.svg') }}" alt="edit" />  </a>
                                                                <a href="javascript:void(0)" class="action" @click="confirm(referee.id, 'referee', 'references', 'removeReferee')"><img src="{{ asset('img/cv_builder/function_cv/close.svg') }}" alt="close" /></a>
                                                            </p>
                                                            <p class="mb-0">@{{ referee.position }}</p>
                                                            <p class="mb-0" v-if="referee.companies && referee.companies.name">@{{ referee.companies.name }}</p>
                                                            {{-- <p class="mb-0" v-if="referee.companies && referee.companies.country && referee.companies.country.name">@{{ referee.companies.country.name }}</p> --}}
                                                            <p class="mb-0">@{{ referee.phone }}</p>
                                                            <p class="mb-0">@{{ referee.email }}</p>
                                                        </td>
                                                        </template>
                                                        <template v-if="userDetails.references_count == 0">
                                                            <td><p class="text-justify">References will be provided on demand</p></td>
                                                        </template>
                                                    </tr>
                                                </template>
                                                <template v-else>
                                                    <tr>
                                                        <td colspan="3">
                                                            <p class="text-justify">Include referees from organizations you have worked for or interacted with.
                                                                 A referee is defined as a previous/current line manager or organizational leader who is willing to testify in writing about your character & technical abilities.</p>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center">
                                            <a href="http://www.empower.co.tz" class="btn" target="_blank">www.empower.co.tz</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <cv-builder-footer cvtype="skills_based_cv" id="skills_based_cv" publish_id="publish_skills_based_cv" 
        preview_id="preview_skills_based_cv" template_id="1"></cv-builder-footer>
</div>
@endsection

@push('pageCss')
@include('front.modules.cv_builder.skills_based_cv.common')
@endpush

@push('secondary_pageModals')
    @include('front.modules.cv_builder.skills_based_cv.modals.contact_details')
@endpush

@push('secondary_pageJs')
<script>
    var previewCv = "{{ route('front.cv_builder.preview_cv') }}";
</script>
<script type="text/javascript" src="{{ asset('js/front/cv_builder/skills_based_cv.js') }}"></script>
@endpush