Initial Commit

resources/views/component/signature-pad.blade.php

@@ -0,0 +1,63 @@
+<style>
+    .signature-pad-container canvas {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        overflow: hidden;
+    }
+
+    .signature-pad-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .signature-pad {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 2/1;
+        object-fit: contain;
+    }
+    </style>
+
+<div class="signature-pad-container mx-auto border p-4 max-w-md sm:max-w-lg lg:max-w-xl">
+    <h3 class="signature-title text-md sm:text-lg  mb-2 uppercase">{{ ucfirst($type) }}</h3>
+    <div class="w-full aspect-w-2 aspect-h-1">
+        <canvas
+            id="signature-pad-{{ $type }}"
+            class="signature-pad w-full h-full bg-white border rounded"
+        ></canvas>
+    </div>
+    <input
+        type="text"
+        class="input w-full border p-2 mt-2 rounded"
+        name="name-{{ $type }}"
+        id="name-{{ $type }}"
+        placeholder="Enter your name"
+    />
+    <div class="button-container flex justify-between py-4">
+        <button
+            type="button"
+            id="save-{{ $type }}"
+            class="btn btn-primary px-4 py-2 rounded "
+        >
+            Save
+        </button>
+        <button
+            type="button"
+            id="clear-{{ $type }}"
+            class="btn btn-light px-4 py-2 rounded"
+        >
+            Clear
+        </button>
+        <button
+            type="button"
+            id="delete-{{ $type }}"
+            class="btn btn-danger text-white px-4 py-2 rounded hover:bg-red-600"
+        >
+            Delete
+        </button>
+    </div>
+    <div id="status-{{ $type }}" class="status-message text-sm text-gray-600 mt-2"></div>
+</div>