<div>
    @push('css_contract')
        <link rel="stylesheet" href="{{ asset('assets/css/jquery-ui.css') }}">
    <style>
        *{user-select: none;}
        *::selection { background: none; }
        *::-moz-selection { background: none; }
        *::-webkit-selection { background: none; }
        *::-ms-selection { background: none; }
        *::-o-selection { background: none; }

        .section_contract{
            width: 99%;
            padding: 0.75rem;
            height: 450px;
            border: 1px solid #ccc;
            overflow-y: scroll;
            margin: 0 auto;
            margin-bottom: 2rem;

        }
        table {
            border: 0px !important;
            border-spacing: 0!important;
            border-collapse: collapse!important;
        }
        table tr {
            border: 0px !important;
            padding: 0.5rem!important;
        }
        table td {
            border: 1px solid #ddd !important;
            padding: 0.5rem 0.25rem;
        }
        ol, ul {
            padding-inline-start: 1rem;
        }

        .kbw-signature {
            width: 350px;
            height: 180px;
        }
        #signaturePad canvas{
            width: 100% !important;
            height: auto;
        }

        .kbw-signature {
            display: inline-block;
            border: 1px solid #a0a0a0;
            -ms-touch-action: none;
        }
        .kbw-signature-disabled {
            opacity: 0.35;
        }

    </style>
