Aşağıdaki şekilde sadece alpin.js kullanarak bir onay modali olusturdum. Çalışıyor fakat doğrumu cok emin olamadım.
Form içinde hidden input olarak gerekli id yi ilettim ve controller de $id = $request->id; ile aldım.
''' <div x-data="{ modelOpen: false }" class="flex">
<button @click="modelOpen =!modelOpen" class="flex justify-center text-gray-900 text-md bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
<span>Sil </span>
</button>
<div x-show="modelOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen px-4 text-center md:items-center sm:block sm:p-0">
<div x-cloak @click="modelOpen = true" x-show="modelOpen"
x-transition:enter="transition ease-out duration-300 transform"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-60" aria-hidden="true"
></div>
<div x-cloak x-show="modelOpen"
x-transition:enter="transition ease-out duration-300 transform"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="inline-block w-full max-w-md p-6 my-20 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl xl:max-w-xl"
>
<div class="flex items-center justify-between space-x-4">
<h1 class="text-xl font-bold text-gray-800 ">Kaydı silmek istediğine emin misin?</h1>
</div>
<p class="mt-2 text-md text-gray-800 ">
Devam ederseniz bu kaydı kalıcı olarak sileceksiniz. Devam etmek istediğinize emin misiniz?
</p>
<form method="post" action="{{route('linkler.sil')}}" class="p-6">
@csrf
@method('delete')
<x-text-input name="id" type="hidden" value="{{ $liste->id }}" />
<x-text-input name="site_id" type="hidden" value="{{ $liste->site_id }}" />
<div class="flex justify-end mt-6">
<button for="show"
@click="modelOpen = false" type="button" class="mr-2 px-3 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-500 hover:bg-gray-600 rounded-md shadow-md">
Vazgeç
</button>
<button for="show"
@click="modelOpen = false" type="submit" class="px-3 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-rose-500 hover:bg-rose-600 rounded-md shadow-md">
Kaydı Sil
</button>
</div>
</form>
</div>
</div>
</div>
</div> '''