@extends('candidate.account')
@section('styles')
@parent
<link rel="stylesheet" href="{{asset("assets/css/candidate/CV/_cvexperience.css")}}">
@endsection

@section('cv_content')
<div class="account-details">
    <h3>Experiencia laboral</h3>
    <div class="accordion" id="accordion_form_experience">
        <form class="basic-info" id="form_experience" action="/ProfileController/c_save_cvexperience" method="post">
            @csrf
            @if (!$candidate_cv->cexperience()->exists())
                <div class="form_modal_experience_remove form-group">
                    <div class="form-group" id="repeater_experience">
                        <div data-repeater-list="fields_experience" id="repeater_experience_basic">
                            <div data-repeater-item class="contenedor-espacio">
                                <div class="accordion-item mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panel_info_0" aria-expanded="true">
                                            Información laboral
                                        </button>
                                    </h2>
                                    <div id="panel_info_0" class="accordion-collapse collapse show">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Puesto</label>
                                                        <input type="text" class="form-control" placeholder="Puesto" name="exp_title" required>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Empresa/Institución</label>
                                                        <input type="text" class="form-control" placeholder="" name="exp_company" required>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>País</label>
                                                        <input type="text" class="form-control" placeholder="México" name="exp_country" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Estado</label>
                                                        <input type="text" class="form-control" placeholder="" name="exp_state" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Ciudad</label>
                                                        <input type="text" class="form-control" placeholder="" name="exp_locality" required>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="form-check" style="margin-left:9px;">
                                                        <input class="form-check-input actual-working-check" type="checkbox" value="1" name="actual_working" />
                                                        <label class="" for="">Es mi trabajo actual</label>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Desde</label>
                                                            <input type="text" class="form-control exp_date_start" placeholder="" name="exp_date_start" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Hasta</label>
                                                            <input type="text" class="form-control exp_date_end" placeholder="" name="exp_date_end" required>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label>Descripción de actividades</label>
                                                        <textarea class="form-control desc_Activities" cols="30" rows="8" maxlength="500" placeholder="" name="exp_activities" required></textarea>
                                                    </div>
                                                </div>

                                                <div class="col-12 text-center">
                                                    <a href="javascript:;" data-repeater-delete>
                                                        <div class="account-btn d-inline">
                                                            Quitar trabajo
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 text-center">
                            <button type="submit" class="account-btn" id="btn_save_experience">
                                <span id="span-save">Guardar cambios</span>
                                <span id="span-progress" style="display:none;">Validando...
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </span>
                            </button>
                            <a href="javascript:;" data-repeater-create class="d-inline-block experience-add-button">
                                <div class="account-btn">
                                    Agregar trabajo
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            @else
                <div class="form_modal_experience_remove form-group">
                    <div class="form-group" id="repeater_experience">
                        <div data-repeater-list="fields_experience" id="repeater_experience_basic">
                            @php
                            $conteo = 0;
                            @endphp
                            @foreach ($candidate_cv->cexperience as $cexperience)
                            <div data-repeater-item class="contenedor-espacio">
                                <div class="accordion-item mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panel_info_{{$conteo}}" aria-expanded="true">
                                            Información laboral
                                        </button>
                                    </h2>
                                    <div id="panel_info_{{$conteo}}" class="accordion-collapse collapse show">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Puesto</label>
                                                        <input type="text" class="form-control" placeholder="Puesto" name="exp_title" required  value="{{$cexperience->title}}">
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Empresa/Institución</label>
                                                        <input type="text" class="form-control" placeholder="" name="exp_company" required value="{{$cexperience->company}}">
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>País</label>
                                                        <input type="text" class="form-control" placeholder="México" name="exp_country" required value="{{$cexperience->country}}">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Estado</label>
                                                        <input type="text" class="form-control" placeholder="" name="exp_state" required value="{{$cexperience->state}}">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Ciudad</label>
                                                        <input type="text" class="form-control" placeholder="" name="exp_locality" required value="{{$cexperience->locality}}">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="form-check" style="margin-left:9px;">
                                                        <input class="form-check-input actual-working-check" {{($cexperience->actual_working == 1) ? "checked" : ""}} type="checkbox" value="1" name="actual_working" />
                                                        <label class="" for="">Es mi trabajo actual</label>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Desde</label>
                                                            <input type="text" class="form-control exp_date_start" placeholder="" name="exp_date_start" required value="{{$cexperience->date_start}}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Hasta</label>
                                                            <input type="text" class="form-control exp_date_end" placeholder="" name="exp_date_end" required value="{{$cexperience->date_end}}"  {{($cexperience->actual_working == 1) ? "disabled" : ""}}>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label>Descripción de actividades</label>
                                                        <textarea class="form-control desc_Activities" cols="30" rows="8" maxlength="500" placeholder="" name="exp_activities" required>{{$cexperience->description}}</textarea>
                                                    </div>
                                                </div>

                                                <div class="col-12 text-center">
                                                    <a href="javascript:;" data-repeater-delete>
                                                        <div class="account-btn d-inline">
                                                            Quitar trabajo
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @php
                            $conteo++;
                            @endphp
                            @endforeach
                        </div>

                        <div class="col-md-12 text-center">
                            <button type="submit" class="account-btn" id="btn_save_experience">
                                <span id="span-save">Guardar cambios</span>
                                <span id="span-progress" style="display:none;">Validando...
                                    <span class="spinner-border spinner-border-sm" role="status"></span>
                                </span>
                            </button>
                            <a href="javascript:;" data-repeater-create class="d-inline-block experience-add-button">
                                <div class="account-btn">
                                    Agregar trabajo
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </form>
    </div>
</div>
@endsection

@section('scripts')
@parent
<script defer src="{{asset("assets/plugins/custom/formrepeater.bundle.js")}}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script defer src="{{asset("assets/js/candidate/cv/_cvexperience.js")}}"></script>
@endsection