@endpush
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Company_contracts_users_annex_add', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item">Contrato Empleado</li>
        <li class="breadcrumb-item active">Anexo Otrosí</li>
        @slot('buttons_extras')
        @can('Companies_add_users')
            <li>
                @can('Company_contracts_users_annex_add')
                <a href="javascript:void(0)" wire:click.prevent="openAddAnnex()"
                    class="btn btn-square btn-primary txt-white" >
                    Agregar Anexo <i class="fa fa-plus"></i>
                </a>
                @endcan
            </li>
        @endcan
        @endslot
    @endcomponent
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <a href={{ route('contratos-empleados.historial', $user_id) }} class="btn btn-square btn-primary txt-white">
                            <i class="fa fa-arrow-left"></i> Volver
                        </a>
                        <div class="card-header">
                            <h4>Empleado <b> | {{ $first_name }} {{ $last_name }}</b></h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="card-title">
                            <h6 class="d-inline">Nombre del Contrato: </h6>
                            <p class="d-inline float-right">{{ $contract_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($contract_type) }}</p>
                            <h6 class="d-inline"> - | - </h6>
                            <h6 class="d-inline">Subtipo de Contrato: </h6>
                            <p class="d-inline float-right">{{ DataSubTypeContract($contract_sub_type) }}</p>
                        </div>
                        <div class="card-content">
                            <h6 class="d-inline">Descripción: </h6>
                            <p class="d-inline float-right">{{ $contract_description }}</p>
                            <hr class="my-2">
                            <h6 class="d-inline">Fecha de Inicio: </h6>
                            <p class="d-inline float-right">
                                {{ \Carbon\Carbon::parse($contract_start_date)->day }} de
                                {{ \Carbon\Carbon::parse($contract_start_date)->monthName }} de
                                {{ \Carbon\Carbon::parse($contract_start_date)->year }}</p>
                            <h6 class="d-inline"> || </h6>
                            <h6 class="d-inline">Fecha de Finalización: </h6>
                            @if ($contract_end_date != null)
                                <p class="d-inline float-right">
                                    {{ \Carbon\Carbon::parse($contract_end_date)->day }} de
                                    {{ \Carbon\Carbon::parse($contract_end_date)->monthName }} de
                                    {{ \Carbon\Carbon::parse($contract_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($contract_created_at)->day }} de
                                {{ \Carbon\Carbon::parse($contract_created_at)->monthName }} del
                                {{ \Carbon\Carbon::parse($contract_created_at)->year }}</p>
                        </div><!--end card-content-->

                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">{{ $annex_name }}</h4>
                                        <input type="hidden" wire:model.lazy='annex_id'>
                                        @error('annex_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <label>{{ $annex_description }}</label>
                                                        <div id="annex_content_edit_container" wire:ignore>
                                                            <textarea id="annex_content_edit" data-annex_content_edit="@this" class="form-control" wire:model="annex_content_edit" rows="5">{!! $annex_content_edit !!}</textarea>
                                                        </div>
                                                        @error('annex_content_edit')
                                                            <span class="text-danger er">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row my-4">
                                                <div class="col-lg-4 col-md-4 col-sm-12 m-b-20">
                                                    <div class="form-group">
                                                        <label>Firma del representante legal o supervisor del contrato</label>
                                                        <br>
                                                        <canvas id="signature" width="350" height="180" style="border: 1px solid #ddd; background:#fff;"></canvas>
                                                        <textarea id="signature64" name="signature_company" style="display: none" wire:model.lazy="signature_company"></textarea>
                                                        @error ('signature_validate')
                                                            <span class="text-danger er">{{ $message }}</span>
                                                        @enderror
                                                        <div wire:ignore>
                                                        <input type="hidden" id="signature_validate" name="signature_validate" wire:model.debounce.3000ms="signature_validate" class="form-control" >
                                                        </div>
                                                    </div>
                                                    <button id="clear" class="btn btn-danger btn-sm">Borrar Firma</button>

                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-12">
                                                    <div class="row">
                                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                                            <h5>Datos del representante legal o supervisor/encargado del contrato</h5>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                                            <div class="form-group">
                                                                <label>Nombres y Apellidos:</label>
                                                                <input type="text" class="form-control" name="signature_full_name" wire:model.lazy="signature_full_name" placeholder="ej: Juan Perez">
                                                                @error('signature_full_name') <span class="text-danger">{{ $message }}</span> @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                                            <div class="form-group">
                                                                <label>Cargo:</label>
                                                                <input type="text" class="form-control" name="signature_position" wire:model.lazy="signature_position" placeholder="ej: Gerente">
                                                                @error('signature_position') <span class="text-danger">{{ $message }}</span> @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                                            <div class="form-group">
                                                                <label>Tipo de Documento:</label>
                                                                <select class="form-select" name="signature_document_type" wire:model.lazy="signature_document_type">
                                                                    <option value="">Seleccionar</option>
                                                                    @foreach (DataTypeDocument() as $key => $value)
                                                                        <option value="{{ $key }}">{{ $value }}</option>
                                                                    @endforeach
                                                                </select>
                                                                @error('signature_document_type') <span class="text-danger">{{ $message }}</span> @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                                            <div class="form-group">
                                                                <label>Número de Documento:</label>
                                                                <input type="text" class="form-control" name="signature_document_number" wire:model.lazy="signature_document_number" placeholder="ej: 12345678">
                                                                @error('signature_document_number') <span class="text-danger">{{ $message }}</span> @enderror
                                                            </div>
                                                        </div>
                                                    </div><!-- row -->
                                                </div><!-- col-lg-6 col-md-6 col-sm-12 -->
                                            </div><!-- row -->

                                        </div><!--end card-body-->
                                        <div class="card-footer">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-12">
                                                    <div class="form-group">
                                                        <button type="button" id="save_annex_others" class="btn btn-square btn-primary" wire:click="createAnnex">
                                                            <i class="fa fa-save"></i> Crear Anexo Otrosí
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!--end card-footer-->
                                    </div><!--end card-content-->
                                </div>
                            </div>
                        </div>
                    </div><!--end card-body-->
                </div>
            </div>
        </div>
    </div>
    @include('livewire.company.contracts.history.annex-others.form')
    @include('livewire.loading.component') <!--- component loading ,en targetLoading se coloca el id del metodo que se esta cargando --->
</div>
@include('common.scriptsCompStandar')
@push('cheditor')
<script src="{{asset('assets/js/ckeditor/ckeditor.js')}}"></script>
<script>
    const editor = CKEDITOR.replace('annex_content_edit',
        {
        language: 'es',
        height: 500,
        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.addEventListener('DOMContentLoaded', function() {
        window.livewire.on('item-added', () => {
            editor.setData({!! $annex_content_edit !!})
        });

    });

</script>
@endpush
@push('signature')
<script src="{{ asset('assets/js/signature_pad.min.js') }}"></script>
    <script type="text/javascript">


        var canvas = document.getElementById("signature");
        const signaturePad = new SignaturePad(canvas,{
            backgroundColor: 'rgb(255, 255, 255)'
        });
        const darkModeToggleSignature = document.querySelector('#mode_toggle');

        signaturePad.addEventListener("beginStroke",(event) => {
            //let signature_validate = $('#signature_validate').val('Firma');
            //eval(signature_validate).set('signature_validate', false);
            @this.set('signature_validate', 'Firma');
        },{ once: true });


        $('#clear').click(function(e) {
            e.preventDefault();
            signaturePad.clear();
            $("#signature64").val('');
            @this.set('signature_validate', '');
        });

        function isCanvasEmpty(cnv) {
                const blank = document.createElement('canvas');

                blank.width = cnv.width;
                blank.height = cnv.height;

                return cnv.toDataURL("image/jpeg") === blank.toDataURL("image/jpeg");
        }
        document.querySelector('#save_annex_others').addEventListener( 'click', () => {
            let annex_content_edit = $('#annex_content_edit').data('annex_content_edit');
            eval (annex_content_edit).set('annex_content_edit', editor.getData());

            if (!signaturePad.isEmpty())
            {
                let signature_company_canvas = signaturePad.toDataURL("image/jpeg");
                let signature_company = $('#signature64');
                @this.set('signature_company', signature_company_canvas);

            }
        });

    </script>
@endpush
