Replace native confirms with Ladill custom dialogs.

resources/js/ladill-modals.js

@@ -33,6 +33,10 @@ export function ladillNeedsTopup(balance, price) {
     return normalizedBalance <= 0 || normalizedBalance < normalizedPrice;
 }
 
+/**
+ * Alpine store mirrors window.ladillConfirm (defined in partials/confirm-prompt).
+ * Prefer window.ladillConfirm for new code — it works without Alpine and powers data-confirm forms.
+ */
 export function registerLadillConfirmStore(Alpine) {
     Alpine.store('ladillConfirm', {
         open: false,
@@ -44,6 +48,11 @@ export function registerLadillConfirmStore(Alpine) {
         _resolve: null,
 
         ask(options = {}) {
+            // Delegate to the global custom dialog when available (no double UI).
+            if (typeof window.ladillConfirm === 'function' && window.__ladillConfirmInstalled) {
+                return window.ladillConfirm(options);
+            }
+
             return new Promise((resolve) => {
                 this.title = options.title || 'Are you sure?';
                 this.message = options.message || '';
@@ -65,7 +74,9 @@ export function registerLadillConfirmStore(Alpine) {
         },
     });
 
-    window.ladillConfirm = (options = {}) => Alpine.store('ladillConfirm').ask(options);
+    if (typeof window.ladillConfirm !== 'function') {
+        window.ladillConfirm = (options = {}) => Alpine.store('ladillConfirm').ask(options);
+    }
 }
 
 export function registerLadillModalHelpers() {

resources/views/partials/confirm-prompt.blade.php

@@ -1,66 +1,213 @@
-<div
-    x-cloak
-    x-show="$store.ladillConfirm.open"
-    x-transition:enter="transition-opacity ease-out duration-200"
-    x-transition:enter-start="opacity-0"
-    x-transition:enter-end="opacity-100"
-    x-transition:leave="transition-opacity ease-in duration-200"
-    x-transition:leave-start="opacity-100"
-    x-transition:leave-end="opacity-0"
-    class="fixed inset-0 z-[60] flex items-end sm:items-center sm:justify-center"
-    style="background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);"
-    @keydown.escape.window="$store.ladillConfirm.answer(false)"
->
-    <div class="absolute inset-0" @click="$store.ladillConfirm.answer(false)"></div>
+{{--
+  Ladill custom confirm dialog (replaces native window.confirm for app UX).
 
-    <div
-        x-cloak
-        x-show="$store.ladillConfirm.open"
-        class="relative z-10 w-full max-h-[90vh] overflow-y-auto rounded-t-3xl bg-white shadow-2xl sm:mb-6 sm:max-h-[85vh] sm:max-w-md sm:rounded-2xl sm:border sm:border-gray-200"
-        x-transition:enter="ease-out duration-200"
-        x-transition:enter-start="translate-y-full sm:translate-y-0 sm:opacity-0 sm:scale-95"
-        x-transition:enter-end="translate-y-0 sm:opacity-100 sm:scale-100"
-        x-transition:leave="ease-in duration-200"
-        x-transition:leave-start="translate-y-0 sm:opacity-100 sm:scale-100"
-        x-transition:leave-end="translate-y-full sm:translate-y-0 sm:opacity-0 sm:scale-95"
-        @click.stop
-    >
+  Usage:
+    1) Forms:  <form data-confirm="Delete this item?" data-confirm-title="Delete?" ...>
+    2) JS:     const ok = await window.ladillConfirm({ title, message, confirmLabel, variant })
+
+  Bottom sheet on mobile, centered card on desktop — same pattern as x-modal.
+--}}
+<div id="ladill-confirm-root" class="fixed inset-0 z-[60] hidden items-end sm:items-center sm:justify-center"
+     style="background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);"
+     role="dialog" aria-modal="true" aria-labelledby="ladill-confirm-title">
+    <div id="ladill-confirm-backdrop" class="absolute inset-0"></div>
+    <div id="ladill-confirm-panel"
+         class="relative z-10 w-full max-h-[90vh] translate-y-full overflow-y-auto rounded-t-3xl bg-white shadow-2xl opacity-0 transition duration-200 sm:mb-6 sm:max-h-[85vh] sm:max-w-md sm:translate-y-2 sm:scale-95 sm:rounded-2xl sm:border sm:border-gray-200">
         <div class="flex justify-center pb-1 pt-3 sm:hidden">
             <div class="h-1 w-10 rounded-full bg-slate-200"></div>
         </div>
-
         <div class="px-5 pb-6 pt-2 sm:px-6 sm:pb-6 sm:pt-4">
             <div class="flex flex-col items-center text-center sm:items-start sm:text-left">
-                <div class="flex h-12 w-12 items-center justify-center rounded-full"
-                     :class="$store.ladillConfirm.variant === 'primary' ? 'bg-violet-100 text-violet-600' : 'bg-red-100 text-red-600'">
-                    <template x-if="$store.ladillConfirm.variant === 'primary'">
-                        <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"/>
-                        </svg>
-                    </template>
-                    <template x-if="$store.ladillConfirm.variant !== 'primary'">
-                        <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
-                        </svg>
-                    </template>
+                <div id="ladill-confirm-icon" class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 text-red-600">
+                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
+                    </svg>
                 </div>
-                <h2 class="mt-4 text-lg font-semibold text-slate-900" x-text="$store.ladillConfirm.title"></h2>
-                <p x-show="$store.ladillConfirm.message" class="mt-2 whitespace-pre-line text-sm leading-relaxed text-slate-500" x-text="$store.ladillConfirm.message"></p>
+                <h2 id="ladill-confirm-title" class="mt-4 text-lg font-semibold text-slate-900">Are you sure?</h2>
+                <p id="ladill-confirm-message" class="mt-2 whitespace-pre-line text-sm leading-relaxed text-slate-500"></p>
             </div>
-
             <div class="mt-6 flex flex-col-reverse gap-2.5 sm:flex-row sm:justify-end">
-                <button type="button"
-                        @click="$store.ladillConfirm.answer(false)"
-                        class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
-                        x-text="$store.ladillConfirm.cancelLabel">
+                <button type="button" id="ladill-confirm-cancel"
+                        class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
+                    Cancel
                 </button>
-                <button type="button"
-                        @click="$store.ladillConfirm.answer(true)"
-                        class="rounded-xl px-4 py-2.5 text-sm font-semibold text-white transition"
-                        :class="$store.ladillConfirm.variant === 'primary' ? 'bg-violet-600 hover:bg-violet-700' : 'bg-red-600 hover:bg-red-700'"
-                        x-text="$store.ladillConfirm.confirmLabel">
+                <button type="button" id="ladill-confirm-ok"
+                        class="rounded-xl bg-red-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700">
+                    Confirm
                 </button>
             </div>
         </div>
     </div>
 </div>
+
+<script>
+(function () {
+    if (window.__ladillConfirmInstalled) {
+        return;
+    }
+    window.__ladillConfirmInstalled = true;
+
+    let resolveAsk = null;
+    const root = () => document.getElementById('ladill-confirm-root');
+    const panel = () => document.getElementById('ladill-confirm-panel');
+    const titleEl = () => document.getElementById('ladill-confirm-title');
+    const messageEl = () => document.getElementById('ladill-confirm-message');
+    const okBtn = () => document.getElementById('ladill-confirm-ok');
+    const cancelBtn = () => document.getElementById('ladill-confirm-cancel');
+    const iconEl = () => document.getElementById('ladill-confirm-icon');
+
+    function close(result) {
+        const r = root();
+        const p = panel();
+        if (!r || !p) {
+            if (resolveAsk) {
+                resolveAsk(result);
+                resolveAsk = null;
+            }
+            return;
+        }
+        p.classList.add('translate-y-full', 'opacity-0', 'sm:translate-y-2', 'sm:scale-95');
+        p.classList.remove('translate-y-0', 'opacity-100', 'sm:scale-100');
+        setTimeout(() => {
+            r.classList.add('hidden');
+            r.classList.remove('flex');
+            document.body.classList.remove('overflow-y-hidden');
+            if (resolveAsk) {
+                resolveAsk(result);
+                resolveAsk = null;
+            }
+        }, 180);
+    }
+
+    function openDialog(options) {
+        const opts = options || {};
+        return new Promise((resolve) => {
+            if (resolveAsk) {
+                resolveAsk(false);
+            }
+            resolveAsk = resolve;
+
+            const r = root();
+            const p = panel();
+            if (!r || !p) {
+                resolve(window.__ladillNativeConfirm
+                    ? window.__ladillNativeConfirm(opts.message || opts.title || 'Are you sure?')
+                    : false);
+                return;
+            }
+
+            titleEl().textContent = opts.title || 'Are you sure?';
+            const msg = opts.message || '';
+            messageEl().textContent = msg;
+            messageEl().classList.toggle('hidden', !msg);
+            okBtn().textContent = opts.confirmLabel || 'Confirm';
+            cancelBtn().textContent = opts.cancelLabel || 'Cancel';
+
+            const primary = (opts.variant || 'danger') === 'primary';
+            iconEl().className = 'flex h-12 w-12 items-center justify-center rounded-full ' +
+                (primary ? 'bg-violet-100 text-violet-600' : 'bg-red-100 text-red-600');
+            okBtn().className = 'rounded-xl px-4 py-2.5 text-sm font-semibold text-white transition ' +
+                (primary ? 'bg-violet-600 hover:bg-violet-700' : 'bg-red-600 hover:bg-red-700');
+
+            r.classList.remove('hidden');
+            r.classList.add('flex');
+            document.body.classList.add('overflow-y-hidden');
+            requestAnimationFrame(() => {
+                p.classList.remove('translate-y-full', 'opacity-0', 'sm:translate-y-2', 'sm:scale-95');
+                p.classList.add('translate-y-0', 'opacity-100', 'sm:scale-100');
+            });
+            okBtn().focus();
+        });
+    }
+
+    window.ladillConfirm = openDialog;
+
+    // Prefer custom dialog; keep native as emergency fallback only.
+    if (!window.__ladillNativeConfirm) {
+        window.__ladillNativeConfirm = window.confirm.bind(window);
+    }
+
+    document.addEventListener('click', function (e) {
+        if (e.target.closest('#ladill-confirm-cancel') || e.target.closest('#ladill-confirm-backdrop')) {
+            close(false);
+        }
+        if (e.target.closest('#ladill-confirm-ok')) {
+            close(true);
+        }
+    });
+
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && root() && !root().classList.contains('hidden')) {
+            close(false);
+        }
+    });
+
+    // Forms: data-confirm="…" replaces onsubmit="return confirm(…)"
+    document.addEventListener('submit', function (e) {
+        const form = e.target;
+        if (!(form instanceof HTMLFormElement)) {
+            return;
+        }
+        if (form.dataset.ladillConfirming === '1') {
+            return;
+        }
+        const message = form.getAttribute('data-confirm');
+        if (message === null || message === '') {
+            return;
+        }
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        openDialog({
+            title: form.getAttribute('data-confirm-title') || 'Are you sure?',
+            message: message,
+            confirmLabel: form.getAttribute('data-confirm-label') || 'Confirm',
+            cancelLabel: form.getAttribute('data-confirm-cancel') || 'Cancel',
+            variant: form.getAttribute('data-confirm-variant') || 'danger',
+        }).then(function (ok) {
+            if (!ok) {
+                return;
+            }
+            form.dataset.ladillConfirming = '1';
+            // Native submit skips the submit event → no re-entry.
+            HTMLFormElement.prototype.submit.call(form);
+            queueMicrotask(function () {
+                delete form.dataset.ladillConfirming;
+            });
+        });
+    }, true);
+
+    // Buttons/links: data-confirm on non-submit controls that should gate a click.
+    document.addEventListener('click', function (e) {
+        const el = e.target.closest('[data-confirm-click]');
+        if (!el || el.closest('form[data-confirm]')) {
+            return;
+        }
+        const message = el.getAttribute('data-confirm-click');
+        if (message === null || message === '') {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        openDialog({
+            title: el.getAttribute('data-confirm-title') || 'Are you sure?',
+            message: message,
+            confirmLabel: el.getAttribute('data-confirm-label') || 'Confirm',
+            cancelLabel: el.getAttribute('data-confirm-cancel') || 'Cancel',
+            variant: el.getAttribute('data-confirm-variant') || 'danger',
+        }).then(function (ok) {
+            if (!ok) {
+                return;
+            }
+            if (el.tagName === 'A' && el.href) {
+                window.location.href = el.href;
+                return;
+            }
+            if (el.form) {
+                el.form.dataset.ladillConfirming = '1';
+                HTMLFormElement.prototype.submit.call(el.form);
+            }
+        });
+    }, true);
+})();
+</script>

resources/views/pos/branches/edit.blade.php

@@ -32,7 +32,7 @@
                     <button type="submit" class="btn-primary">Save branch</button>
                 </div>
             </form>
-            <form method="POST" action="{{ route('pos.branches.destroy', $location) }}" class="mt-4 border-t border-slate-100 pt-4" onsubmit="return confirm('Remove this branch?');">
+            <form method="POST" action="{{ route('pos.branches.destroy', $location) }}" class="mt-4 border-t border-slate-100 pt-4" data-confirm="Remove this branch?" data-confirm-title="Remove this branch?" data-confirm-label="Remove">
                 @csrf
                 @method('DELETE')
                 <button type="submit" class="text-sm font-medium text-red-600 hover:text-red-800">Delete branch</button>

resources/views/pos/devices/edit.blade.php

@@ -79,16 +79,14 @@
         <x-settings.card title="Device actions" class="mt-6">
             <div class="space-y-3">
                 @if ($device->device_token)
-                    <form method="POST" action="{{ route('pos.devices.regenerate-token', $device) }}"
-                          onsubmit="return confirm('Regenerate token? Existing display sessions will stop until reopened.');">
+                    <form method="POST" action="{{ route('pos.devices.regenerate-token', $device) }}" data-confirm="Regenerate token? Existing display sessions will stop until reopened." data-confirm-title="Are you sure?" data-confirm-label="Confirm">
                         @csrf
                         <button type="submit" class="w-full rounded-xl border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm font-medium text-amber-900 hover:bg-amber-100 sm:w-auto">
                             Regenerate token
                         </button>
                     </form>
                 @endif
-                <form method="POST" action="{{ route('pos.devices.destroy', $device) }}"
-                      onsubmit="return confirm('Remove this device?');">
+                <form method="POST" action="{{ route('pos.devices.destroy', $device) }}" data-confirm="Remove this device?" data-confirm-title="Remove this device?" data-confirm-label="Remove">
                     @csrf
                     @method('DELETE')
                     <button type="submit" class="w-full rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm font-medium text-rose-800 hover:bg-rose-100 sm:w-auto">

resources/views/pos/menu/index.blade.php

@@ -20,7 +20,7 @@
                     @forelse ($categories as $category)
                         <li class="flex items-center justify-between py-2 text-sm">
                             <span class="text-slate-800">{{ $category->name }}</span>
-                            <form method="POST" action="{{ route('pos.menu.categories.destroy', $category) }}" onsubmit="return confirm('Remove category?');">
+                            <form method="POST" action="{{ route('pos.menu.categories.destroy', $category) }}" data-confirm="Remove category?" data-confirm-title="Remove category?" data-confirm-label="Remove">
                                 @csrf @method('DELETE')
                                 <button class="text-xs font-medium text-red-500 hover:text-red-700">Remove</button>
                             </form>
@@ -45,7 +45,7 @@
                     @forelse ($stations as $station)
                         <li class="flex items-center justify-between py-2 text-sm">
                             <span class="text-slate-800">{{ $station->name }}</span>
-                            <form method="POST" action="{{ route('pos.menu.stations.destroy', $station) }}" onsubmit="return confirm('Remove station?');">
+                            <form method="POST" action="{{ route('pos.menu.stations.destroy', $station) }}" data-confirm="Remove station?" data-confirm-title="Remove station?" data-confirm-label="Remove">
                                 @csrf @method('DELETE')
                                 <button class="text-xs font-medium text-red-500 hover:text-red-700">Remove</button>
                             </form>
@@ -87,7 +87,7 @@
                                     choose {{ $group->min_select }}–{{ $group->max_select ?? 'any' }}
                                 </span>
                             </p>
-                            <form method="POST" action="{{ route('pos.menu.groups.destroy', $group) }}" onsubmit="return confirm('Remove group and its options?');">
+                            <form method="POST" action="{{ route('pos.menu.groups.destroy', $group) }}" data-confirm="Remove group and its options?" data-confirm-title="Remove group and its options?" data-confirm-label="Remove">
                                 @csrf @method('DELETE')
                                 <button class="text-xs font-medium text-red-500 hover:text-red-700">Remove group</button>
                             </form>

resources/views/pos/pro/index.blade.php

@@ -36,7 +36,7 @@
                         <strong>{{ $isEnterprise ? 'Business' : 'Pro' }}</strong> active until <strong>{{ $subscription->current_period_end->format('d M Y') }}</strong>
                     </div>
                     @if ($subscription->auto_renew)
-                        <form method="post" action="{{ route('pos.pro.cancel') }}" onsubmit="return confirm('Turn off auto-renew?');">@csrf<button class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel auto-renew</button></form>
+                        <form method="post" action="{{ route('pos.pro.cancel') }}" data-confirm="Turn off auto-renew?" data-confirm-title="Turn off auto-renew?" data-confirm-label="Confirm" data-confirm-variant="primary">@csrf<button class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel auto-renew</button></form>
                     @elseif ($subscription->status === 'canceled')
                         <form method="post" action="{{ route($isEnterprise ? 'pos.pro.subscribe-enterprise' : 'pos.pro.subscribe') }}">@csrf<button class="btn-primary">Resume subscription</button></form>
                     @endif

resources/views/pos/products/edit.blade.php

@@ -8,7 +8,7 @@
             @method('PUT')
             @include('pos.products._form')
             <div class="flex justify-between gap-3 pt-2">
-                <form method="POST" action="{{ route('pos.products.destroy', $product) }}" onsubmit="return confirm('Delete this product?')">
+                <form method="POST" action="{{ route('pos.products.destroy', $product) }}" data-confirm="Delete this product?" data-confirm-title="Delete this product?" data-confirm-label="Delete">
                     @csrf
                     @method('DELETE')
                     <button type="submit" class="text-sm font-medium text-red-600 hover:text-red-700">Delete</button>

resources/views/pos/products/retail/index.blade.php

@@ -59,7 +59,7 @@
                                 <td class="px-4 py-3 text-right">
                                     <div class="flex items-center justify-end gap-3">
                                         <a href="{{ route('pos.products.edit', $p['id']) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Edit</a>
-                                        <form method="post" action="{{ route('pos.products.destroy', $p['id']) }}" onsubmit="return confirm('Delete this product?');">
+                                        <form method="post" action="{{ route('pos.products.destroy', $p['id']) }}" data-confirm="Delete this product?" data-confirm-title="Delete this product?" data-confirm-label="Delete">
                                             @csrf @method('DELETE')
                                             <button class="text-sm font-medium text-red-500 hover:text-red-700">Delete</button>
                                         </form>

resources/views/pos/settings.blade.php

@@ -233,8 +233,7 @@
                                 </span>
                                 <div class="flex items-center gap-3">
                                     <a href="{{ route('pos.tables.qr', $table) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">QR</a>
-                                    <form method="POST" action="{{ route('pos.settings.tables.destroy', $table) }}"
-                                          onsubmit="return confirm('Remove this table?');">
+                                    <form method="POST" action="{{ route('pos.settings.tables.destroy', $table) }}" data-confirm="Remove this table?" data-confirm-title="Remove this table?" data-confirm-label="Remove">
                                         @csrf
                                         @method('DELETE')
                                         <button class="text-sm font-medium text-red-500 hover:text-red-700">Remove</button>

resources/views/pos/settings/_team-section.blade.php

@@ -65,7 +65,7 @@
                                     <td class="py-3 pr-4">{{ $member->location?->name ?? 'All branches' }}</td>
                                     <td class="py-3 text-right">
                                         @if ($member->user_ref !== auth()->user()->public_id && $member->user_ref !== strtolower((string) auth()->user()->email))
-                                            <form method="POST" action="{{ route('pos.team.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?');">
+                                            <form method="POST" action="{{ route('pos.team.destroy', $member) }}" class="inline" data-confirm="Remove this member?" data-confirm-title="Remove this member?" data-confirm-label="Remove">
                                                 @csrf
                                                 @method('DELETE')
                                                 <button type="submit" class="text-red-600 hover:text-red-800">Remove</button>

resources/views/pos/team/index.blade.php

@@ -70,7 +70,7 @@
                                     <td class="py-3 pr-4">{{ $member->location?->name ?? 'All branches' }}</td>
                                     <td class="py-3 text-right">
                                         @if ($member->user_ref !== auth()->user()->public_id && $member->user_ref !== strtolower((string) auth()->user()->email))
-                                            <form method="POST" action="{{ route('pos.team.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?');">
+                                            <form method="POST" action="{{ route('pos.team.destroy', $member) }}" class="inline" data-confirm="Remove this member?" data-confirm-title="Remove this member?" data-confirm-label="Remove">
                                                 @csrf
                                                 @method('DELETE')
                                                 <button type="submit" class="text-red-600 hover:text-red-800">Remove</button>