<div>
    @push('css_contract')
    <link rel="stylesheet" href="{{ asset('assets/css/jquery-ui.css') }}">
    <style>
        .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

            <div class="form-group">
                <small class="text-muted">Firma digital</small><br>
                <input type="hidden" name="document_representative_form" id="document_representative_form" wire:model="document_representative_form">
                <button wire:click="OpenAddSignature" class="btn btn-primary btn-block" id="openAddSignature"><i class="fas fa-plus"></i> Agregar Firma</button>
            </div>


    @include('livewire.company.config.signature.form')
</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");
        var signaturePad = new SignaturePad(canvas);
        $('#clear').click(function(e) {
            e.preventDefault();
            signaturePad.clear();
            $("#signature64").val('');
        });
        document.querySelector('#saveSignature').addEventListener( 'click', () => {
            let signature_company_canvas = signaturePad.toDataURL();
            let signature_company = $('#signature64');
            @this.set('signature_company', signature_company_canvas);
        });
        document.querySelector('#openAddSignature').addEventListener( 'click', () => {
            let valDocRep = $('#document_representative').val();
            $('#document_representative_form').val(valDocRep);
            @this.set('document_representative_form', valDocRep);
        });
    </script>
@endpush

<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.livewire.on('show-modal-add-signature', msg => {
            $('#modal-add-signature').modal('show')
        });
        window.livewire.on('hide-modal-add-signature', msg => {
            $('#modal-add-signature').modal('hide')
        });
        window.livewire.on('item-updated-add-signature', msg => {
            noty(msg);
            $('#modal-add-signature').modal('hide')
        });

    });
</script>
