<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Company_contracts_users_history',
        'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item active">Historial Contratos Empleado</li>
    @endcomponent
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-header">
                            <h4>Historial Contratos <b> | {{ $first_name }} {{ $last_name }}</b></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-2 col-md-2 col-sm-12">
                <a href="{{ route('contratos-empleados.create', $user_id) }}" class="btn btn-outline-primary">
                    <i class="fa fa-arrow-left"></i>
                    Agregar Contrato
                </a>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="form-group">
                    <select class="form-select" wire:model="type_contract">
                        <option value="">Todos los tipos de Contratos</option>
                        @foreach (DataTypeContract() as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="form-group">
                    <select class="form-select" wire:model="sub_type_contract">
                        <option value="">Todos los Subtipos de Contratos</option>
                        @foreach (DataSubTypeContract() as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div><!-- row -->

        <div class="row justify-content-between file-content mb-2">
            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="form-inline">
                    <div class="form-group d-flex mb-0"><i class="fa fa-search"></i>
                        <input class="form-control-plaintext" type="text" wire:model="search" placeholder="Buscar...">
                    </div>
                </div>
            </div>
            @if (isset($count_reg))
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p class="p-l-20">Total Contratos: {{ $count_reg }}</p>
                </div>
            @endif

        </div>
    </div><!-- container-fluid -->
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                @if ($count_reg > 0)
                    @foreach ($contracts_user as $item)
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title">
                                    <h6 class="d-inline">Nombre del Contrato: </h6>
                                    <p class="d-inline float-right">{{ $item->name }}</p>
                                </div>
                                <div class="card-subtitle mb-2 text-muted">
                                    <h6 class="d-inline">Tipo de Contrato: </h6>
                                    <p class="d-inline float-right">{{ DataTypeContract($item->type) }}</p>
                                    <h6 class="d-inline"> - | - </h6>
                                    <h6 class="d-inline">Subtipo de Contrato: </h6>
                                    <p class="d-inline float-right">{{ DataSubTypeContract($item->sub_type) }}</p>
                                </div>
                                <div class="card-content">
                                    <h6 class="d-inline">Descripción: </h6>
                                    <p class="d-inline float-right">{{ $item->description }}</p>
                                    <hr class="my-2">
                                    <h6 class="d-inline">Fecha de Inicio: </h6>
                                    <p class="d-inline float-right">
                                        {{ \Carbon\Carbon::parse($item->start_date)->day }} de
                                        {{ \Carbon\Carbon::parse($item->start_date)->monthName }} de
                                        {{ \Carbon\Carbon::parse($item->start_date)->year }}</p>
                                    <h6 class="d-inline"> || </h6>
                                    <h6 class="d-inline">Fecha de Finalización: </h6>
                                    @if ($item->end_date != null)
                                        <p class="d-inline float-right">
                                            {{ \Carbon\Carbon::parse($item->end_date)->day }} de
                                            {{ \Carbon\Carbon::parse($item->end_date)->monthName }} de
                                            {{ \Carbon\Carbon::parse($item->end_date)->year }}</p>
                                    @else
                                        <p class="d-inline float-right">
                                            No definida</p>
                                    @endif
                                    <hr class="my-2">
                                    <h6 class="d-inline">Fecha de Creación: </h6>
                                    <p class="d-inline float-right">
                                        {{ \Carbon\Carbon::parse($item->created_at)->day }} de
                                        {{ \Carbon\Carbon::parse($item->created_at)->monthName }} del
                                        {{ \Carbon\Carbon::parse($item->created_at)->year }}</p>
                                    <hr class="my-2">
                                    <h6 class="d-inline">Creado por: </h6> {{ FullNameUser($item->created_by) }} <br>
                                    @if ($item->status_contract == '3')
                                    <hr class="my-2">
                                    <h6 class="d-inline text-danger">Razón de la terminacion: </h6> {{ $item->ref_reason_termination }} <br>
                                    <h6 class="d-inline text-danger">Fecha de Terminación: </h6> {{ \Carbon\Carbon::parse($item->date_termination)->day }} de
                                    {{ \Carbon\Carbon::parse($item->date_termination)->monthName }} de
                                    {{ \Carbon\Carbon::parse($item->date_termination)->year }}<br>
                                    <h6 class="d-inline text-danger">Terminado por: </h6> {{ FullNameUser($item->user_termination) }} <br>
                                    @endif
                                    <hr class="my-2">
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-sm-12">
                                            @can('Company_contracts_users_annex_view')
                                            @if (getAnnexesContractUser($item->id_contract_user, $user_id, $company_id)['count'] > 0)
                                                <a href="{{ url('/anexos-contrato-empleado/pdf/' . $item->id_contract_user) }}" target="_blank"
                                                    class="btn btn-outline-primary m-2" title="Ver">
                                                    <i class="far fa-file-pdf"></i> Ver Otros Sí
                                                </a>
                                            @endif
                                        @endcan
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-8 col-md-8 col-sm-12">
                                            <div class="form-group">
                                                @can('ContractEmployee_pdf')
                                                    <a href="{{ url('/contrato-empleado/pdf/' . $item->id_contract_user) }}"
                                                        target="_blank" class="btn btn-outline-primary m-2"
                                                        title="Imprimir">
                                                        <i class="far fa-file-pdf"></i> Ver Contrato
                                                    </a>
                                                @endcan

                                                @if($item->status_contract != '3')
                                                    @can('Company_contracts_users_add_signature')
                                                        @if ($item->signature_company == null)
                                                            <a href="{{ route('contratos-empleados.firmar', $item->id_contract_user) }}"
                                                                class="btn btn-outline-primary m-2" title="Firmar">
                                                                <i class="fas fa-pen"></i> Firmar Contrato
                                                            </a>
                                                        @else
                                                            <span class="border-2 bg-success m-2 p-2"><i
                                                                    class="fas fa-check"></i> Contrato Firmado por el
                                                                empleador</span>
                                                        @endif
                                                    @endcan
                                                    <label class="d-inline">
                                                    @can('Company_contracts_active_employee_signature')
                                                        @if ($status_employee == 'ACTIVO')
                                                            @if ($item->active_signature_employee == 1)
                                                                @if ($item->signature_employee == null)
                                                                    <span class="border-2 bg-info rounded p-2 m-2">
                                                                        Esperando Firma del Empleado</span>
                                                                @else
                                                                    <span class="border-2 bg-success m-2 p-2"><i
                                                                            class="fas fa-check"></i> Contrato Firmado por
                                                                        el trabajador</span>
                                                                @endif
                                                            @else
                                                                <input type="checkbox"
                                                                    wire:change="ActiveSignatureEmployee({{ $item->id_contract_user }})"
                                                                    class="m-2 checkbox_animated" id="active_signature"
                                                                    title="Eliminar" class="checkbox_animated">
                                                                Activar Firma para empleado
                                                            @endif
                                                        @else
                                                            <span class="border-2 bg-danger m-2 p-2"><i
                                                                    class="fas fa-exclamation-triangle"></i> El empleado no
                                                                se encuentra activo</span>
                                                        @endif
                                                    @endcan
                                                    </label>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-12">
                                            @can('Company_contracts_users_status_approve')
                                                @if ($status_employee == 'ACTIVO')
                                                    <button
                                                        class="btn-sm f-right btn {{ ColorStatusContract($item->status_contract) }}"
                                                        wire:click="StatusApproveContract({{ $item->id_contract_user }})"
                                                        title="Aprobado / Pendiente"><i
                                                            class="m-r-5 fas {{ IconStatusContract($item->status_contract) }}"></i>
                                                        {{ DataTypeStatusContract($item->status_contract) }}</button>
                                                @endif
                                            @endcan
                                        </div>
                                    </div><!-- row -->

                                    <div class="row">
                                        <hr class="my-2">
                                        <div class="col-lg-4 col-md-14 col-sm-12">
                                            @can('Company_contracts_users_terminate')
                                                @if($item->status_contract != '3')
                                                    <button class="btn btn-outline-danger"
                                                        wire:click="OpenTerminateContract({{ $item->id_contract_user }})"
                                                        title="Terminar Contrato">
                                                        <i class="fas fa-times"></i> Terminar Contrato
                                                    </button>
                                                @endif
                                            @endcan
                                        </div>
                                        <div class="col-lg-4 col-md-14 col-sm-12">
                                            @can('Company_contracts_users_annex_add')
                                                @if($item->status_contract == '1')
                                                    <a href="{{ route('otro-si-contrato-empleado', $item->id_contract_user) }}"
                                                        class="btn btn-outline-primary" title="Agregar Otro Si">
                                                        <i class="fas fa-plus"></i> Agregar Otro Si
                                                    </a>
                                                @endif
                                            @endcan
                                        </div>
                                    </div><!-- row -->
                                </div><!-- card-content -->
                            </div><!-- card-body -->
                        </div><!-- card -->
                    @endforeach
                @else
                    <div class="card">
                        <div class="card-header text-center">
                            <h5 class="text-danger">No hay Contratos registrados para este Empleado</h5>
                        </div>
                    </div>
                @endif
                {{ $contracts_user->links() }}
            </div><!-- col-sm-12 -->
        </div><!-- row -->
        @include('livewire.company.contracts.history.form-termination')
        @include('livewire.loading.component') <!--- component loading ,en targetLoading se coloca el id del metodo que se esta cargando --->

    </div><!-- container-fluid -->
</div>
@include('common.scriptsCompStandar')
@push('cheditor')
<script src="{{asset('assets/js/ckeditor/ckeditor.js')}}"></script>
<script>
    const editor = CKEDITOR.replace('reason_termination',
        {
        language: 'es',
        height: 300,
        removeButtons: 'Cut,Copy,Paste,PasteText,PasteFromWord,Anchor,Underline,Strike,Subscript,Superscript,Image,SpecialChar,Maximize,ShowBlocks,About,Save,NewPage,Preview,Print,Templates,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Strike,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Unlink,Anchor,Flash,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Styles,Format,Font,FontSize,TextColor,BGColor,Maximize,About,ShowBlocks,Save,NewPage,Preview,Print,Templates,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Strike,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Unlink,Anchor,Flash,HorizontalRule,Smiley'
        });
    document.querySelector('#save_contract_termination').addEventListener( 'click', () => {
        let contract = $('#reason_termination').data('reason_termination');
        eval (contract).set('reason_termination', editor.getData());
    } );
</script>
@endpush

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('#theModalTerminate').on('show.bs.modal', function() {
            $('.modal-body:first *:input[type!=hidden]:first').trigger('focus');
        });
        window.livewire.on('hide-modal-terminate', msg => {
            $('#theModalTerminate').modal('hide')
        });
        window.livewire.on('show-modal-terminate', msg => {
            $('#theModalTerminate').modal('show')
        });
    });
</script>
