@extends('profile_candidates.layout.master')
@section("title", "Nearshore Virtual Assistance - Hire a VA today!")
@section("meta-title", "Nearshore Virtual Assistance - Hire a VA today!")
@section("description", "We are a Nearshore Virtual Assistance company helping entrepreneurs run their businesses in a more efficient way by hiring a high performing VA in the LATAM region and scale their business.")
@section("keywords", "Hire a virtual assistant, Virtual assistant, Virtual assistant Mexico, Virtual assistant latam, Virtual assistant agency, Virtual assistant websites")
@section("image", asset('images/backgrounds/Clock_background.png') )

@section('content')
@include('profile_candidates.layout.header')
<div class="text-white pt-5 pt-xl-0">
    <div class="position-relative vh-40 image-cover image-position-center d-none d-md-flex" style="background-image: url(/images/backgrounds/Solutions_background.png);">
        <div class="position-absolute bottom-0 text-white px-5 py-3 d-none d-md-block w-25" style="background-color: rgba(66,46,180,1); height: 7.5rem;">
            
        </div>
    </div>
    <div class="container-fluid" style="background: linear-gradient(0deg, rgba(197,107,158,1) 0%, rgba(66,46,180,1) 100%);">
        <div class="row justify-content-center">
            <div class="col-xxl-8 col-xl-11 col-md-12 px-4 position-relative">
                <div class="position-absolute bottom-0 text-white py-3 d-none d-md-block" style="top:-136px;height: fit-content;">
                    <div class="pe-5 pt-4 d-flex" style="background-color: rgba(66,46,180,1); border-top-right-radius: 3.5rem;">
                        <h1 class="text-start align-self-center ms-3">{!!$candidate->nickname!!}</h1>
                        @isset($candidate->image)
                            <img class="img-fluid rounded-circle ms-3 border border-4" style="max-width: 6rem; width:6rem;height: 6rem; object-fit: cover;" src="{{asset('uploads/'.$candidate->image)}}" alt="{!!$candidate->nickname!!}">
                        @else
                            <img class="img-fluid rounded-circle ms-3 border border-4" style="max-width: 6rem; width:6rem;height: 6rem; object-fit: cover;" src="{{asset('images/capita-black-faviconx2.png')}}" alt="{!!$candidate->nickname!!}">
                        @endisset
                    </div>
                </div>
                <div class="bottom-0 text-white px-3 py-3 d-block d-md-none justify-content-center mt-4 text-center">
                </div>

                <div id="about_me">
                    <div class="py-md-5 p-4 d-none d-md-block">
                        <h4 class="mb-4 text-center text-md-start text-uppercase">ABOUT ME</h4>
                        <p>{!!$candidate->description!!}</p>
                        <span id="cw_assessment"></span>
                    </div>
                    
                    <div class="mb-3 d-block d-md-none">
                        <div class="p-4 rounded-1r" style="background: #7063CC;">
                            <div class="text-center border-bottom border-2">
                                @isset($candidate->image)
                                    <img class="img-fluid rounded-circle border border-4" style="max-width: 9rem; width:9rem;height: 9rem; object-fit: cover;" src="{{asset('uploads/'.$candidate->image)}}" alt="{!!$candidate->nickname!!}">
                                @else
                                    <img class="img-fluid rounded-circle border border-4" style="max-width: 9rem; width:9rem;height: 9rem; object-fit: cover;" src="{{asset('images/capita-black-faviconx2.png')}}" alt="{!!$candidate->nickname!!}">
                                @endisset
                                <h1 class="align-self-center my-4">{!!$candidate->nickname!!}</h1>
                            </div>
                        
                            <h4 class="my-4 text-center text-md-start text-uppercase">ABOUT ME</h4>
    
                            <div id="collapseAbout" class="panel-collapse collapse">
                                <p>{!!$candidate->description!!}</p>
                            </div>
    
                            <div class="text-end">
                                <a class="collapse-option text-decoration-none" data-bs-toggle="collapse" data-parent="#accordion" href="#collapseAbout">
                                    <span class="text-white">Read more <i class="fas fa-plus fa-sm"></i></span>
                                </a>
                            </div>
                            <span id="cw_assessment_mbl"></span>
                        </div> 
                    </div>
                </div>
                
                <div class="row justify-content-center">
                    <div class="col-lg-12 mb-lg-5 mb-3">
                        <div class="p-4 rounded-1r h-100" style="background: #7063CC;">
                            <h4 class="mb-4 text-center text-md-start text-uppercase">Cápita Works Assessment</h4>
                            
                            <div id="collapseAssesment" class="panel-collapse collapse">
                                <p class="d-md-none d-block">{!!$candidate->assesment!!}</p>
                            </div>
                            <p class="d-md-block d-none">{!!$candidate->assesment!!}</p>
                            <div class="text-end d-block d-md-none">
                                <a class="collapse-option text-decoration-none" data-bs-toggle="collapse" data-parent="#accordion" href="#collapseAssesment">
                                    <span class="text-white">Read more <i class="fas fa-plus fa-sm"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>

                    @if(!$candidate->hide_level_english)
                        @php
                            $levels_english = [
                                [
                                    "id"  => "A1",
                                    "description" => "A1 (Basic)"
                                ],
                                [
                                    "id"  => "A2",
                                    "description" => "A2 (Upper-Basic)"
                                ],
                                [
                                    "id"  => "B1",
                                    "description" => "B1 (Intermediate)"
                                ],
                                [
                                    "id"  => "B2",
                                    "description" => "B2 (Upper-intermediate)"
                                ],
                                [
                                    "id"  => "C1",
                                    "description" => "C1 (Advanced)"
                                ],
                                [
                                    "id"  => "C2",
                                    "description" => "C2 (Proficient)"
                                ]
                            ];

                            $level_vocabulary = collect($levels_english)->filter(function($item) use($candidate){
                                return $item["id"] == $candidate->vocabulary;
                            })->first();

                            $level_pronunciation = collect($levels_english)->filter(function($item) use($candidate){
                                return $item["id"] == $candidate->pronunciation;
                            })->first();

                            $level_fluency = collect($levels_english)->filter(function($item) use($candidate){
                                return $item["id"] == $candidate->fluency;
                            })->first();

                            $level_grammar = collect($levels_english)->filter(function($item) use($candidate){
                                return $item["id"] == $candidate->grammar;
                            })->first();
                        @endphp
                        
                        <div class="col-lg-4 mb-3 mb-lg-0 text-dark">
                            <div class="p-4 rounded-1r h-100" style="background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(214,213,219,1) 100%);">
                                <h4 class="mb-4 text-center text-md-start text-uppercase text-purple text-nowrap">English Level</h4>
                                @isset($candidate->vocabulary)
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="far fa-check-circle" style="color: rgba(66,46,180,1);"></i> <p class="ms-2 mb-0 fw-light">Vocabulary - {!!$level_vocabulary["description"]!!}</p>
                                    </div> 
                                @endisset
                                @isset($candidate->pronunciation)
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="far fa-check-circle" style="color: rgba(66,46,180,1);"></i> <p class="ms-2 mb-0 fw-light">Pronunciation - {!!$level_pronunciation["description"]!!}</p>
                                    </div> 
                                @endisset
                                @isset($candidate->fluency)
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="far fa-check-circle" style="color: rgba(66,46,180,1);"></i> <p class="ms-2 mb-0 fw-light">Fluency - {!!$level_fluency["description"]!!}</p>
                                    </div> 
                                @endisset
                                @isset($candidate->grammar)
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="far fa-check-circle" style="color: rgba(66,46,180,1);"></i> <p class="ms-2 mb-0 fw-light">Grammar - {!!$level_grammar["description"]!!}</p>
                                    </div> 
                                @endisset
                            </div>
                        </div>
                    @endif
                    <div class="col-lg-4 mb-3 mb-lg-0 text-dark">
                        <div class="p-4 rounded-1r h-100" style="background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(214,213,219,1) 100%);">
                            <h4 class="mb-4 text-center text-md-start text-uppercase text-purple text-nowrap">Other Information</h4>
                            <div><span class="fw-light" style="font-family: Assistant,sans-serif">{!!$candidate->extras!!}</span></div>
                        </div>
                    </div>
                    <div class="col-lg-4 mb-3 mb-lg-0 text-dark">
                        <div class="p-4 rounded-1r h-100" style="background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(214,213,219,1) 100%);">
                            <h4 class="mb-4 text-center text-md-start text-uppercase text-purple">Attachments</h4>
                            @foreach($attachments as $attachment)
                                @php
                                    $filename = explode('/',$attachment->attachment);
                                    $filename= $filename[count($filename) - 1];
                                @endphp
                                <a class="fw-light text-dark my-3 text-decoration-none" style="font-family: Assistant,sans-serif" href="{!!asset('uploads/'.$attachment->attachment)!!}"  target="_blank"><i class="fas fa-file me-2"></i>{!!$filename!!}</a> <br><br>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="row">

                    @isset($candidate->professional_resume)
                        <div id="pro_resume" class="col-lg-12 position-relative mt-lg-5 mt-3">
                            <img class="position-absolute" src="{{asset('images/professional_resume.svg')}}" alt="Professional Resume" style="max-width: 6.3rem; left: 0;top: 0;right: 0;margin: auto;">
                            <div class="p-md-5 p-4 rounded-1r bg-white mt-5 text-dark">
                                <h5 class="mt-lg-4 mt-5 mb-3 text-purple fw-bold text-center text-md-start text-uppercase">PROFESSIONAL RESUME</h5>
                                @php
                                    $academic_resume = Str::swap([
                                        'Institution Name:' => '<strong>Institution Name:</strong>',
                                        'Field of study:' => '<strong>Field of study:</strong>',
                                    ], $candidate->academic_resume);
                                    $professional_resume = Str::swap([
                                        'Company name:' => '<strong>Company name:</strong>',
                                        'Position:' => '<strong>Position:</strong>',
                                        'Duration:' => '<strong>Duration:</strong>',
                                        'Description:' => '<strong>Description:</strong>',
                                    ], $candidate->professional_resume);
                                @endphp 
                                <div id="pro_resume_content">
                                    <div id="collapseProResume" class="panel-collapse collapse">
                                        <p class="d-block d-md-none">{!! nl2br($professional_resume)!!}</p>
                                    </div>
                                    <p class="d-none d-md-block">{!! nl2br($professional_resume)!!}</p>
                                </div>
                                <div class="text-end d-block d-md-none">
                                    <a class="collapse-option text-decoration-none" data-bs-toggle="collapse" data-parent="#accordion" href="#collapseProResume">
                                        <span class="text-purple">Read more <i class="fas fa-plus fa-sm"></i></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endisset
                    @isset($candidate->academic_resume)
                        <div id="aca_resume" class="col-lg-12 position-relative mt-lg-5 mt-3">
                            <img class="position-absolute" src="{{asset('images/academic_resume.svg')}}" alt="Academic Resume" style="max-width: 6.3rem; left: 0;top: 0;right: 0;margin: auto;">
                            <div class="p-md-5 p-4 rounded-1r bg-white my-lg-5 mt-5 mb-3 text-dark"> 
                                <h5 class="mt-lg-4 mt-5 mb-3 text-purple fw-bold text-center text-md-start text-uppercase">ACADEMIC RESUME</h5>
                                
                                <div id="aca_resume_content">
                                    <div id="collapseAcaResume" class="panel-collapse collapse">
                                        <p class="d-block d-md-none">{!! nl2br($academic_resume )!!}</p>
                                    </div>
                                    <p class="d-none d-md-block">{!! nl2br($academic_resume )!!}</p>
                                </div>
 
                                <div class="text-end d-block d-md-none">
                                    <a class="collapse-option text-decoration-none" data-bs-toggle="collapse" data-parent="#accordion" href="#collapseAcaResume">
                                        <span class="text-purple">Read more <i class="fas fa-plus fa-sm"></i></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endisset
                </div>

                @if ($candidate->IsSkillVisible)
                    @isset($personality_profile)
                        <div id="skr" class="p-xl-5 p-4 rounded-1r bg-white mb-lg-5 mb-3 position-relative">
                            <a class="d-block d-md-none position-absolute" href="#mdlskr-info" data-bs-toggle="modal" data-bs-target="#mdlskr-info" style="right: 20px; z-index: 3;"><i class="fas fa-info-circle text-purple"></i></a>
                            <div class="row text-dark">
                                <div class="col-lg-4">
                                    <h4 class="fw-normal px-lg-5 text-center text-md-start text-uppercase text-purple">SOFT SKILLS RADAR<br> <span class="fw-bold">{!!$candidate->nickname!!}</span></h4>
                                    <img class="img-fluid p-5" src="{{asset('images/personality-profile.svg')}}" alt="Personality Profile">
                                </div>
                                <div class="col-lg-8">
                                    <div id="collapseSoftSkills" class="panel-collapse d-md-block collapse">
                                        <div class="row">
                                            <div class="col-sm-6 col-xl-4">
                                                @if ($personality_profile->apego_a_normas > 0)
                                                    <div>
                                                        @php
                                                            $desc_compliance_rules = "Ability to comprehend and practice the organization's different policies, concepts, norms, and processes to behave ethically and professionally.";
                                                        @endphp
                                                        <label class="control-label">Compliance with rules: <a class="text-dark" @popper({{$desc_compliance_rules}})><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="ApegoANormas" data-rating="{{$personality_profile->apego_a_normas}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->trabajo_en_equipo > 0)
                                                    <div>
                                                        <label class="control-label">Teamwork: <a class="text-dark" @popper(Ability to promote, encourage and maintain efficient collaborative relationships with colleagues to integrate common efforts and achieve tangible results.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="TrabajoEnEquipo" data-rating="{{$personality_profile->trabajo_en_equipo}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->trabajo_bajo_presion > 0)
                                                    <div>
                                                        <label class="control-label">Work under pressure: <a class="text-dark" @popper(Ability to remain emotionally stable in situations of stress or adversity, ensuring good performance.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="TrabajoBajoPresion" data-rating="{{$personality_profile->trabajo_bajo_presion}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->liderazgo > 0)
                                                    <div>
                                                        <label class="control-label">Leadership: <a class="text-dark" @popper(Ability to motivate, secure, and inspire others, directing them to perform duties and leading them toward the accomplishment of shared goals)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Liderazgo" data-rating="{{$personality_profile->liderazgo}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->manejo_de_conflictos > 0)
                                                    <div>
                                                        @php
                                                            $desc_conclict_management = "Ability to respond to, recognize, and resolve disputes rationally and strategically to establish common agreements for both parties' benefit and the business.";
                                                        @endphp
                                                        <label class="control-label">Conflict management: <a class="text-dark" @popper({{$desc_conclict_management}})><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="ManejoDeConflictos" data-rating="{{$personality_profile->manejo_de_conflictos}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->compromiso > 0)
                                                    <div>
                                                        @php
                                                            $desc_commitment = "Willingness to participate and share the organization's beliefs and objectives, resulting in stronger motivation to satisfy expectations and standards.";
                                                        @endphp
                                                        <label class="control-label">Commitment: <a class="text-dark" @popper({{$desc_commitment}})><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Compromiso" data-rating="{{$personality_profile->compromiso}}"></div>
                                                    </div><br>   
                                                @endif                                                                             
                                                @if ($personality_profile->actitud_de_servicio > 0)
                                                    <div>
                                                        <label class="control-label">Attitude of service: <a class="text-dark" @popper(Ability to recognize, attend to, solve, and/or channel the demands of internal and external clients, demonstrating a strong focus on problem-solving with kindness and a positive attitude.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="ActitudDeServicio" data-rating="{{$personality_profile->actitud_de_servicio}}"></div>
                                                    </div>
                                                    <br>
                                                @endif                                                                                                             
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                @if ($personality_profile->enfoque_a_resultados > 0)
                                                    <div>
                                                        <label class="control-label">Results focused: <a class="text-dark" @popper(Ability to accomplish goals by keeping track of progress and taking corrective action as needed, driven by commitment and internal motivation.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="EnfoqueAResultados" data-rating="{{$personality_profile->enfoque_a_resultados}}"></div>
                                                    </div><br>
                                                @endif                                        
                                                @if ($personality_profile->solucion_de_problemas > 0)
                                                    <div>
                                                        @php
                                                            $desc_problem_solving = "Ability to gather pertinent knowledge, recognize problems' crucial components, their ramifications, and the specifics necessary to decide on the best course of action for resolving them.";
                                                        @endphp
                                                        <label class="control-label">Problem solving: <a class="text-dark" @popper({{$desc_problem_solving}})><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="SolucionDeProblemas" data-rating="{{$personality_profile->solucion_de_problemas}}"></div>
                                                    </div><br>
                                                @endif                                        
                                                @if ($personality_profile->adaptabilidad > 0)
                                                    <div>
                                                        <label class="control-label">Adaptability: <a class="text-dark" @popper(Ability to understand, accept, manage and incorporate new ideas or approaches and adjust effectively to different environments.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Adaptabilidad" data-rating="{{$personality_profile->adaptabilidad}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->toma_de_decisiones > 0)
                                                    <div>
                                                        <label class="control-label">Decision making: <a class="text-dark" @popper(Ability to choose between different alternatives logically through analyzing and evaluating information, and provide solutions and achieve objectives.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="TomaDeDecisiones" data-rating="{{$personality_profile->toma_de_decisiones}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->control_de_procesos > 0)
                                                    <div>
                                                        <label class="control-label">Process control: <a class="text-dark" @popper(Maintaining control over activities and variables by observation, regulation, and follow-up that enables deviations to be corrected.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="ControlDeProcesos" data-rating="{{$personality_profile->control_de_procesos}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->organizacion > 0)
                                                    <div>
                                                        <label class="control-label">Organization: <a class="text-dark" @popper(Ability to order, prioritize, and optimally distribute workloads and resources to meet objectives.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Organizacion" data-rating="{{$personality_profile->organizacion}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->iniciativa > 0)
                                                    <div>
                                                        <label class="control-label" >Initiative: <a class="text-dark" @popper(Ability to anticipate events and take actions and/or solutions motivated by curiosity and self-determination.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Iniciativa" data-rating="{{$personality_profile->iniciativa}}"></div>
                                                    </div><br> 
                                                @endif                                        
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                @if ($personality_profile->sociabilidad > 0)
                                                    <div>
                                                        <label class="control-label">Sociability: <a class="text-dark" @popper(Ability to relate to different groups (peers, collaborators, or other departments) based on inclusion and integration.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Sociabilidad" data-rating="{{$personality_profile->sociabilidad}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->capacidad_de_aprendizaje > 0)
                                                    <div>
                                                        <label class="control-label">Learning capacity: <a class="text-dark" @popper(Willingness and aptitude to pick up new information and acquire new abilities to make their task more effective.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="CapacidadDeAprendizaje" data-rating="{{$personality_profile->capacidad_de_aprendizaje}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->inteligencia_emocional > 0)
                                                    <div>
                                                        <label class="control-label">Emotional intelligence: <a class="text-dark" @popper(Ability to recognize and control emotions in a way that helps to overcome challenges and build connections.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="InteligenciaEmocional" data-rating="{{$personality_profile->inteligencia_emocional}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->responsabilidad > 0)
                                                    <div>
                                                        @php
                                                            $desc_responsability = "Ability to assume a high sense of duty that ensures compliance with the organization's actions and commitments while adhering to the required standards.";
                                                        @endphp
                                                        <label class="control-label">Responsibility: <a class="text-dark" @popper({{$desc_responsability}})><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Responsabilidad" data-rating="{{$personality_profile->responsabilidad}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->creatividad > 0)
                                                    <div>
                                                        <label class="control-label">Creativity: <a class="text-dark" @popper(Ability to develop solutions for issues or circumstances that develop in the workplace to improve the company.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Creatividad" data-rating="{{$personality_profile->creatividad}}"></div>
                                                    </div><br>
                                                @endif
                                                @if ($personality_profile->planeacion > 0)
                                                    <div>
                                                        <label class="control-label">Planning: <a class="text-dark" @popper(Ability to anticipate favorable or risky events and develop suitable action plans to effectively achieve objectives while maximizing return on resources.)><i class="fas fa-info-circle"></i></a></label>
                                                        <div id="Planeacion" data-rating="{{$personality_profile->planeacion}}"></div>
                                                    </div><br>
                                                @endif                                        
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                                <div class="col-lg-12 px-lg-5 mt-4 d-none d-md-flex">
                                    <p>The soft skill's radar is a synthesis of the data acquired through the application of numerous psychometric evaluations to the candidate; in this way, the level of development of the candidate's soft skills may be measured and estimated. The star rating system, which spans from 1 to 5, can be interpreted as follows: 1 (weakness), 2 (potential for improvement), 3 (average), 4 (above average), 5 (outstanding).</p>
                                </div>
                                <div class="text-end d-block d-md-none">
                                    <a class="collapse-option text-decoration-none" data-bs-toggle="collapse" data-parent="#accordion" href="#collapseSoftSkills">
                                        <span class="text-purple">Read more <i class="fas fa-plus fa-sm"></i></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endisset
                @endif

                @php
                    $videos = $videos->where('visible',1);
                @endphp
                @isset($videos)
                    @if($videos->isNotEmpty())
                        <div id="videos_gallery" class="row justify-content-center pb-lg-5">
                            <h4 class="pb-lg-5 pt-0 py-4 mb-0 text-center text-uppercase">VIDEO INTERVIEW</h4>
                            @foreach($videos as $video)
                                <div class="col-lg-4 mb-3 mb-lg-0">
                                    <div>
                                        <a class="text-yellow-capita" onclick='loadVideo(this);' data-url-video='{{$video->link}}' data-question="{!! $video->question !!}" style='text-decoration: none; cursor:pointer;'>
                                            <div class='text-center bg-preview-vi rounded-1r-top'>
                                                <i class='fas fa-play-circle fa-4x mx-auto' style='align-self: center;'></i>
                                            </div>
                                            <div class="bg-white rounded-1r-bottom p-4">
                                                <p class="text-dark m-0">{!! $video->question !!}</p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                @endisset

                @isset($candidate->scheme)
                    @if(!$candidate->hide_pay)
                        <div class="row">
                            <div class="col-lg-6 pb-lg-5 py-3 pt-0">
                                <div class="p-md-5 p-4 rounded-1r bg-white text-dark h-100">
                                    <h5 class="mb-4 text-purple fw-bold text-center text-md-start text-uppercase">{{$candidate->frequency}} Cost</h5>
                                    <p class="text-purple fs-1 text-center text-center text-md-start"><span class="fw-bold">$</span> {{$candidate->cost}} {{$candidate->currency}}</p>
                                </div>
                            </div>
                            @php
                                $pay_structures = App\Classes\PayStructure::getData();
                                $pay_structure = collect($pay_structures)->filter(function($item) use($candidate){
                                    return $item["id"] == $candidate->scheme;
                                })->first();
                            @endphp
                            @isset($pay_structure)
                                <div class="col-lg-6 pb-lg-5">
                                    <div class="p-md-5 p-4 rounded-1r bg-white text-dark h-100">
                                        <h5 class="mb-4 text-purple fw-bold text-center text-md-start text-uppercase">Pay Structure</h5>
                                        <p class="text-purple fs-1 text-center text-center text-md-start">{!!$pay_structure["name"]!!}</p>
                                    </div>
                                </div>
                            @endisset
                        </div>
                    @endif
                @endisset

                @isset($collage)
                    @if($collage->isNotEmpty())
                        <div id="collage" class="row justify-content-center mb-lg-5">
                            <h4 class="pb-lg-5 pt-lg-0 py-4 mb-0 text-center text-uppercase text-center d-none d-md-block">Hobbies and interests</h4>
                            <h4 class="py-md-5 py-4 mb-0 text-center text-uppercase text-center d-block d-md-none">Hobbies and interests</h4>
                            @foreach($collage as $image)
                                <div class="col-lg-4">
                                    <div class="image-cover image-position-center mb-3 mb-lg-0 rounded-1r" style="background-image: url(/uploads/{{$image->image}}); height:20rem;"></div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                @endisset

                <div class="row text-center py-lg-0 py-3 justify-content-center">
                    <div class="col-lg-12 mb-lg-5">
                        <div class="p-md-5 p-4 rounded-1r bg-white text-dark h-100">
                            @if($candidate->status == '3')
                                <span class="badge badge-pill badge-primary mb-4">Candidate accepted at {{$candidate->updated_at->format('Y-m-d')}} <i class="fas fa-check text-white"></i></span> <br>
                                <span class="h5">
                                    Got it. Our recruitment team will contact you and {!!$candidate->nickname!!} to coordinate a final interview.
                                </span>
                            @elseif($candidate->status == '4')
                                <span class="badge badge-pill badge-secondary mb-4">Candidate rejected at {{$candidate->updated_at->format('Y-m-d')}} <i class="fas fa-times text-white"></i></span><br>
                                <span class="h5">
                                    We understand. We'll keep sending you more candidates soon.
                                </span>
                            @else   
                                <h1 class="text-uppercase fw-bold d-md-block d-none text-purple">WANT TO INTERVIEW  {!!$candidate->nickname!!} ?</h1>
                                <h1 class="text-uppercase fw-bold d-md-none d-block text-purple">WANT TO INTERVIEW  <br> {!!$candidate->nickname!!} ?</h1>
                                <div class="d-flex justify-content-center mt-4">
                                    <form method="post" enctype="multipart/form-data" action="{{route('profile.update',['id' => $candidate->id, 'status' => '3'])}}">
                                        @csrf
                                        <button type="submit" class="btn-lg btn-success text-white fw-bold shadow text-decoration-none px-md-5 px-3 fs-2 me-3 me-sm-5 rounded-3"><i class="fas fa-check text-white"></i> I do!</button>
                                    </form>
                                    <form method="post" enctype="multipart/form-data" action="{{route('profile.update',['id' => $candidate->id , 'status' => '4'])}}">
                                        @csrf
                                        <button type="submit" class="btn-lg btn-danger text-white fw-bold shadow text-decoration-none px-md-5 px-3 fs-2 ms-3 ms-sm-5 rounded-3"><i class="fas fa-times text-white"></i> Pass</button>
                                    </form>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    
<!-- MODAL REPRODUCTOR VIDEO INTERVIEWS -->
<div class="modal fade" id="mdlVideoInterview" tabindex="-1" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <div>
            <h2 class="m-0">Video Interview</h2>
            <p class="mb-0">Please note that the candidates' answers are live and have not been previously rehearsed.</p>
          </div>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="font-size: 18px;">×</button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-lg-12">
                    <div class="text-center embed-interview-candidate embed-responsive embed-responsive-16by9">
                        <video width="400" id="reproductor_VI" controls="true" style="max-width:100%;"></video>
                    </div>
                    <p id="question" class="fw-bold text-center mt-3"></p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

<!-- SOFT SKILLS RADAR INFO -->
<div class="modal fade" id="mdlskr-info" tabindex="-1" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="font-size: 18px;">×</button>
        </div>
        <div class="modal-body">
            <p>The soft skill's radar is a synthesis of the data acquired through the application of numerous psychometric evaluations to the candidate; in this way, the level of development of the candidate's soft skills may be measured and estimated. The star rating system, which spans from 1 to 5, can be interpreted as follows: 1 (weakness), 2 (potential for improvement), 3 (average), 4 (above average), 5 (outstanding).</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

<style>
    h1,h2,h3,h4,h5,h6{
        font-family: futura-pt-bold,sans-serif;
    }
    p{
        font-family: Assistant,sans-serif;
    }
</style>
@endsection
@push('styles')
    <link rel="stylesheet" type="text/css" href="{{asset('css/star-rating-svg.css')}}">
@endpush

@push('scripts')
    <script src="{{asset('js/jquery.star-rating-svg.js')}}"></script>
    <script src="{{asset('js/personality-profile.js')}}"></script>

    <script>
        $( document ).ready(function() {
            $('.panel-collapse').on('hidden.bs.collapse', function () {
               $(this).parent().find("a.collapse-option span").html("Read more <i class='fas fa-plus fa-sm'></i>");
            });

            $('.panel-collapse').on('show.bs.collapse', function () {
                $(this).parent().find("a.collapse-option span").html("Hide details <i class='fas fa-minus fa-sm'></i>");
            });

            $('#mdlVideoInterview').on('hidden.bs.modal', function () {
                $('#reproductor_VI').attr('src', '');
                var iframe = $("#reproductor_VI").parent().find('iframe').remove();
            })
        });
       
        function loadVideo(element){
            $('.loader').removeClass('d-none');
            var url_video = $(element).data('url-video');
            var question = $(element).data('question');
            var isIframe = url_video.includes('<iframe');

            
            if(isIframe){
                $('#question').text(question);
                $('#mdlVideoInterview').modal('show');
                var iframe = $("#reproductor_VI").parent().find('iframe').remove();
                $("#reproductor_VI").parent().append(url_video);
                $("#reproductor_VI").addClass('d-none');
                $(".loader").addClass('d-none');
            }
            else{
                $.ajax({
                    method: 'GET',
                    url: "{{route('profile.loadvideo')}}",
                    data: { 
                        'url_video' : url_video
                    },
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                }).done(function(data){
                    var iframe = $("#reproductor_VI").parent().find('iframe').remove();
                    $("#reproductor_VI").removeClass('d-none');
                    $("#reproductor_VI").attr("src",data);
                    $('#question').text(question);
                    $('#mdlVideoInterview').modal('show');
                    $('.loader').addClass('d-none');
                }).fail(function(response){
                    $('.loader').addClass('d-none');
                    alert('message: ' +response.responseText + ' | status: ' + response.status);
                });
            }
           
        }
    </script>
@endpush