@extends('templates.popup_template_forms')
@section('content')
<style>

    *{
    background: white;
}
.skills li{
    background-color: rgb(212, 211, 211);
    margin-right: 10px;
    border-radius: 1px;
}
.main{

    width: 1000px;
    min-height: 3508px;
    margin: 10px auto;
}
.skills{
    width: 700px;
    min-height: 50px;
    align-content: space-between;
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    gap:10px;
}
.experience{
    margin:15px;
    border-bottom: 1px solid black
}
.edu{
    margin-top: auto;
}
.career h3{
    border-top: 2px solid black;
    margin: 10px 0 0 0;
    padding: 5px 0 0 0;
}
header{
    margin: 1px;
    display: flex;
}
img{

    height: 90px;
    margin-left: auto;
    align-self: center;
}


.lbl-lg {
  font-size: 15px;
  margin-top:5px;
}

.career-goal{

    padding:10px;
}

</style>


<div class="main">
                <header>
                <div class=>
                    <h1 class=" btn-primary">CV ID: QED00{{ $CV->id }}</h1>
                    <h4>Discipline: {{$CV->Field->title}}</h4>
                    <h4>Nationality: {{$CV->nationality}}</h4>
                </div>
                    <img height="10" src="https://app.qedi-ng.com/public/logo.jfif" alt="">
                </header>
                <section>
                    <div class="career">
                        <h3> CAREER OBJECTIVE </h3>
                        <p class="career-goal">
                            {{$CV->objective}}
                        </p>
                    </div>
                    <div>
                        <h3>SKILLS</h3>
                        <ul class="skills">
                            @foreach( $CV->Skills as $skill)
                            <li>{{$skill->skill}}</li>

                            @endforeach
                        </ul>
                    </div>
                    <div>
                        <h3>WORK EXPERIENCE</h3>
                        @foreach( $experience as $exp)
                        <div class="experience">
                            <h5>Company: {{$exp->organization}}</h5>
                            <h5>Position: {{$exp->role}}</h5>
                            <h5>Date: {{$exp->duration}}</h5>
                            <h5>Duties: </h5>
                            <p>
                                <ul>
                            {!!$exp->duties!!}
                                </ul>
                            </p>
                        </div>
                        @endforeach


                            <div class="edu">
                                <h2>EDUCATION</h2>
                                <ul>
                                @foreach( $education as $edu)
                                    <li>{{$edu->achievement }} - {{$edu->body}} - {{$edu->duration}}   </li>


                                @endforeach
                                </ul>

                            </div>
                                <div class="cert">
                                    <h2>CERTIFICATION</h2>
                                    <ul class="cert">
                                        <ul>
                                        @foreach( $certifications as $cert)
                                            <li>{{$cert->certification }} - {{$cert->body}} - Issued: {{$cert->issue_date}}- Expires: {{$cert->expiration_date}}   </li>


                                        @endforeach
                                     </ul>
                                    </ul>
                                </div>
                                <div class="project">
                                    <h2>PROJECTS</h2>
                                    @foreach( $projects as $p)
                                        <div class="project">
                                            <h5>Title: {{$p->title}}</h5>
                                            <h5>Duration: {{$p->duration}}</h5>
                                            <h5>Achievement: </h5>
                                            <p>
                                                <ul>
                                            {!!$p->achievements!!}
                                                </ul>
                                            </p>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="ref">
                                    <h2>REFEREE</h2>
                                    <ul class="ref">
                                    <ul>
                                        @foreach( $referees as $r)
                                            <li>{{$r->fullname }} - {{$r->email}} -  {{$r->mobile}}- {{$r->address}}   </li>


                                        @endforeach
                                     </ul>
                            </div>
                    </div>
                </section>
         </div>

 @endsection

@push('scripts')
     <script src="{{ asset('js/vue.min.js')}}"></script>
  <script src="{{ asset('/js/vue-resource.min.js')}}"></script>
<!--  <script src="/js/vue-resource@1.3.4.js"></script>-->
  <script src="{{ asset('/js/vue-select.js')}}"></script>
  <script type="text/javascript">
        Vue.http.headers.common['X-CSRF-TOKEN'] = '{{csrf_token()}}';

        window._form = {
            id:		{!! $CV->id !!},
			first_name: '{!! $CV->first_name !!}',
			last_name:'{!! $CV->last_name !!}',
			objective:'{!! $CV->objective !!}',
            country:'{!! $CV->country !!}',
            city:'{!! $CV->city !!}',
            qualification:'{!! $CV->qualification !!}',
            nationality:'{!! $CV->nationality !!}',
            grade:'{!! $CV->grade !!}',
            mobile:'{!! $CV->mobile !!}',
            age:'{!! $CV->age !!}',
            years:'{!! $CV->years  !!}',
            field_id:'{!! $CV->field_id  !!}',
            industry_id:'{!! $CV->industry_id  !!}',
            experience:{!! $experience->toJson() !!},
            education:{!! $education->toJson() !!},
            certifications:{!! $certifications->toJson() !!},
            projects:{!! $projects->toJson() !!},
            skills:{!! $skills->toJson() !!},
            referees:{!! $referees->toJson() !!}

        };


    </script>

   <script src="{{ asset('js/app.js') }}"></script>

@endpush