<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_index', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item active">Firmar Contrato 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>Firmar Contrato <b> | {{ $first_name }} {{ $last_name }}</b></h4>
                            <hr class="hr-primary" />
                            <h6 class="d-inline">Nombre del Contrato: </h6>
                            <p class="d-inline float-right">{{ $sel_contract_name }}</p>
                            <hr class="hr-primary" />
                            <h6 class="d-inline">Tipo de Contrato: </h6>
                            <p class="d-inline float-right">{{ DataTypeContract($sel_contract_type) }}</p>
                            <h6 class="d-inline"> - | - </h6>
                            <h6 class="d-inline">Subtipo de Contrato: </h6>
                            <p class="d-inline float-right">{{ DataSubTypeContract($sel_contract_sub_type) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- row -->
        <div class="row mb-4">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <a href="{{ route('contratos-empleados.historial', $selected_user_id) }}" class="btn btn-outline-primary">
                    <i class="fa fa-arrow-left"></i>
                    Historial de Contratos
                </a>
            </div>

        </div><!-- row -->


    </div><!-- container-fluid -->
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <section class="section_contract">
                    {!! $sel_contract_content !!}
                </section>
            </div><!-- col-sm-12 -->
        </div><!-- row -->
        @if($signature_company_saved == NULL)
        <div class="wrap">
            <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>

                    </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 class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="form-group">
                        <a class="btn btn-primary btn" id="saveSignature" wire:click="saveSignature()">Agregar Firma y Datos del representante</a>
                    </div>
                </div>
            </div>
        </div><!-- wrap -->
        @endif

    </div><!-- container-fluid -->
</div>

@include('common.scriptsCompStandar')
@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');



        $('#clear').click(function(e) {
            e.preventDefault();
            signaturePad.clear();
            $("#signature64").val('');
        });
        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('#saveSignature').addEventListener( 'click', () => {
            if (!signaturePad.isEmpty())
            {
                let signature_company_canvas = signaturePad.toDataURL("image/jpeg");
                let signature_company = $('#signature64');
                @this.set('signature_company', signature_company_canvas);
            }
        });

    </script>
@endpush

