@extends('layouts.app')

@section('titulo', 'Firmar Parte #'.$parte->id)

@section('contenido')
    <div class="mb-3">
        <a href="{{ route('partes.show', $parte) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Volver
        </a>
    </div>

    <div class="card">
        <div class="card-header">
            <strong>Firma digital</strong>
            <div class="text-muted small">Dibuja en la pizarra y guarda.</div>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('partes.firmar', $parte) }}" id="form-firma-parte">
                @csrf

                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Firmado por</label>
                        <input class="form-control" type="text" name="firmado_por" value="{{ old('firmado_por') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Cargo</label>
                        <input class="form-control" type="text" name="cargo" value="{{ old('cargo') }}">
                    </div>
                </div>

                <div class="border rounded p-2 bg-light">
                    <canvas id="firma-canvas" style="width:100%;height:220px;touch-action:none;background:#fff;border-radius:6px;"></canvas>
                </div>
                <input type="hidden" name="firma_png" id="firma_png">

                <div class="d-flex flex-wrap gap-2 mt-3">
                    <button class="btn btn-outline-secondary" type="button" id="firma-limpiar">
                        Limpiar
                    </button>
                    <button class="btn btn-primary" type="submit" id="firma-guardar">
                        Guardar firma
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('firma-canvas');
    const input = document.getElementById('firma_png');
    const btnLimpiar = document.getElementById('firma-limpiar');
    const form = document.getElementById('form-firma-parte');
    if (!canvas || !input || !form) return;

    const ctx = canvas.getContext('2d');
    let drawing = false;
    let last = null;

    function resize() {
        const rect = canvas.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        canvas.width = Math.max(1, Math.floor(rect.width * dpr));
        canvas.height = Math.max(1, Math.floor(rect.height * dpr));
        ctx.scale(dpr, dpr);
        ctx.lineWidth = 2.2;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.strokeStyle = '#111';
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, rect.width, rect.height);
    }

    function pos(e) {
        const rect = canvas.getBoundingClientRect();
        const x = (e.clientX - rect.left);
        const y = (e.clientY - rect.top);
        return {x, y};
    }

    function down(e) {
        drawing = true;
        last = pos(e);
    }
    function move(e) {
        if (!drawing) return;
        const p = pos(e);
        ctx.beginPath();
        ctx.moveTo(last.x, last.y);
        ctx.lineTo(p.x, p.y);
        ctx.stroke();
        last = p;
    }
    function up() {
        drawing = false;
        last = null;
    }

    canvas.addEventListener('pointerdown', down);
    canvas.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);

    if (btnLimpiar) {
        btnLimpiar.addEventListener('click', function () {
            resize();
        });
    }

    resize();
    window.addEventListener('resize', function () { resize(); });

    form.addEventListener('submit', function () {
        input.value = canvas.toDataURL('image/png');
    });
});
</script>
@endpush