Added random serial number list livewire pages

resources/views/livewire/random-serial-number-list.blade.php

@@ -0,0 +1,76 @@
+<div class="w-fit rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-950/5">
+    <label class="flex items-center gap-2 mt-4">
+        <input
+            type="checkbox"
+            wire:model.live="showMultipleSerials"
+            class="rounded border-gray-300 text-primary-600"
+        >
+        <span class="text-sm font-medium">
+            Show Multiple Serial Numbers
+        </span>
+    </label>
+
+    <button
+        type="button"
+        wire:click="generate"
+        class="mt-2 rounded bg-primary-600 px-4 py-1 text-white"
+    >
+        Generate
+    </button>
+
+    <button
+        type="button"
+        wire:click="clear"
+        class="mt-2 rounded bg-primary-600 px-4 py-1 text-white"
+    >
+        Clear
+    </button>
+
+    @if ($showMultipleSerials)
+        <div class="mt-4 overflow-x-auto">
+            <div class="flex justify-end mb-2">
+                <span class="text-sm font-medium">
+                    Total Count:
+                    <span class="text-primary-600 font-bold">
+                        {{ count(array_filter($serialNumbers, fn ($serial) => trim($serial) !== '')) }}
+                    </span>
+                </span>
+            </div>
+            <table class="w-1/2 border-collapse border border-gray-300 text-sm">
+                <thead>
+                    <tr class="bg-gray-100">
+                        <th class="border px-3 py-2">S.No</th>
+                        <th class="border px-3 py-2">Serial Number</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    @foreach ($serialNumbers as $index => $serial)
+                        <tr wire:key="serial-row-{{ $index }}">
+                            <td class="border px-3 py-2 text-center">
+                                {{ $index + 1 }}
+                            </td>
+
+                            <td class="border px-3 py-2">
+                                <input
+                                    type="text"
+                                    {{-- wire:model="serialNumbers.{{ $index }}" --}}
+                                    wire:model.live="serialNumbers.{{ $index }}"
+                                    @if ($index === 0)
+                                        x-data
+                                        @paste.prevent="
+                                            const text = $event.clipboardData.getData('text');
+                                            $wire.splitSerialNumbers(text);
+                                        "
+                                    @endif
+                                    class="w-full rounded border-gray-300"
+                                    placeholder="Paste serial numbers here"
+                                >
+                            </td>
+                        </tr>
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
+    @endif
+</div>