{{-- Reusable signature pad. Expects: $prefix (unique), optional $designation --}}
<div class="mb-2 mt-2">
    <label class="form-label d-flex justify-content-between align-items-center mb-1">
        <span>Sign below <span class="text-danger">*</span></span>
        <button type="button" class="btn btn-sm btn-link text-muted p-0 sig-clear" data-pad="sig-{{ $prefix }}">Clear</button>
    </label>
    <div class="border rounded bg-light">
        <canvas id="sig-{{ $prefix }}" class="sig-pad w-100" width="520" height="160" style="cursor:crosshair; display:block; touch-action:none;"></canvas>
    </div>
    <input type="hidden" name="signature" class="sig-data" data-pad="sig-{{ $prefix }}">
</div>
<div class="row g-2">
    <div class="col-7">
        <label class="form-label mb-1">Name</label>
        <input type="text" name="signed_name" class="form-control" value="{{ auth()->user()->name }}">
    </div>
    <div class="col-5">
        <label class="form-label mb-1">Designation</label>
        <input type="text" name="designation" class="form-control" value="{{ $designation ?? auth()->user()->role_label }}" placeholder="Rank / title">
    </div>
</div>