@props([
    'label' => 'Signature',
    'name' => 'signature',
    'value' => '',
    'mode' => 'edit',
    'required' => false
])

@php
    $isReadOnly = $mode === 'view';
    $canvasId = 'canvas_' . str_replace(['[', ']', '.'], ['_', '_', '_'], $name);
    $inputId = 'input_' . $canvasId;
@endphp

<div class="form-field col-span-full">
    <label class="tc-field-label">
        {{ $label }}
        @if($required)
            <span class="text-red-500">*</span>
        @endif
    </label>

    @if($isReadOnly)
        <!-- Read-only signature display -->
        @if($value)
            <div class="signature-container">
                <img src="{{ $value }}" alt="Signature" class="max-w-full h-auto rounded-lg border border-gray-200">
            </div>
        @else
            <div class="tc-input bg-gray-50 text-gray-500 text-center py-8">
                No signature provided
            </div>
        @endif
    @else
        <!-- Editable signature canvas -->
        <div class="signature-container">
            <canvas 
                id="{{ $canvasId }}" 
                class="signature-pad w-full border border-gray-300 rounded-lg bg-white"
                width="800" 
                height="200"
                style="display: block; margin: 0 auto; cursor: crosshair; touch-action: none;"
            ></canvas>
            <input type="hidden" id="{{ $inputId }}" name="{{ $name }}" value="{{ $value }}">
        </div>

        <div class="flex gap-3 mt-4">
            <button
                type="button"
                class="tc-btn-secondary"
                onclick="clearSignature('{{ $canvasId }}', '{{ $inputId }}')"
            >
                <i class="fas fa-eraser"></i> Clear Signature
            </button>
        </div>
    @endif
</div>

@push('scripts')
<script>
class SignaturePad {
    constructor(canvasId, inputId) {
        this.canvas = document.getElementById(canvasId);
        this.input = document.getElementById(inputId);
        this.ctx = this.canvas.getContext('2d');
        this.isDrawing = false;
        this.lastX = 0;
        this.lastY = 0;

        if (!this.canvas) return;

        // Set canvas size
        this.resizeCanvas();
        window.addEventListener('resize', () => this.resizeCanvas());

        // Mouse events
        this.canvas.addEventListener('mousedown', (e) => this.startDrawing(e));
        this.canvas.addEventListener('mousemove', (e) => this.draw(e));
        this.canvas.addEventListener('mouseup', () => this.stopDrawing());
        this.canvas.addEventListener('mouseout', () => this.stopDrawing());

        // Touch events
        this.canvas.addEventListener('touchstart', (e) => this.startDrawing(e));
        this.canvas.addEventListener('touchmove', (e) => this.draw(e));
        this.canvas.addEventListener('touchend', () => this.stopDrawing());

        // Load existing signature if available
        this.loadExistingSignature();
    }

    resizeCanvas() {
        const rect = this.canvas.getBoundingClientRect();
        this.canvas.width = rect.width * window.devicePixelRatio;
        this.canvas.height = rect.height * window.devicePixelRatio;
        this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        this.ctx.lineCap = 'round';
        this.ctx.lineJoin = 'round';
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = '#1f2937';
    }

    startDrawing(e) {
        this.isDrawing = true;
        const rect = this.canvas.getBoundingClientRect();
        const x = e.clientX || e.touches[0].clientX;
        const y = e.clientY || e.touches[0].clientY;
        this.lastX = x - rect.left;
        this.lastY = y - rect.top;
    }

    draw(e) {
        if (!this.isDrawing) return;

        const rect = this.canvas.getBoundingClientRect();
        const x = e.clientX || e.touches[0].clientX;
        const y = e.clientY || e.touches[0].clientY;
        const currentX = x - rect.left;
        const currentY = y - rect.top;

        this.ctx.beginPath();
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(currentX, currentY);
        this.ctx.stroke();

        this.lastX = currentX;
        this.lastY = currentY;
    }

    stopDrawing() {
        this.isDrawing = false;
        this.saveSignature();
    }

    clear() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.input.value = '';
    }

    saveSignature() {
        this.input.value = this.canvas.toDataURL('image/png');
    }

    loadExistingSignature() {
        if (this.input.value) {
            const img = new Image();
            img.onload = () => {
                this.ctx.drawImage(img, 0, 0);
            };
            img.src = this.input.value;
        }
    }
}

// Initialize all signature pads
let signaturePads = {};

document.addEventListener('DOMContentLoaded', function() {
    const canvases = document.querySelectorAll('.signature-pad');
    canvases.forEach(canvas => {
        const canvasId = canvas.id;
        const inputId = 'input_' + canvasId;
        signaturePads[canvasId] = new SignaturePad(canvasId, inputId);
    });
});

// Global functions
function clearSignature(canvasId, inputId) {
    if (signaturePads[canvasId]) {
        signaturePads[canvasId].clear();
    }
}

function downloadSignature(canvasId) {
    const canvas = document.getElementById(canvasId);
    if (canvas) {
        const link = document.createElement('a');
        link.href = canvas.toDataURL('image/png');
        link.download = 'signature_' + new Date().getTime() + '.png';
        link.click();
    }
}

// Save all signatures before form submission
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            Object.keys(signaturePads).forEach(canvasId => {
                if (signaturePads[canvasId]) {
                    signaturePads[canvasId].saveSignature();
                }
            });
        });
    }
});
</script>
@endpush

<style>
    .signature-container {
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: white;
        padding: 12px;
        overflow: hidden;
    }

    .signature-pad {
        display: block;
        margin: 0 auto;
        background: white;
        border-radius: 6px;
    }

    @media (max-width: 768px) {
        .signature-pad {
            height: 150px !important;
        }
    }
</style>