<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Contract_update', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Administración</li>
        <li class="breadcrumb-item">Contratos</li>
        <li class="breadcrumb-item active">Detalle</li>
    @endcomponent
    <div class="container-fluid">
	    <div class="row">
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-header">
                        <h5>Datos del contrato</h5>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="">Nombre del contrato</label>
                                    <input type="text" class="form-control" wire:model="name_contract" >
                                    @error('name_contract')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="">Descripción</label>
                                    <textarea class="form-control" wire:model="description_contract" cols="30" rows="5"></textarea>
                                    @error('description_contract')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label>Tipo de contrato</label>
                                    <select wire:model.lazy="type_contract" class="form-select">
                                        <option value="">Seleccione una opción</option>
                                        @foreach (DataTypeContract() as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                    @error('type_contract')
                                        <span class="text-danger err">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label>Subtipo del Contrato</label>
                                    <select wire:model.lazy="sub_type_contract" class="form-select">
                                        <option value="">Seleccione una opción</option>
                                        @foreach (DataSubTypeContract() as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                    @error('sub_type_contract')
                                        <span class="text-danger err">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12">
                                <div class="form-group">
                                    <label>Estado</label>
                                    <select wire:model.lazy="status_contract" class="form-select">
                                        <option value="">Seleccione una opción</option>
                                        <option value="Activo">Activo</option>
                                        <option value="Inactivo">Inactivo</option>
                                    </select>
                                    @error('status')
                                        <span class="text-danger err">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12">

                                    <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>Planes
                                            </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>Empresas
                                            </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('contract-plans-controller', ['contract_sel_id' => $id_contract])
                                        </div>
                                        <div class="tab-pane fade" id="top-workExp" role="tabpanel" aria-labelledby="top-work-exp">
                                            @livewire('contract-companies-controller', ['contract_sel_id' => $id_contract])
                                        </div>
                                    </div>
                            </div>
                        </div><!-- row -->
                    </div>

                </div>
            </div>
	        <div class="col-sm-8">
	            <div class="card">
	                <div class="card-header pb-0">
                        <p class="h4 txt-info">Contrato <b>{{ $name_contract }}</b></p>
                        <div class="media mb-0">
                            <div class="media-body text-danger text-end">
                                <button type="submit" id="save_contract" class="btn btn-primary" wire:click.prevent="Update()">Guardar Cambios</button>
                            </div>
                        </div>
	                </div>
	                <div class="card-body">
	                    <div id="editor_container" wire:ignore>
	                        <textarea id="content_contract" data-content_contract="@this" class="form-control" wire:model="content_contract" rows="20">{!! $content_contract !!}</textarea>
	                    </div>

	                </div>
	            </div>
	        </div>
	    </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.livewire.on('contract-updated', msg => {
            noty(msg)
        });

    });

</script>

@push('cheditor')
<script src="{{asset('assets/js/ckeditor/ckeditor.js')}}"></script>
<script>
    const editor = CKEDITOR.replace('content_contract',
        {
        language: 'es',
        height: 500,
        extraPlugins: 'shortcodes',
        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').addEventListener( 'click', () => {
        let contract = $('#content_contract').data('content_contract');
        eval (contract).set('content_contract', editor.getData());
    } );
</script>
@endpush

