@props([
    'id' => 'signature-' . uniqid(),
    'label' => __('lang.signature.signature'),
    'required' => false,
    'name' => 'signature',
])

@if($label)
    <label for="{{ $id }}" class="form-label">{{ $label }} @if($required)
            <span class="text-danger">*</span>
        @endif </label>
@endif

<div style="width: 100%" id="{{ $id }}-container">
    <canvas class="border" id="{{ $id }}" height="100%"></canvas>
    <input type="hidden" name="{{ $name }}" id="{{ $id }}-signature">
    <button id="clear-{{ $id }}" type="button"
            class="btn ripple btn-outline-primary btn-rounded"><i
                class="fas fa-eraser"></i> {{ __('lang.clear') }}</button>
</div>
{{--@error($name)
<div class="alert alert-danger mt-1">{{ $message }}</div>
@enderror--}}

@push('script')
    <script src="{{ asset('assets/js/signature_pad.umd.min.js') }}"></script>
    <script>
        $(function () {
            const canvas = document.getElementById('{{ $id }}');
            const canvasContainer = $("#{{ $id }}-container");
            canvas.width = canvasContainer.width()
            canvas.height = 300

            const signaturePad = new SignaturePad(canvas);
            signaturePad.addEventListener("endStroke", () => {
                $("#{{ $id }}-signature").val(signaturePad.toDataURL('image/png', 0.5).toString())
            });

            $("#clear-{{ $id }}").click(function () {
                signaturePad.clear();
                $("#{{ $id }}-signature").val('')
            });

            /*function resizeCanvas() {
                const ratio =  Math.max(window.devicePixelRatio || 1, 1);
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
                signaturePad.clear(); // otherwise isEmpty() might return incorrect value
            }

            window.addEventListener("resize", resizeCanvas);
            resizeCanvas();*/
        })


    </script>
@endpush