<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Company_register_users_index', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item active">Contratos</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>Empleado: <b>{{ $first_name }} {{ $last_name }}</b></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <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>
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                @if($count_reg > 0)
                @foreach ($contracts_company 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">
                            <hr class="my-2">
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <a href="javascript:void(0);" class="btn btn-outline-success btn-block" wire:click="openSelContract({{ $item->id  }})">Seleccionar Contrato</a>
                                    </div>
                                </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 Activos para esta Empresa</h5>
                    </div>
                </div>
                @endif
                {{ $contracts_company->links() }}
            </div><!-- col-sm-12 -->
        </div><!-- row -->
    </div><!-- container-fluid -->
    @include('livewire.company.contracts.create.form')
</div>
@include('common.scriptsCompStandar')

@push('cheditor')
<script src="{{asset('assets/js/ckeditor/ckeditor.js')}}"></script>
<script>
    const config = {
        language: 'es',
        height: 150,
        removeButtons: 'Cut,Copy,Paste,PasteText,PasteFromWord,Link,Table,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,Source'
    };
    const editor1 = CKEDITOR.replace('no_salary_cost', config);


    document.addEventListener('DOMContentLoaded', function() {
        window.livewire.on('show-modal', () => {
            editor1.setData('<ul><li></li></ul>');
        });

    });

    document.querySelector('#create_contract').addEventListener( 'click', () => {
        let no_salary_cost = $('#no_salary_cost').data('no_salary_cost');
        eval (no_salary_cost).set('no_salary_cost', editor1.getData());
    } );
</script>
@endpush
