@extends('admin.layouts.admin_app')
@include('admin.include.form-styles')
@section('dashboard_content')

<header class="page-header">
    <h2>Candidate</h2>
</header>
<section class="panel">
    <header class="panel-heading">
        <h2 class="panel-title">New Candidate</h2>
        <div class="pull-right">
            <a href="{{ route('candidate.index') }}"
                class="btn btn-default">
                Cancel
            </a>
            <button type="submit" class="btn btn-primary"
                form="candidate-form">
                Save
            </button>
        </div>
    </header>
    <div class="panel-body">
        <form id="candidate-form"
                action="{{ $candidate->exists ? route('candidate.update', $candidate->id): route('candidate.store') }}"
                class="form-horizontal"
                method="post"
                onsubmit="$('[form=\'candidate-form\']').prop('disabled', true)"
                enctype="multipart/form-data">

            @if($candidate->exists)
                @method('PATCH')
            @endif

            @csrf

            <div class="row panel-group" id="accordion">
                <div class="col-lg-8">
                    <div id="gi" class="row index-content">
                        <div class="card">
                            <div class="row" style="display:flex; align-items:center;">
                                <div class="col-md-7">
                                    <h3 class="margin-x panel-title">
                                        <i class="fa fa-info-circle" aria-hidden="true"></i>
                                        General Information
                                    </h3><br><br>
                                </div>
                                <div class="col-md-5 text-right">
                                    <a href="#" data-toggle="modal" data-target="#mdlCandidates" class="btn btn-primary" style="display:inline-flex;"><span style="align-self:center;margin-right: 10px;">Import candidate from</span> <span class="ch"></span></a>
                                </div>
                            </div>

                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group {{ $errors->has('first_name') ? 'has-error' : null }}">
                                            <label class="control-label" for="first_name">First Name:</label>
                                            <input type="text" id="first_name"
                                                name="first_name"
                                                class="form-control"
                                                value="{!! old('first_name') ?? $candidate->first_name !!}">
                                            @error('first_name')
                                                <label class="help-block">
                                                    {{ $message }}
                                                </label>
                                            @enderror
                                            
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group {{ $errors->has('last_name') ? 'has-error' : null }}">
                                            <label class="control-label" for="last_name">Last Name:</label>
                                            <input type="text" id="last_name"
                                                name="last_name"
                                                class="form-control"
                                                value="{!! old('last_name') ?? $candidate->last_name !!}">
                                            <label class="help-block">
                                                {{ $errors->has('last_name') ? $errors->first('last_name') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div> <br>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group {{ $errors->has('nickname') ? 'has-error' : null }}">
                                            <label class="control-label" for="name">Nickname:</label>
                                            <input type="text" id="nickname"
                                                name="nickname"
                                                class="form-control"
                                                value="{!! old('nickname') ?? $candidate->nickname !!}">
                                            <label class="help-block">
                                                {{ $errors->has('nickname') ? $errors->first('nickname') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div> <br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="summernote-container form-group {{ $errors->has('description') ? 'has-error' : null }}">
                                            <label class="control-label" for="description">Description:</label>
                                            <textarea class="form-contro summernote" id="description" rows="5"name="description">{!! old('description') ?? $candidate->description!!}</textarea>
                                            <label class="help-block">
                                                {{ $errors->has('description') ? $errors->first('description') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div> <br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="summernote-container form-group {{ $errors->has('assesment') ? 'has-error' : null }}">
                                            <label class="control-label" for="cw_assesment">Assessment:</label>
                                            <textarea class="form-control summernote" id="cw_assesment" rows="5" name="assesment"> {!! old('assesment') ?? $candidate->assesment !!}</textarea>
                                            <label class="help-block">
                                                {{ $errors->has('assesment') ? $errors->first('assesment') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div> <br>
                                
                                <div class="row d-flex">
                                    <div class="col-lg-10">
                                        <label class="control-label" style="margin-bottom:2rem;">Soft Skills Radar:</label>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="custom-control custom-switch">                                                                                
                                            <input type="checkbox" id="idSkill_visible" name="skill_visible" @IF($candidate->IsSkillVisible) checked @endif class="custom-control-input">
                                            <label class="custom-control-label h4" for="customSwitch1">Visible</label>
                                        </div>                                   
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="col-sm-6 col-xl-4">
                                            <div class="form-group">
                                                @php
                                                    $desc_compliance_rules = "Ability to comprehend and practice the organization's different policies, concepts, norms, and processes to behave ethically and professionally.";
                                                @endphp
                                                <input type="hidden" name="apego_a_normas" value="{{isset($personality_profile) ? $personality_profile->apego_a_normas : ( old('apego_a_normas') ?? $candidate->apego_a_normas ) }}">
                                                <label class="control-label">Compliance with rules: <a class="text-dark" style="font-size: 16px;" @popper({{$desc_compliance_rules}})><i class="fas fa-info-circle"></i></a></label>
                                                <div id="ApegoANormas" data-rating="{{isset($personality_profile) ? $personality_profile->apego_a_normas : ( old('apego_a_normas') ?? $candidate->apego_a_normas ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="trabajo_en_equipo" value="{{isset($personality_profile) ? $personality_profile->trabajo_en_equipo : ( old('trabajo_en_equipo') ?? $candidate->trabajo_en_equipo ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->trabajo_en_equipo : ( old('trabajo_en_equipo') ?? $candidate->trabajo_en_equipo ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="trabajo_bajo_presion" value="{{isset($personality_profile) ? $personality_profile->trabajo_bajo_presion : ( old('trabajo_bajo_presion') ?? $candidate->trabajo_bajo_presion ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->trabajo_bajo_presion : ( old('trabajo_bajo_presion') ?? $candidate->trabajo_bajo_presion ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="liderazgo" value="{{isset($personality_profile) ? $personality_profile->liderazgo : ( old('liderazgo') ?? $candidate->liderazgo ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->liderazgo : ( old('liderazgo') ?? $candidate->liderazgo ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                @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
                                                <input type="hidden" name="manejo_de_conflictos" value="{{isset($personality_profile) ? $personality_profile->manejo_de_conflictos : ( old('manejo_de_conflictos') ?? $candidate->manejo_de_conflictos ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->manejo_de_conflictos : ( old('manejo_de_conflictos') ?? $candidate->manejo_de_conflictos ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                @php
                                                    $desc_commitment = "Willingness to participate and share the organization's beliefs and objectives, resulting in stronger motivation to satisfy expectations and standards.";
                                                @endphp
                                                <input type="hidden" name="compromiso" value="{{isset($personality_profile) ? $personality_profile->compromiso : ( old('compromiso') ?? $candidate->compromiso ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->compromiso : ( old('compromiso') ?? $candidate->compromiso ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="actitud_de_servicio" value="{{isset($personality_profile) ? $personality_profile->actitud_de_servicio : ( old('actitud_de_servicio') ?? $candidate->actitud_de_servicio ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->actitud_de_servicio : ( old('actitud_de_servicio') ?? $candidate->actitud_de_servicio ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="enfoque_a_resultados" value="{{isset($personality_profile) ? $personality_profile->enfoque_a_resultados : ( old('enfoque_a_resultados') ?? $candidate->enfoque_a_resultados ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->enfoque_a_resultados : ( old('enfoque_a_resultados') ?? $candidate->enfoque_a_resultados ) }}"></div>
                                            </div><br>
                                        </div>
                                        <div class="col-sm-6 col-xl-4">
                                            <div class="form-group">
                                                @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
                                                <input type="hidden" name="solucion_de_problemas" value="{{isset($personality_profile) ? $personality_profile->solucion_de_problemas : ( old('solucion_de_problemas') ?? $candidate->solucion_de_problemas ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->solucion_de_problemas : ( old('solucion_de_problemas') ?? $candidate->solucion_de_problemas ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="adaptabilidad" value="{{isset($personality_profile) ? $personality_profile->adaptabilidad : ( old('adaptabilidad') ?? $candidate->adaptabilidad ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->adaptabilidad : ( old('adaptabilidad') ?? $candidate->adaptabilidad ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="toma_de_decisiones" value="{{isset($personality_profile) ? $personality_profile->toma_de_decisiones : ( old('toma_de_decisiones') ?? $candidate->toma_de_decisiones ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->toma_de_decisiones : ( old('toma_de_decisiones') ?? $candidate->toma_de_decisiones ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="control_de_procesos" value="{{isset($personality_profile) ? $personality_profile->control_de_procesos : ( old('control_de_procesos') ?? $candidate->control_de_procesos ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->control_de_procesos : ( old('control_de_procesos') ?? $candidate->control_de_procesos ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="organizacion" value="{{isset($personality_profile) ? $personality_profile->organizacion : ( old('organizacion') ?? $candidate->organizacion ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->organizacion : ( old('organizacion') ?? $candidate->organizacion ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="iniciativa" value="{{isset($personality_profile) ? $personality_profile->iniciativa : ( old('iniciativa') ?? $candidate->iniciativa ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->iniciativa : ( old('iniciativa') ?? $candidate->iniciativa ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="sociabilidad" value="{{isset($personality_profile) ? $personality_profile->sociabilidad : ( old('sociabilidad') ?? $candidate->sociabilidad ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->sociabilidad : ( old('sociabilidad') ?? $candidate->sociabilidad ) }}"></div>
                                            </div><br>
                                        </div>
                                        <div class="col-sm-6 col-xl-4">
                                            <div class="form-group">
                                                <input type="hidden" name="capacidad_de_aprendizaje" value="{{isset($personality_profile) ? $personality_profile->capacidad_de_aprendizaje : ( old('capacidad_de_aprendizaje') ?? $candidate->capacidad_de_aprendizaje ) }}">
                                                <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="{{isset($personality_profile) ? $personality_profile->capacidad_de_aprendizaje : ( old('capacidad_de_aprendizaje') ?? $candidate->capacidad_de_aprendizaje ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="inteligencia_emocional" value="{{isset($personality_profile) ? $personality_profile->inteligencia_emocional : ( old('inteligencia_emocional') ?? $candidate->inteligencia_emocional )  }}">
                                                <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" class="star-rating" data-rating="{{isset($personality_profile) ? $personality_profile->inteligencia_emocional : ( old('inteligencia_emocional') ?? $candidate->inteligencia_emocional )  }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                @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
                                                <input type="hidden" name="responsabilidad" value="{{isset($personality_profile) ? $personality_profile->responsabilidad : ( old('responsabilidad') ?? $candidate->responsabilidad ) }}">
                                                <label class="control-label">Responsibility: <a class="text-dark" @popper({{$desc_responsability}})><i class="fas fa-info-circle"></i></a></label>
                                                <div id="Responsabilidad" class="star-rating" data-rating="{{isset($personality_profile) ? $personality_profile->responsabilidad : ( old('responsabilidad') ?? $candidate->responsabilidad ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="creatividad" value="{{isset($personality_profile) ? $personality_profile->creatividad : ( old('creatividad') ?? $candidate->creatividad ) }}">
                                                <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" class="star-rating" data-rating="{{isset($personality_profile) ? $personality_profile->creatividad : ( old('creatividad') ?? $candidate->creatividad ) }}"></div>
                                            </div><br>
                                            <div class="form-group">
                                                <input type="hidden" name="planeacion" value="{{isset($personality_profile) ? $personality_profile->planeacion : ( old('planeacion') ?? $candidate->planeacion ) }}">
                                                <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" class="star-rating" data-rating="{{isset($personality_profile) ? $personality_profile->planeacion : ( old('planeacion') ?? $candidate->planeacion ) }}"></div>
                                            </div><br>
                                        </div>
                                    </div> 
                                    <div class="col-lg-12">
                                        <p class="col-lg-12">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><br>
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="summernote-container form-group {{ $errors->has('academic_resume') ? 'has-error' : null }}">
                                            <label class="control-label" for="academic_resume">Academic Resume:</label>
                                            <textarea class="form-control summernote" id="academic_resume" rows="5" name="academic_resume">{!! old('academic_resume') ?? $candidate->academic_resume !!}</textarea>
                                            <label class="help-block">
                                                {{ $errors->has('academic_resume') ? $errors->first('academic_resume') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div> <br>   
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="summernote-container form-group {{ $errors->has('professional_resume') ? 'has-error' : null }}">
                                            <label class="control-label" for="professional_resume">Professional Resume:</label>
                                            <textarea class="form-control summernote" id="professional_resume" rows="5" name="professional_resume">{!! old('professional_resume') ?? $candidate->professional_resume !!}</textarea>
                                            <label class="help-block">
                                                {{ $errors->has('professional_resume') ? $errors->first('professional_resume') : null }}
                                            </label>
                                        </div>
                                    </div>
                                </div> <br>   
                                <div class="row">
                                    <div class="col-lg-12 text-right">
                                        <div style="align-self: center;">
                                            <div class="custom-control custom-switch">                                                                                
                                                <input type="checkbox" id="idhide_pay" name="hide_pay" @IF($candidate->hide_pay) checked @endif class="custom-control-input">
                                                <label class="custom-control-label h4" for="idhide_pay">Do not display</label>
                                            </div>                                   
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div style="display: flex;">
                                            <div class="form-group {{ $errors->has('frequency') ? 'has-error' : null }}">
                                                <label class="control-label" for="scheme">Frequency:</label>
                                                <select name="frequency" id="frequency" class="form-control @error('frequency') is-invalid @enderror">
                                                    <option {{ old('frequency', $candidate->frequency) == 'biweekly' ? 'selected' : null }} 
                                                        value="biweekly">Bi-Weekly
                                                    </option>
                                                    <option {{ old('frequency', $candidate->frequency) == 'monthly' ? 'selected' : null }} 
                                                        value="monthly">Monthly
                                                    </option>
                                                </select>
                                                @error('frequency')
                                                    <label class="help-block">
                                                       {{ $message }}
                                                    </label>
                                                @enderror
                                            </div>
    
                                            <div class="form-group {{ $errors->has('cost') ? 'has-error' : null }}" style="padding-left: 1rem; padding-right: 1rem;">
                                                <label class="control-label" for="cost">Cost:</label>
                                                <input type="text" id="cost"
                                                    name="cost"
                                                    class="form-control"
                                                    oninput="validateNumber(this);"
                                                    value="{!! old('cost') ?? $candidate->cost !!}">
                                                <label class="help-block">
                                                    {{ $errors->has('cost') ? $errors->first('cost') : null }}
                                                </label>
                                            </div>
    
                                            <div class="form-group {{ $errors->has('currency') ? 'has-error' : null }}">
                                                <label class="control-label" for="scheme">Currency:</label>
                                                <select name="currency" id="currency" class="form-control @error('currency') is-invalid @enderror">
                                                    <option {{ old('currency', $candidate->currency) == 'USD' ? 'selected' : null }} 
                                                        value="USD">USD
                                                    </option>
                                                    <option {{ old('currency', $candidate->currency) == 'MXN' ? 'selected' : null }} 
                                                        value="MXN">MXN
                                                    </option>
                                                </select>
                                                @error('currency')
                                                    <label class="help-block">
                                                       {{ $message }}
                                                    </label>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group {{ $errors->has('scheme') ? 'has-error' : null }}">
                                            <label class="control-label" for="scheme">Pay Structure:</label>
                                            <select name="scheme" id="scheme" class="form-control @error('scheme') is-invalid @enderror">
                                                @foreach($pay_structures as $item)
                                                    <option {{ old('scheme', $candidate->scheme) == $item["id"] ? 'selected' : null }} 
                                                        value="{{ $item["id"]}}">{{ $item["name"] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('scheme')
                                                <label class="help-block">
                                                   {{ $message }}
                                                </label>
                                            @enderror
                                        </div>
                                    </div>
                                </div> <br> 
                            </div>

                            <a class="collapse-option" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                Hide details
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div id="gi2" class="row index-content">
                        <div class="card">
                            <h3 class="margin-x panel-title">
                                <i class="fa fa-info-circle" aria-hidden="true"></i>
                                General Information
                            </h3><br><br>

                            <div id="collapseTwo" class="panel-collapse collapse in">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('status') ? 'has-error' : null }}">
                                            <label for="">Status</label>
                                            <select name="status" id="status" class="form-control @error('status') is-invalid @enderror">
                                                @foreach($status_candidates as $status)
                                                    @if(old('status', $candidate->status))
                                                        <option {{ old('status', $candidate->status) == $status["id"] ? 'selected' : null }} 
                                                            value="{{ $status["id"]}}">{{ $status["status"] }}
                                                        </option>
                                                    @else
                                                        <option {{ old('status', $candidate->status) == "1" ? 'selected' : null }} 
                                                            value="{{ $status["id"]}}">{{ $status["status"] }}
                                                        </option>
                                                    @endif 
                                                @endforeach
                                            </select>
                                            @error('status')
                                                <label class="help-block">
                                                   {{ $message }}
                                                </label>
                                            @enderror
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12" style="display:flex; justify-content: space-between">
                                        <label class="control-label">English Level:</label>
                                        <div style="align-self: center;">
                                            <div class="custom-control custom-switch">                                                                                
                                                <input type="checkbox" id="idhide_level_english" name="hide_level_english" @IF($candidate->hide_level_english) checked @endif class="custom-control-input">
                                                <label class="custom-control-label h4" for="idhide_level_english">Do not display</label>
                                            </div>                                   
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('grammar') ? 'has-error' : null }}">
                                            <label class="control-label" for="grammar">Grammar:</label>
                                            <select name="grammar" id="grammar" class="form-control @error('grammar') is-invalid @enderror">
                                                <option value="">Select...</option>
                                                <option {{ old('grammar', $candidate->grammar) == 'A1' ? 'selected' : null }} 
                                                    value="A1">A1 (Basic)
                                                </option>
                                                <option {{ old('grammar', $candidate->grammar) == 'A2' ? 'selected' : null }} 
                                                    value="A2">A2 (Upper-Basic)
                                                </option>
                                                <option {{ old('grammar', $candidate->grammar) == 'B1' ? 'selected' : null }} 
                                                    value="B1">B1 (Intermediate)
                                                </option>
                                                <option {{ old('grammar', $candidate->grammar) == 'B2' ? 'selected' : null }} 
                                                    value="B2">B2 (Upper-intermediate)
                                                </option>
                                                <option {{ old('grammar', $candidate->grammar) == 'C1' ? 'selected' : null }} 
                                                    value="C1">C1 (Advanced)
                                                </option>
                                                <option {{ old('grammar', $candidate->grammar) == 'C2' ? 'selected' : null }} 
                                                    value="C2">C2 (Proficient)
                                                </option>
                                            </select>
                                            @error('grammar')
                                                <label class="help-block">
                                                   {{ $message }}
                                                </label>
                                            @enderror
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('vocabulary') ? 'has-error' : null }}">
                                            <label class="control-label" for="vocabulary">Vocabulary:</label>
                                            <select name="vocabulary" id="vocabulary" class="form-control @error('vocabulary') is-invalid @enderror">
                                                <option value="">Select...</option>
                                                <option {{ old('vocabulary', $candidate->vocabulary) == 'A1' ? 'selected' : null }} 
                                                    value="A1">A1 (Basic)
                                                </option>
                                                <option {{ old('vocabulary', $candidate->vocabulary) == 'A2' ? 'selected' : null }} 
                                                    value="A2">A2 (Upper-Basic)
                                                </option>
                                                <option {{ old('vocabulary', $candidate->vocabulary) == 'B1' ? 'selected' : null }} 
                                                    value="B1">B1 (Intermediate)
                                                </option>
                                                <option {{ old('vocabulary', $candidate->vocabulary) == 'B2' ? 'selected' : null }} 
                                                    value="B2">B2 (Upper-intermediate)
                                                </option>
                                                <option {{ old('vocabulary', $candidate->vocabulary) == 'C1' ? 'selected' : null }} 
                                                    value="C1">C1 (Advanced)
                                                </option>
                                                <option {{ old('vocabulary', $candidate->vocabulary) == 'C2' ? 'selected' : null }} 
                                                    value="C2">C2 (Proficient)
                                                </option>
                                            </select>
                                            @error('vocabulary')
                                                <label class="help-block">
                                                   {{ $message }}
                                                </label>
                                            @enderror
                                        </div>
                                    </div> 
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('pronunciation') ? 'has-error' : null }}">
                                            <label class="control-label" for="pronunciation">Pronunciation:</label>
                                            <select name="pronunciation" id="pronunciation" class="form-control @error('pronunciation') is-invalid @enderror">
                                                <option value="">Select...</option>
                                                <option {{ old('pronunciation', $candidate->pronunciation) == 'A1' ? 'selected' : null }} 
                                                    value="A1">A1 (Basic)
                                                </option>
                                                <option {{ old('pronunciation', $candidate->pronunciation) == 'A2' ? 'selected' : null }} 
                                                    value="A2">A2 (Upper-Basic)
                                                </option>
                                                <option {{ old('pronunciation', $candidate->pronunciation) == 'B1' ? 'selected' : null }} 
                                                    value="B1">B1 (Intermediate)
                                                </option>
                                                <option {{ old('pronunciation', $candidate->pronunciation) == 'B2' ? 'selected' : null }} 
                                                    value="B2">B2 (Upper-intermediate)
                                                </option>
                                                <option {{ old('pronunciation', $candidate->pronunciation) == 'C1' ? 'selected' : null }} 
                                                    value="C1">C1 (Advanced)
                                                </option>
                                                <option {{ old('pronunciation', $candidate->pronunciation) == 'C2' ? 'selected' : null }} 
                                                    value="C2">C2 (Proficient)
                                                </option>
                                            </select>
                                            @error('pronunciation')
                                                <label class="help-block">
                                                   {{ $message }}
                                                </label>
                                            @enderror
                                        </div>
                                    </div> 
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group {{ $errors->has('fluency') ? 'has-error' : null }}">
                                            <label class="control-label" for="fluency">Fluency:</label>
                                            <select name="fluency" id="fluency" class="form-control @error('fluency') is-invalid @enderror">
                                                <option value="">Select...</option>
                                                <option {{ old('fluency', $candidate->fluency) == 'A1' ? 'selected' : null }} 
                                                    value="A1">A1 (Basic)
                                                </option>
                                                <option {{ old('fluency', $candidate->fluency) == 'A2' ? 'selected' : null }} 
                                                    value="A2">A2 (Upper-Basic)
                                                </option>
                                                <option {{ old('fluency', $candidate->fluency) == 'B1' ? 'selected' : null }} 
                                                    value="B1">B1 (Intermediate)
                                                </option>
                                                <option {{ old('fluency', $candidate->fluency) == 'B2' ? 'selected' : null }} 
                                                    value="B2">B2 (Upper-intermediate)
                                                </option>
                                                <option {{ old('fluency', $candidate->fluency) == 'C1' ? 'selected' : null }} 
                                                    value="C1">C1 (Advanced)
                                                </option>
                                                <option {{ old('fluency', $candidate->fluency) == 'C2' ? 'selected' : null }} 
                                                    value="C2">C2 (Proficient)
                                                </option>
                                            </select>
                                            @error('fluency')
                                                <label class="help-block">
                                                   {{ $message }}
                                                </label>
                                            @enderror
                                        </div>
                                    </div> 
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        {{-- <input type="hidden" name="extras" id="hdnExtras" value="{!! old('extras') ?? $candidate->extras !!}"> --}}
                                        <div class="summernote-container form-group {{ $errors->has('extras') ? 'has-error' : null }}">
                                            <label class="control-label">Other Information:</label>
                                            <textarea class="form-control summernote" id="extras" rows="5" name="extras"> {!! old('extras') ?? $candidate->extras !!}</textarea>
                                            {{-- <select id="extras" class="extras select-tags" multiple="multiple"></select> --}}
                                            @error('extras')
                                                <div class="alert alert-danger">
                                                    <small>{{ $message }}</small>
                                                </div>
                                            @enderror
                                        </div>
                                    </div> 
                                </div><br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <input type="hidden" name="grouper" id="hdnGrouper"  value="{!! old('grouper') ?? $candidate->grouper !!}">
                                        <div class="form-group {{ $errors->has('grouper') ? 'has-error' : null }}">
                                            <label class="control-label">Tags:</label>
                                            <select id="grouper" class="grouper select-tags" multiple="multiple"></select>
                                            @error('grouper')
                                                <div class="alert alert-danger">
                                                    <small>{{ $message }}</small>
                                                </div>
                                            @enderror
                                        </div>
                                    </div> 
                                </div><br> 
                            </div>

                            <a class="collapse-option" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                Hide details
                            </a>
                        </div>
                    </div>
                    <div id="cw-assesment" class="row index-content">
                        <div class="card">
                            <h3 class="margin-x panel-title">
                                <i class="fas fa-file" aria-hidden="true"></i>
                                Attachments
                            </h3><br><br>

                            <div id="collapseThree" class="panel-collapse collapse in">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <label class="control-label">Attachments:</label>
                                        <div class="form-group {{ $errors->has('attachments') ? 'has-error' : null }}">
                                            <input id="attachments" name="attachments[]" type="file"  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,application/vnd.ms-excel,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" multiple/>
                                        </div>
                                        <div id="attachment_div" class="margin-x">
                                            @isset($attachments)
                                                @foreach($attachments as $attachment)
                                                    @php
                                                        $filename = explode('/',$attachment->attachment);
                                                        $filename= $filename[count($filename) - 1];
                                                    @endphp
                                                    <div>
                                                        <a target="_blank" href='{!!asset('uploads/'.$attachment->attachment)!!}'>{!!$filename!!}</a>
                                                        &nbsp;&nbsp;&nbsp; <i class="fa fa-trash-o text-danger btn"  onclick="openModalDeleteAttachment(this);" data-attachment-id="{{$attachment->id}}" data-attachment-name="{!!$filename!!}"></i>
                                                    </div>
                                                @endforeach
                                            @endisset
                                        </div>
                                    </div> 
                                </div><br>
                            </div>
                            <a class="collapse-option" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                Hide details
                            </a>
                        </div>
                    </div>
                </div> 
                <div class="col-lg-12">
                    <div id="images" class="row index-content">
                        <div class="card">
                            <h3 class="margin-x panel-title">
                                <i class="fas fa-image" aria-hidden="true"></i>
                                Images
                            </h3><br><br>

                            <div id="collapseFour" class="panel-collapse collapse in">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group {{ $errors->has('image_candidate') ? 'has-error' : null }}">
                                            <label class="control-label" for="img">Image:</label>
                                            <div style="display: flex;">
                                                <div>
                                                    <input id="img" name="image_candidate" type="file" onchange="onImageSelected(event)"/>
                                                    <span class="help-block">
                                                        @if($errors->has('image_candidate')) 
                                                            Please capture image
                                                        @endif
                                                    </span>
                                                </div>
                                                @if(isset($candidate->image))
                                                    <img id="preview_img_candidate" style="max-width: 13%; height: auto; margin-left: 2rem;" src="/uploads/{{$candidate->image}}" alt="">
                                                @else
                                                    <img id="preview_img_candidate" style="max-width: 13%; height: auto; margin-left: 2rem;" src="" alt="">
                                                @endif
                                                <input type="hidden" name="preview_image_candidate">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <input type="hidden" name="default_avatar" id="defaultAvatar">
                                        <label class="control-label">Default Avatar:</label><br>
                                        <img class="img-fluid default-avatar" style="max-width: 130px; cursor: pointer;" data-image="images/avatar-default-candidate.svg" src="{{asset('images/avatar-default-candidate.svg')}}" alt="avatar default candidate">
                                    </div>
                                </div> <br>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="control-label" for="img">Collage:</label>
                                            <div class="upload__box">
                                                <div class="upload__btn-box">
                                                  <label class="upload__btn">
                                                    <input type="file" name="collage_candidate" multiple="" data-max_length="5" class="upload__inputfile">
                                                  </label>
                                                </div>
                                                <div class="upload__img-wrap"></div>
                                            </div>
                                        </div>
                                    </div>
    
                                    @if(isset($collage))
                                        <input id="hdnCollage" type="hidden" value='{!! json_encode($collage) !!}'>
                                    @endif
                                </div>
                            </div>
                            <a class="collapse-option" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                Hide details
                            </a>
                        </div>
                    </div>
                </div>  
                <div class="col-lg-12">
                    <div id="vi" class="row index-content">
                        <div class="card">
                            <h3 class="margin-x panel-title">
                                <i class="fas fa-video" aria-hidden="true"></i>
                                Video Interview
                            </h3><br><br>
                            <div id="collapseFive" class="panel-collapse collapse in">
                                <div id="videos_gallery" class="row">
                                    @isset($videos)
                                        @foreach($videos as $video)
                                            <div class="col-lg-3 text-right">
                                                <a onclick="hideShowVideo(this);" data-url-video="{{$video->link}}" class="btn btn-default btn-disable-video"><i class="fas fa-eye text-muted"></i> <span class="status-video">{{ $video->visible ? 'Hide' : 'Show'}}</span></a>
                                                <a class="preview-video @if(!$video->visible) disabled-video @else @endif" onclick="loadVideo(this);" data-url-video="{{$video->link}}" style="text-decoration: none; cursor: pointer;">
                                                    <div class='text-center bg-preview-vi'>
                                                        <i class='fas fa-play-circle fa-4x' style='align-self: center;'></i>
                                                    </div>
                                                </a>
                                                <input type='hidden' name='videos[]' value='{{$video->link}}'>
                                                <textarea rows='4' name='videoTitle[]' style='width:100%'>{!! old('question',$video->question) !!}</textarea>
                                            </div>
                                        @endforeach
                                    @endisset
                                </div>
                            </div>
                            <a class="collapse-option" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                                Hide details
                            </a>
                        </div>
                    </div>
                </div> 
                <input type="hidden" id="hdnChambaSourceCompanyId" name="chambaSourceCompanyId">
            </div>
        </form>
    </div>

    <footer class="panel-footer">
        <div class="pull-right">
            <a href="{{ route('candidate.index') }}"
                class="btn btn-default">
                Cancel
            </a>
            <button type="submit" class="btn btn-primary"
                form="candidate-form">
                Save
            </button>
        </div>
    </footer>    
    <div id="container-loader" class="loader d-none">
        <div id="loader" class="loader-img"></div>
    </div>
    
    <!-- MODAL LISTADO CANDIDATOS -->
    <div class="modal fade" id="mdlCandidates" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">Candidates - La Chamba</h4>
            </div>
            <div class="modal-body">

                <div class="row" style="display:flex;">
                    <div class="col-lg-5">
                        <label for="">Name</label>
                        <input type="text"  name="name_filter" class="form-control" placeholder="Enter the name of the candidate.">
                    </div>
                    <div class="col-lg-5">
                        <label for="">Job Position</label>
                        <select name="vacante_filter" id="vacant_id_filter">
                            @foreach($vacantes as $vacante)
                                <option value="{{$vacante->jobOpeningId}}" title="{!!$vacante->jobOpeningTitle!!}" data-logo="{!!$vacante->logoCompany!!}">{!!$vacante->companyName!!} | {!!$vacante->areaName !!} - {!! $vacante->branchCity !!} - {!! $vacante->jobOpeningModality !!}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 text-right" style="align-self: end;">
                        <button id="btn_filter_candidates" class="btn btn-primary align-self-end">Search</button>
                    </div>
                </div>
             
                
                <div class="row" style="margin-top:4rem;">
                    <div class="col-lg-12">
                        <table class="table table-bordered table-striped" id="dt-candidates">
                            <thead>
                                 <tr>
                                    <th>#</th>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th></th>
                                </tr> 
                            </thead>
                            <tbody id="rows-candidates"></tbody>
                        </table> 
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
    </div>

    <!-- MODAL DELETE ATTACHMENT -->
    <div class="modal fade" id="mdlDeleteAttachment" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">Attachment - <span id="attachment_title_mdl_delete"></span></h4>
            </div>
            <div class="modal-body">
                <h5>Are you sure you want to remove this attachment?</h5>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-danger" onclick="deleteAttachment()" id="btn_delete_attachment">Confirm</button>
              <input type="hidden" id="hdn_attachmend_id_delete">
            </div>
          </div>
        </div>
    </div>

    <!-- MODAL DELETE IMAGE COLLAGE -->
    <div class="modal fade" id="mdlImageCollage" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel"><i class="fas fa-exclamation-triangle"></i> Alert</h4>
            </div>
            <div class="modal-body">
                <h5>This image is already stored, are you sure you want to delete it?</h5>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-danger" onclick="deleteCollageImage()" id="btn_delete_attachment">Confirm</button>
              <input type="hidden" id="hdn_collageimage_id_delete">
            </div>
          </div>
        </div>
    </div>
    

    <!-- MODAL REPRODUCTOR VIDEO INTERVIEWS -->
    <div class="modal fade" id="mdlVideoInterview" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">Video Interview</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center embed-responsive embed-responsive-16by9">
                            <video width="400" id="reproductor_VI" controls style="max-width:100%; height:auto;"></video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
    </div>
</section>

<style>
    .select2{
        width:100%!important;
    }
    .select2-results__message {
        display: none !important;
    }
    #select2-vacant_id_filter-results{
        overflow-x: hidden;
    }
</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-admin.js')}}"></script>
    <script>
         
        $(document).ready(function(){
            $('.panel-collapse').on('hidden.bs.collapse', function () {
                $(this).parent().find("a.collapse-option").text("Read more");
            });

            $('.panel-collapse').on('show.bs.collapse', function () {
                $(this).parent().find("a.collapse-option").text("Hide details");
            });
            $('#mdlVideoInterview').on('hidden.bs.modal', function () {
                $('#reproductor_VI').attr('src', '');
                var iframe = $("#reproductor_VI").parent().find('iframe').remove();
            })
            
            var options = {
                "height": 200, "codemirror": { "theme": "ambiance" }, "removeFormat": false, 
                styleTags: [
                    'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
                ],
                fontNames: ['Arial', 'Arial Black', 'Assistant', 'Futura', 'Comic Sans MS', 'Courier New','Poppins','Helvetica','Impact','Tahoma','Times New Roman', 'Verdana'],
                fontNamesIgnoreCheck: ['Arial', 'Arial Black', 'Assistant', 'Futura', 'Comic Sans MS', 'Courier New','Poppins','Helvetica','Impact','Tahoma','Times New Roman', 'Verdana'],
                addDefaultFonts: false,
                toolbar : [
                    ["style", ["style"]],
                    ["font", ["bold", "underline", "italic", "clear", "strikethrough", "superscript", "subscript"]],
                    ["fontsize", ["fontsize"]],
                    ["font", ["fontname"]],
                    ["color", ["color"]],
                    ["height", ["height"]],
                    ["view", ["fullscreen","codeview", "help"]],
                    ["insert", ["link","picture", "video"]],
                    ["table", ["table"]],["para", ["ul", "ol", "paragraph"]]
                ],
                
                "insertTableMaxSize": {
                    "col": 20,
                    "row": 20
                }
            };

            $("#description").summernote(options);
            $("#cw_assesment").summernote(options);
            $("#academic_resume").summernote(options);
            $("#professional_resume").summernote(options);
            $("#extras").summernote(options);
            function formatState (state) {
                if (!state.id) {
                    return state.text;
                }
                var logo = $(state.element).data('logo');
                var $state = $(
                    '<div class="row"> \n'+
                        '<div class="col-sm-3">\n'+
                            '<img src="' + logo + '" class="img-fluid" /> \n' +//
                        '</div> \n' +
                        '<div class="col-sm-9" style="padding-left:0;"> \n'+
                            '<span> \n'+
                                '<strong>'+state.title+'</strong> <br>' 
                                + state.text + 
                            '</span>\n' +
                        '</div>\n'+
                    '</div>'
                );
                return $state;
            };

            function matchCustom(params, data) {
                // If there are no search terms, return all of the data
                if ($.trim(params.term) === '') {
                    return data;
                }

                // Do not display the item if there is no 'text' property
                if (typeof data.text === 'undefined') {
                    return null;
                }

                var modifiedData = $.extend({}, data, true);
                title = modifiedData.title.toUpperCase();

                if (title.indexOf(params.term.toUpperCase()) > -1) {
                    return modifiedData;
                }

                // Return `null` if the term should not be displayed
                return null;
            }

            $('#vacant_id_filter').select2({
                placeholder: "Job position",
                allowClear: true,
                selectionCssClass: 'form-control',
                width: '100%',
                templateResult: formatState,
                dropdownParent: $('#mdlCandidates'),
                matcher: matchCustom
            });

            $(".default-avatar").on("click",function(){
                var image_path = $(this).data('image');
                $('.default-avatar').removeClass('avatar-selected');
                $(this).addClass('avatar-selected');
                $('#defaultAvatar').val(image_path);
            });
        });
    </script>
    
    <script>
        var validNumber = new RegExp(/^\d*\.?\d*$/);
        var lastValid = document.getElementById("cost").value;
        function validateNumber(elem) {
            if (validNumber.test(elem.value)) {
                lastValid = elem.value;
            } else {
                elem.value = lastValid;
            }
        }
        $("#mdlVideoInterview").on('hidden.bs.modal', function (e) {
            $("#mdlVideoInterview video").attr("src", $("#mdlVideoInterview video").attr("src"));
        });

        function removeVI(element){
            $(element).parent().html("");
        }
        function hideShowVideo(element){
            var status = $(element).find('.status-video').text();

            if(status == 'Hide'){
                $(element).parent().find('.preview-video').addClass('disabled-video');
                $(element).find('.status-video').text('Show');

                var cadidate_id = "{{$candidate->id}}";
                var link = $(element).data('url-video');
                var visible = 0;
            }
            else{
                $(element).parent().find('.preview-video').removeClass('disabled-video');
                $(element).find('.status-video').text('Hide');

                var cadidate_id = "{{$candidate->id}}";
                var link = $(element).data('url-video');
                var visible = 1;
            }

            $.ajax({
                method: 'POST',
                url: "{{route('candidate.videos.hideshow')}}",
                data: { 
                    'candidate_id' : cadidate_id,
                    'link' : link,
                    'visible' : visible
                },
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            }).done(function(data){
                console.log('Video status modificado')
            }).fail(function(response){
                alert('message: ' +response.responseText + ' | status: ' + response.status);
            });
        }

        function loadVideo(element){
            $(".loader").removeClass('d-none');
            var url_video = $(element).data('url-video');
            var isIframe = url_video.includes('<iframe');

            if(isIframe){
                $('#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('candidate.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);
                    $('#mdlVideoInterview').modal('show');
                    $(".loader").addClass('d-none');
                }).fail(function(response){
                    $(".loader").addClass('d-none');
                    alert('message: ' +response.responseText + ' | status: ' + response.status);
                });
            }
        }

        function loadAttachment(element){
            var url_attachment = $(element).data('url-attachment');

            $.ajax({
                method: 'GET',
                url: "{{route('candidate.loadattachment')}}",
                data: { 
                    'url_attachment' : url_attachment
				},
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            }).done(function(data){
                ViewAttachment(data);
            }).fail(function(response){
                alert('message: ' +response.responseText + ' | status: ' + response.status);
            });
        }

        function ViewAttachment(data){
            let pdfWindow = window.open("")
            pdfWindow.document.write(
                "<iframe width='100%' height='100%' src='" +data+ "'></iframe>"
            )
        }

        function loadDataForm(data){    
            $("#first_name").val(data.firstName);
            $("#last_name").val(data.lastName);
            $("#nickname").val(data.displayName);
            $("#description").val(data.presentation);

            //Personality Profile
            if(data.personalityRating != null){
                $('#ApegoANormas').starRating('setRating', data.personalityRating.apegoANormas);
                $('input[name="apego_a_normas"]').val(data.personalityRating.apegoANormas);
                
                $('#TrabajoEnEquipo').starRating('setRating',data.personalityRating.trabajoEnEquipo)
                $('input[name="trabajo_en_equipo"]').val(data.personalityRating.trabajoEnEquipo);
                
                $("#TrabajoBajoPresion").starRating("setRating",data.personalityRating.trabajoBajoPresion);
                $('input[name="trabajo_bajo_presion"]').val(data.personalityRating.trabajoBajoPresion);
                
                $("#Liderazgo").starRating("setRating",data.personalityRating.liderazgo);
                $('input[name="liderazgo"]').val(data.personalityRating.liderazgo);

                $("#ManejoDeConflictos").starRating("setRating",data.personalityRating.manejoDeConflictos);
                $('input[name="manejo_de_conflictos"]').val(data.personalityRating.manejoDeConflictos);

                $("#Compromiso").starRating("setRating",data.personalityRating.compromiso);
                $('input[name="compromiso"]').val(data.personalityRating.compromiso);

                $("#ActitudDeServicio").starRating("setRating",data.personalityRating.actitudDeServicio);
                $('input[name="actitud_de_servicio"]').val(data.personalityRating.actitudDeServicio);

                $("#EnfoqueAResultados").starRating("setRating",data.personalityRating.enfoqueAResultados);
                $('input[name="enfoque_a_resultados"]').val(data.personalityRating.enfoqueAResultados);

                $("#SolucionDeProblemas").starRating("setRating",data.personalityRating.solucionDeProblemas);
                $('input[name="solucion_de_problemas"]').val(data.personalityRating.solucionDeProblemas);

                $("#Adaptabilidad").starRating("setRating",data.personalityRating.adaptabilidad);
                $('input[name="adaptabilidad"]').val(data.personalityRating.adaptabilidad);

                $("#TomaDeDecisiones").starRating("setRating",data.personalityRating.tomaDeDecisiones);
                $('input[name="toma_de_decisiones"]').val(data.personalityRating.tomaDeDecisiones);

                $("#ControlDeProcesos").starRating("setRating",data.personalityRating.controlDeProcesos);
                $('input[name="control_de_procesos"]').val(data.personalityRating.controlDeProcesos);

                $("#Organizacion").starRating("setRating",data.personalityRating.organizacion);
                $('input[name="organizacion"]').val(data.personalityRating.organizacion);

                $("#Iniciativa").starRating("setRating",data.personalityRating.iniciativa);
                $('input[name="iniciativa"]').val(data.personalityRating.iniciativa);

                $("#Sociabilidad").starRating("setRating",data.personalityRating.sociabilidad);
                $('input[name="sociabilidad"]').val(data.personalityRating.sociabilidad);

                $("#CapacidadDeAprendizaje").starRating("setRating",data.personalityRating.capacidadDeAprendizaje);
                $('input[name="capacidad_de_aprendizaje"]').val(data.personalityRating.capacidadDeAprendizaje);

                $("#InteligenciaEmocional").starRating("setRating",data.personalityRating.inteligenciaEmocional);
                $('input[name="inteligencia_emocional"]').val(data.personalityRating.inteligenciaEmocional);

                $("#Responsabilidad").starRating("setRating",data.personalityRating.responsabilidad);
                $('input[name="responsabilidad"]').val(data.personalityRating.responsabilidad);

                $("#Creatividad").starRating("setRating",data.personalityRating.creatividad);
                $('input[name="creatividad"]').val(data.personalityRating.creatividad);

                $("#Planeacion").starRating("setRating",data.personalityRating.planeacion);
                $('input[name="planeacion"]').val(data.personalityRating.planeacion);
            }
            


            $("#preview_img_candidate").attr("src",data.profileImageUrl);
            $("input[name='preview_image_candidate']").val(data.profileImageUrl);            
            //VIDEOS INTERVIEWS
            $("#videos_gallery").html("");
            var videoInterviews = [];
            
            $.each(data.videoInterviewUrls, function(index, value){ 
                var video_html = "<div class='col-lg-3 text-right'> \n" +
                                    "<h3 class='text-left' style='font-weight: 600;'>"+value.question+"</h3>\n" +
                                    "<a onclick='removeVI(this);' class='btn btn-default btn-disable-video'><i class='fas fa-times text-danger'></i> Remove</a> \n" +
                                    "<a class='preview-video' onclick='loadVideo(this);' data-url-video='"+value.url+"' style='text-decoration: none; cursor:pointer;'> \n" +
                                        "<div class='text-center bg-preview-vi'>\n" +
                                            "<i class='fas fa-play-circle fa-4x' style='align-self: center;'></i>\n" +
                                        "</div> \n"+
                                    "</a> \n"+
                                    "<input type='hidden' name='videos[]' value='"+value.url+"'>" +
                                    "<textarea rows='4' name='videoTitle[]' style='width:100%'>"+value.question+"</textarea>"                                    
                                 "</div>";
                $("#videos_gallery").append(video_html);
                videoInterviews.push(value);
            });   
            
            //Attachments
            $("#attachment_div").html("");
            var attachment_html = "<a href='#' onclick='loadAttachment(this);' data-url-attachment='"+data.cvFileUrl+"'>CV-File</a> \n" +
            "<input type='hidden' name='attachmentsLC[]' value='"+data.cvFileUrl+"'>";
            $("#attachment_div").append(attachment_html); 

            //Professional Resume
            var professional_resume = "";
            $.each(data.workExperiences, function(index, value){
                var date1 = new Date(value.fromDate);
                var date2 = new Date(value.toDate);
                var Difference_In_Time = date2.getTime() - date1.getTime();
                var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);

                var anios = Math.floor(Difference_In_Days / 365); // Calcula el número de años completos
                var meses = Math.floor((Difference_In_Days % 365) / 30); // Calcula el número de meses completos (asumiendo que cada mes tiene 30 días)

                anios = anios > 0 ? anios + " años " : "";
                professional_resume += "<b>Company name: </b>" + value.companyName  + "<br>"+ 
                "<b>Position: </b>" + value.position + "<br>" +
                "<b>Duration: </b>" + anios + meses + " meses" + "<br>" +
                "<b>Description: </b>" + value.description + "<br><br>";
            });   

            $("#professional_resume").text(professional_resume);
            $("#professional_resume").summernote("code", professional_resume);
            //Academic Resume
            var academic_resume = "";
            $.each(data.academicFormations, function(index, value){
                academic_resume += "<b>Institution Name:</b> " + value.institutionName + "<br>"+ 
                "<b>Field of study: </b>" + value.fieldOfStudy + "<br><br>";
            });   

            $("#academic_resume").summernote("code", academic_resume);
            $("#academic_resume").text(academic_resume);
        }
        function onImageSelected(event) {
            $('.default-avatar').removeClass('avatar-selected');
            $('#defaultAvatar').val("");

            if(event.target.files.length > 0){
                var selectedFile = event.target.files[0];
                var reader = new FileReader();

                var imgtag = document.getElementById("preview_img_candidate");
                imgtag.title = selectedFile.name;

                reader.onload = function(event) {
                    imgtag.src = event.target.result;
                };

                reader.readAsDataURL(selectedFile);
            }
            else{
                $("#preview_img_candidate").attr("src","");
            }
            
        }

        function prechargeCollage(collage_candidate){
            var imgWrap = "";
            var imgArray = [];

            imgWrap = $('.upload__inputfile').closest('.upload__box').find('.upload__img-wrap');
            var maxLength = $('.upload__inputfile').attr('data-max_length');
       
            var iterator = 0;
            $.each(JSON.parse(collage_candidate),function (index, f) {
                var html = "<div class='upload__img-box'><div style='background-image: url(/uploads/" + f.image + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.id + "' class='img-bg'><div class='upload__img-close' data-id='"+f.id+"'></div></div></div>";
                imgWrap.append(html);
                
            });
        }

        function ImgUploadCollage() {
            var imgWrap = "";
            var imgArray = [];

            $('.upload__inputfile').each(function () {
                $(this).on('change', function (e) {
                    imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
                    var maxLength = $(this).attr('data-max_length');
                    var countImages = $(".upload__img-box").length;
                    var files = e.target.files;
                    var filesArr = Array.prototype.slice.call(files);

                    if (parseInt(e.target.files.length) > 5){
                        alert("You are only allowed to upload a maximum of 5 files");
                        return;
                    }

                    filesArr.forEach(function (f, index) {
                        if (!f.type.match('image.*')) {
                            return;
                        }

                        if (countImages >= maxLength) {
                            return false
                        } 
                        else {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                var html = "<div class='upload__img-box'><input type='hidden' name='collage_image[]' value='"+e.target.result+"'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
                                imgWrap.append(html);
                            }
                            reader.readAsDataURL(f);
                        }
                    });
                });
            });

            $('body').on('click', ".upload__img-close", function (e) {
                var file = $(this).parent().data("file");
                var id = $(this).data("id");

                if(id){
                    $("#hdn_collageimage_id_delete").val(id);
                    $("#mdlImageCollage").modal('show');
                }
                else{
                    for (var i = 0; i < imgArray.length; i++) {
                        if (imgArray[i].name === file) {
                            imgArray.splice(i, 1);
                            break;
                        }
                    }
                    $(this).parent().parent().remove();
                }
            });
        }


        function selectCandidateLC(element){
            var applicant_id = $(element).data("applicant-id");
            var jobposition_id = $(element).data("jobposition-id"); 
            var chambaSourceCompanyId = $(element).data("company-id"); 
            $("#hdnChambaSourceCompanyId").val(chambaSourceCompanyId);           
            $.ajax({
                method: 'GET',
                url: "{{route('candidate.detail')}}",
                data: { 
                    'applicant_id' : applicant_id,
                    'jobposition_id' : jobposition_id
				},
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            }).done(function(data){    
                if(data){
                    loadDataForm(data);
                }       
                else{
                    alert('No se encontró información.')
                }
                
                $('.default-avatar').removeClass('avatar-selected');
                $('#defaultAvatar').val("");
                $('#mdlCandidates').modal('hide');
            }).fail(function(response){
                alert('message: ' +response.responseText + ' | status: ' + response.status);
            });
        }

        function deleteAttachment(){
            var id = $('#hdn_attachmend_id_delete').val();

            $.ajax({
                method: 'POST',
                url: "{{route('attachment.destroy')}}",
                data: { 
                    'attachment_id' : id,
                    'candidate_id' : "{{$candidate->id}}"
                },
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            }).done(function(data){
                $("#attachment_div").html("");
                $.each(data, function(index, value){
                    var filename = value.attachment.split('/');
                    filename = filename[filename.length - 1];
                    var route_attachment = "{{asset('uploads')}}/" +value.attachment;
                    //Attachments
                    var attachment_html = '<div> \n'+
                                            '<a target="_blank" href="'+route_attachment+'" >'+filename+'</a> \n' +
                                            '&nbsp;&nbsp;&nbsp; <i class="fa fa-trash-o text-danger btn" onclick="openModalDeleteAttachment(this);" data-attachment-id="'+value.id+'" data-attachment-name="'+filename+'"></i> \n' +
                                            '</div>';
                    $("#attachment_div").append(attachment_html); 
                });

                $("#mdlDeleteAttachment").modal('hide');
            }).fail(function(response){
                alert('message: ' +response.responseText + ' | status: ' + response.status);
            });
        }

        function deleteCollageImage(){
            var id = $('#hdn_collageimage_id_delete').val();

            $.ajax({
                method: 'POST',
                url: "{{route('collageimage.destroy')}}",
                data: { 
                    'id' : id,
                    'candidate_id' : "{{$candidate->id}}"
                },
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            }).done(function(data){
                $(".upload__img-wrap").html("");
                prechargeCollage(data);
                $("#mdlImageCollage").modal('hide');
            }).fail(function(response){
                alert('message: ' +response.responseText + ' | status: ' + response.status);
            });
        }

        function openModalDeleteAttachment(element){
            var attachment_id = $(element).data('attachment-id');
            var attachment_name = $(element).data('attachment-name');

            $('#attachment_title_mdl_delete').text(attachment_name);
            $('#hdn_attachmend_id_delete').val(attachment_id);
            $("#mdlDeleteAttachment").modal('show');
        }


        $(document).ready(function(){
            ImgUploadCollage();

            var collage_candidate = $("#hdnCollage").val();
            if(collage_candidate){
                prechargeCollage(collage_candidate);
            }
                

            $("input[type=file]").on("change", function(event) {
                var files = event.target.files;

                for (var i = 0; i < files.length; i++) {
                    var f = files[i];
                    // Only process video files.
                    if (!f.type.match('video.*')) {
                        continue;
                    }
                    var source = document.createElement('video'); //added now
                    $(source).css('width', "100%");
                    $(source).css('margin-top', "2rem");

                    source.height = 240;
                    source.controls = true;
                    source.src = URL.createObjectURL(files[i]);

                    var className = $(this).attr("id");
                    $(source).attr("id",className);
                    $("video#"+className).remove();

                    $("." + className).append(source); // append `<video>` element
                }
            }); 
            
            //Grouper
            $('#grouper').select2({
                tags: true,
                tokenSeparators: [','],
                placeholder: "",
                seperator: ";"
            });

            var tags = $("#hdnGrouper").val();
            const array_tags_grouper = tags.split(',');
            $.each( array_tags_grouper, function( key, value ) {
                if(value != ""){
                    if ( $("#grouper option[value='"+value+"']").length <= 0 ){
                        $("#grouper").append('<option value="'+value+'">'+value+'</option>');
                    }
                }
                
            });
            $("#grouper").val(array_tags_grouper);
            $("#grouper").trigger('change');

            $("#grouper").on("select2:select", function (e) {
                var select_val = $(e.currentTarget).val();
                var tags = select_val.toString();
                $("#hdnGrouper").val(tags);
            });

            $("#grouper").on("select2:unselect", function (e) {
                var select_val = $(e.currentTarget).val();
                var tags = select_val.toString();
                $("#hdnGrouper").val(tags);
            });

            //Submit get lista candidatos
            $('#btn_filter_candidates').on("click",function(){
                $(".loader").removeClass('d-none');
                $("#rows-candidates").html("");
                $.ajax({
					method: 'POST',
					url: "{{route('candidates.list')}}",
					data: { 
						'name' : $('input[name="name_filter"]').val(),
                        'vacanteId' : $("select[name='vacante_filter']").val()
					},
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
				}).done(function(data){
                    var job_position_id = $("#vacant_id_filter").val();
                    $.each(data, function(index,value){
                        var tr = "<tr> \n" +
                            "<td>"+value.applicantId+"</td>" +
                            "<td><img src='"+value.imageUrl+"' style='max-width:6rem;'></td>" +
                            "<td>"+value.firstName + " " + value.lastName +"</td>" +
                            "<td class='text-center'><i class='fas fa-plus fa-2x select-candidate' data-applicant-id='"+value.applicantId+"' data-jobposition-id='"+job_position_id+"' data-company-id='"+value.chambaSourceCompanyId+"' style='cursor:pointer;'></i></td>" +
                        "</tr>";

                        $("#rows-candidates").append(tr);
                    })

                    //añadir evento a seleccionar candidato
                    var elements = document.getElementsByClassName("select-candidate");

                    $.each(elements, function(index, el){
                        el.addEventListener('click', function handleClick(event) {
                            selectCandidateLC(this);
                        });
                    });
                    
                    $(".loader").addClass('d-none');
				}).fail(function(response){
					alert('message: ' +response.responseText + ' | status: ' + response.status);
				});
            });
        });
    </script>
@endpush