<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Company_employee_cv', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        @if (auth()->user()->hasrole('Empleado'))
            <li class="breadcrumb-item">Empleado</li>
            <li class="breadcrumb-item">Hoja de vida</li>
        @else
            <li class="breadcrumb-item">Empresa</li>
            <li class="breadcrumb-item">Hoja de vida</li>
            <li class="breadcrumb-item active">Empleado</li>
        @endif
    @endcomponent

    <div class="container-fluid">
        <div class="edit-profile">
            <div class="row">



                <div class="col-xl-12">
                    <form class="card">
                        @if (auth()->user()->hasrole('Empleado'))
                            <div class="card-header">
                                <h6 class="card-title">Tiempo para que pueda realizar actualizaciones en la hoja de vida: {{ $employee_update_time }}</h6>
                            </div>
                        @endif
                        <div class="card-header pb-0">
                            <div class="profile-title">
                                <div class="media">
                                    <img class="img-70 rounded-circle" alt=""
                                        src="{{ asset('storage/users/' . $user->imagen) }}" />
                                    <div class="media-body">
                                        <h3 class="mb-1 f-20 txt-primary">{{ $user->first_name }}
                                            {{ $user->last_name }}</h3>
                                        <p class="f-12">{{ $user->title_position }}</p>
                                    </div>
                                    <div class="col">
                                        <div class="mb-3 row">
                                            <label class="col-sm-3 col-form-label">Imagen</label>
                                            <div class="col-sm-9">
                                                <input type="file" wire:model="image" class="form-control" accept=".png, .jpg">
                                                @error('image')
                                                    <span class="text-danger er">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-options">
                                <a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i
                                        class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#"
                                    data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">

                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Nombre</label>
                                        <input type="text" wire:model.lazy="first_name" class="form-control"
                                            placeholder="ej: Carlos" maxlength="99">
                                        @error('first_name')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <label class="form-label">Apellido</label>
                                    <input type="text" wire:model.lazy="last_name" class="form-control"
                                        placeholder="ej:García" maxlength="99">
                                    @error('last_name')
                                        <span class="text-danger er">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Tipo documento</label>
                                        <select class="form-control form-select" wire:model.lazy="document_type" name="document_type">
                                            <option value="Seleccionar">Seleccionar</option>
                                            @foreach (DataTypeDocument() as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        @error('document_type')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Documento</label>
                                        <input type="text" wire:model.lazy="document" class="form-control"
                                            placeholder="ej: 111055698" maxlength="15">
                                        @error('document')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Email</label>
                                        <input type="text" wire:model.lazy="email" class="form-control"
                                        placeholder="ej: mg-net@hotmail.com" maxlength="99">
                                        @error('email')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Teléfono</label>
                                        <input type="text" wire:model.lazy="phone" class="form-control"
                                            placeholder="ej: 3202568745" maxlength="15">
                                        @error('phone')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Estado civil</label>
                                        <select class="form-control form-select" wire:model.lazy="civil_status" name="civil_status"
                                            id="civil_status">
                                            <option value="Seleccionar">Seleccionar</option>
                                            @foreach(DataTypeCivilStatus() as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        @error('civil_status')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>


                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Género</label>
                                        <select class="form-control form-select" wire:model.lazy="gender_user" name="gender_user">
                                            <option value="">Seleccionar</option>
                                            <option value="Masculino">Masculino</option>
                                            <option value="Femenino">Femenino</option>
                                        </select>
                                        @error('gender')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-4 col-md-3">
                                    <div class="form-group">
                                        <label class="form-label">Eps</label>
                                        <select class="form-select" wire:model.lazy="eps_id">
                                            <option value="">Seleccionar</option>
                                            @foreach ($epss as $eps)
                                                <option value="{{ $eps->id }}">{{ $eps->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('eps_id')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Nacionalidad</label>
                                        <input type="text" wire:model.lazy="nationality" name="nationality" class="form-control"
                                            placeholder="ej: Colombiano" maxlength="49">
                                        @error('nationality')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Fecha Nacimiento</label>
                                        <input class="form-control" type="date" name="birth_date"
                                        id="birth_date" wire:model.lazy="birth_date" placeholder="dd/mm/aaaa"/>
                                        @error('birth_date')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="mb-3">
                                        <label class="form-label">Lugar Nacimiento</label>
                                        <input type="text" wire:model.lazy="birth_place" class="form-control"
                                            placeholder="ej: Ibagué - Tolima" maxlength="99">
                                        @error('birth_place')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Dirección de residencia</label>
                                        <input type="text" wire:model.lazy="address" name="address" class="form-control"
                                            placeholder="ej: Cra 56-9" maxlength="99">
                                        @error('address')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>



                                <div class="col-sm-6 col-md-3">
                                    <div class="mb-3">

                                        <div class="mb-3">
                                            <label class="form-label">Depto. residencia</label>
                                            <select class="form-control btn-square form-select" wire:model.lazy="selectedState" name="selectedState">
                                                <option value="Seleccionar" selected>Seleccionar</option>
                                                @foreach ($states as $state)
                                                    <option value="{{ $state->code }}">{{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('selectedState')
                                                <span class="text-danger er">{{ $message }}</span>
                                            @enderror

                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                        <div class="mb-3">
                                            <label class="form-label">Ciudad residencia</label>
                                            <select class="form-control btn-square form-select" wire:model.lazy="city_residence" name="city_residence" >
                                                <option value="Seleccionar">Seleccionar</option>
                                                @if (!is_null($selectedState))
                                                    @foreach ($cities as $city)
                                                        <option value="{{ $city->code }}">{{ $city->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            @error('city_residence')
                                                <span class="text-danger er">{{ $message }}</span>
                                            @enderror
                                        </div>
                                </div>


                                <div class="col-sm-6 col-md-12">
                                    <div class="mt-3 mb-3">
                                        <h5 class="blockquote-footer">Redes sociales</h5>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Linkedin</label>
                                        <input type="text" wire:model.lazy="social_linkedin" name="social_linkedin" class="form-control"
                                            placeholder="ej: https://pe.linkedin.com/in/nombre" maxlength="99">
                                        @error('social_linkedin')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Facebook</label>
                                        <input type="text" wire:model.lazy="social_facebook" name="social_facebook" class="form-control"
                                            placeholder="ej: https://facebook.com/nombre" maxlength="99">
                                        @error('social_facebook')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Twitter</label>
                                        <input type="text" wire:model.lazy="social_twitter" name="social_twitter" class="form-control"
                                            placeholder="ej: https://twitter.com/nombre" maxlength="99">
                                        @error('social_twitter')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Instagram</label>
                                        <input type="text" wire:model.lazy="social_instagram" name="social_instagram" class="form-control"
                                            placeholder="ej: https://instagram.com/nombre" maxlength="99">
                                        @error('social_instagram')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Titulo profesional</label>
                                        <input type="text" wire:model.lazy="title_position" name="title_position" class="form-control"
                                            placeholder="ej: Desarrollador Web" maxlength="99">
                                        @error('title_position')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Matrícula profesional No.</label>
                                        <input type="text" wire:model.lazy="professional_license" name="professional_license" class="form-control"
                                            placeholder="ej: 75980" maxlength="99">
                                        @error('professional_license')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Perfil profesional</label>
                                        <textarea class="form-control" rows="5" placeholder=""  wire:model.lazy="professional_profile" name="professional_profile"></textarea>
                                        @error('professional_profile')
                                            <span class="text-danger er">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                        </div><!-- /.row -->
                    </div><!-- /.card-body -->
                        <div class="card-footer text-end">
                            @if ($this->activeButtonSaveUpdate())
                                    <button class="btn btn-primary" type="button" wire:click.prevent="Update()">Guardar cambios</button>
                            @endif
                        </div>
                    </form>
                </div>


                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <h5>Información adicional</h5>
                        </div>


                        <div class="card-body">
                            <ul class="nav nav-tabs border-tab" id="top-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="top-family-tab" data-bs-toggle="tab" href="#top-family" role="tab" aria-controls="top-family" aria-selected="true">
                                        <i class="fas fa-house-user"></i>Nucleo Familiar
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="top-work-exp" data-bs-toggle="tab" href="#top-workExp" role="tab" aria-controls="top-workExp" aria-selected="false">
                                        <i class="fas fa-briefcase"></i>Exp. Laboral
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="academic-form-top-tab" data-bs-toggle="tab" href="#top-academicForm" role="tab" aria-controls="top-academicForm" aria-selected="false">
                                        <i class="fas fa-user-graduate"></i>Form. Académica
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="skill-top-tab" data-bs-toggle="tab" href="#top-skill" role="tab" aria-controls="top-skill" aria-selected="false">
                                        <i class="fas fa-cogs"></i>Habilidades
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="training-top-tab" data-bs-toggle="tab" href="#top-training" role="tab" aria-controls="top-training" aria-selected="false">
                                        <i class="fas fa-book-open"></i>Capacitaciones
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="reference-top-tab" data-bs-toggle="tab" href="#top-reference" role="tab" aria-controls="top-reference" aria-selected="false">
                                        <i class="fas fa-users"></i>Referencias
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="language-top-tab" data-bs-toggle="tab" href="#top-language" role="tab" aria-controls="top-language" aria-selected="false">
                                        <i class="fas fa-language"></i>Idiomas
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content" id="top-tabContent">
                                <div class="tab-pane fade show active" id="top-family" role="tabpanel" aria-labelledby="top-family">
                                    @livewire('c-v_-family-user-controller', ['user_sel_id' => $user->id, 'activeButtonSaveUpdate' => $this->activeButtonSaveUpdate()])
                                </div>
                                <div class="tab-pane fade" id="top-workExp" role="tabpanel" aria-labelledby="top-work-exp">
                                    @livewire('c-v_-work-experiences-controller', ['user_sel_id' => $user->id, 'activeButtonSaveUpdate' => $this->activeButtonSaveUpdate()])
                                </div>
                                <div class="tab-pane fade" id="top-academicForm" role="tabpanel" aria-labelledby="academic-form-top-tab">
                                    @livewire('c-v_-academic-formation-controller', ['user_sel_id' => $user->id, 'activeButtonSaveUpdate' => $this->activeButtonSaveUpdate()])
                                </div>
                                <div class="tab-pane fade" id="top-skill" role="tabpanel" aria-labelledby="skill-top-tab">
                                    @livewire('c-v_-skills-controller', ['user_sel_id' => $user->id, 'activeButtonSaveUpdate' => $this->activeButtonSaveUpdate()])
                                </div>
                                <div class="tab-pane fade" id="top-training" role="tabpanel" aria-labelledby="training-top-tab">
                                    @livewire('c-v_-trainings-controller', ['user_sel_id' => $user->id, 'activeButtonSaveUpdate' => $this->activeButtonSaveUpdate()])
                                </div>
                                <div class="tab-pane fade" id="top-reference" role="tabpanel" aria-labelledby="reference-top-tab">
                                    @livewire('c-v_-references-controller', ['user_sel_id' => $user->id, 'activeButtonSaveUpdate' => $this->activeButtonSaveUpdate()])
                                </div>
                                <div class="tab-pane fade" id="top-language" role="tabpanel" aria-labelledby="language-top-tab">
                                    @livewire('c-v_-language-user-controller', ['user_sel_id' => $user->id, 'activeButtonSaveUpdate' => $this->activeButtonSaveUpdate()])
                                </div>
                            </div>


                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        window.livewire.on('item-updated', msg => {
            noty(msg)
        });

        window.livewire.on('item-error', msg => {
            noty(msg)
        });


        flatpickr(document.getElementsByClassName('flatpickr'),{
            enableTime: false,
            dateFormat: 'd/m/Y',
            locale: {
                firstDayofWeek: 1,
                weekdays: {
                    shorthand: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
                    longhand: [
                    "Domingo",
                    "Lunes",
                    "Martes",
                    "Miércoles",
                    "Jueves",
                    "Viernes",
                    "Sábado",
                    ],
                },
                months: {
                    shorthand: [
                    "Ene",
                    "Feb",
                    "Mar",
                    "Abr",
                    "May",
                    "Jun",
                    "Jul",
                    "Ago",
                    "Sep",
                    "Oct",
                    "Nov",
                    "Dic",
                    ],
                    longhand: [
                    "Enero",
                    "Febrero",
                    "Marzo",
                    "Abril",
                    "Mayo",
                    "Junio",
                    "Julio",
                    "Agosto",
                    "Septiembre",
                    "Octubre",
                    "Noviembre",
                    "Diciembre",
                    ],
                }
            }
        })
    })
</script>
