@props([
    'required' => '',
    'name' => '',
])

<div {{ $attributes }} wire:ignore x-data="{
    signaturePadId: $id('signature'),
    signaturePad: null,
    signature: @entangle($attributes->get('wire:model')),
    ratio: null,
    init() {
		const waitForSignaturePad = () => {
			if (typeof SignaturePad === 'undefined') {
				setTimeout(waitForSignaturePad, 50); // probeer opnieuw over 50ms
				return;
			}

			if (!this.$refs.canvas) return;

			this.resizeCanvas();

			this.signaturePad = new SignaturePad(this.$refs.canvas);

			this.signaturePad.addEventListener('endStroke', () => {
				this.signature = this.signaturePad.toDataURL();
			});

			if (this.signature) {
				try {
					this.signaturePad.fromDataURL(this.signature, { ratio: this.ratio });
				} catch (e) {
					console.warn('Kon bestaande handtekening niet laden:', e);
				}
			}
		};

		waitForSignaturePad();
	},
    save() {
        this.signature = this.signaturePad.toDataURL();
        this.$dispatch('signature-saved', this.signaturePadId);
    },
    clear() {
        this.signaturePad.clear();
        this.signature = null;
    },
    resizeCanvas() {
        this.ratio = Math.max(window.devicePixelRatio || 1, 1);
        this.$refs.canvas.width = this.$refs.canvas.offsetWidth * this.ratio;
        this.$refs.canvas.height = this.$refs.canvas.offsetHeight * this.ratio;
        this.$refs.canvas.getContext('2d').scale(this.ratio, this.ratio);
    }
}" @resize.window="resizeCanvas" @load.window="resizeCanvas">

    <canvas x-ref="canvas" class="border-2 border-gray-300 border-dashed rounded-md " style="width: 90%; height: 200px;"></canvas>
	@error($name)
            <p class="error" aria-live="assertive">{{ $message }}</p>
        @enderror



        <a href="#" x-on:click.prevent="clear()" class="btn btn-primary">
            Leegmaken
        </a>



</div>