90 lines
3.9 KiB
PHP
90 lines
3.9 KiB
PHP
@props([
|
|
'heading' => 'تایید عملیات',
|
|
'description' => 'آیا از انجام این عملیات مطمئنید؟',
|
|
'confirmLabel' => 'بله، انجام شود',
|
|
'cancelLabel' => 'انصراف',
|
|
'event' => 'confirm-modal',
|
|
'color' => 'danger', {{-- danger | primary | warning --}}
|
|
])
|
|
|
|
@php
|
|
$colors = [
|
|
'danger' => ['bg' => 'bg-danger-50 dark:bg-danger-900/30', 'icon' => 'text-danger-500', 'btn' => 'bg-danger-600 hover:bg-danger-700'],
|
|
'primary' => ['bg' => 'bg-primary-50 dark:bg-primary-900/30', 'icon' => 'text-primary-500', 'btn' => 'bg-primary-600 hover:bg-primary-700'],
|
|
'warning' => ['bg' => 'bg-warning-50 dark:bg-warning-900/30', 'icon' => 'text-warning-500', 'btn' => 'bg-warning-600 hover:bg-warning-700'],
|
|
];
|
|
$c = $colors[$color] ?? $colors['danger'];
|
|
@endphp
|
|
|
|
<div
|
|
x-data="{
|
|
show: false,
|
|
payload: null,
|
|
open(e) { this.payload = e.detail ?? null; this.show = true; },
|
|
cancel() { this.show = false; this.payload = null; },
|
|
confirm() {
|
|
this.$dispatch('{{ $event }}-confirmed', this.payload);
|
|
this.show = false;
|
|
this.payload = null;
|
|
}
|
|
}"
|
|
x-on:{{ $event }}-open.window="open($event)"
|
|
x-on:{{ $event }}-open.document="open($event)"
|
|
>
|
|
<template x-teleport="body">
|
|
<div
|
|
x-show="show"
|
|
x-transition.opacity
|
|
class="fixed inset-0 z-999 flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
|
style="display:none"
|
|
>
|
|
<div
|
|
@click.outside="cancel()"
|
|
class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden"
|
|
>
|
|
{{-- Header --}}
|
|
<div class="px-6 pt-6 pb-4">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-full {{ $c['bg'] }}">
|
|
@if($color === 'danger')
|
|
<x-heroicon-o-trash class="w-5 h-5 {{ $c['icon'] }}" />
|
|
@elseif($color === 'warning')
|
|
<x-heroicon-o-exclamation-triangle class="w-5 h-5 {{ $c['icon'] }}" />
|
|
@else
|
|
<x-heroicon-o-check-circle class="w-5 h-5 {{ $c['icon'] }}" />
|
|
@endif
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{{ $heading }}
|
|
</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ $description }}
|
|
</p>
|
|
|
|
{{-- Optional slot for extra content --}}
|
|
@if(isset($extra))
|
|
<div class="mt-3">{{ $extra }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Footer --}}
|
|
<div class="flex items-center justify-end gap-3 px-6 py-4 bg-gray-50 dark:bg-gray-900/50">
|
|
<button
|
|
@click="cancel()"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition"
|
|
>
|
|
{{ $cancelLabel }}
|
|
</button>
|
|
<button
|
|
@click="confirm()"
|
|
class="px-4 py-2 text-sm font-medium text-white {{ $c['btn'] }} rounded-lg transition"
|
|
>
|
|
{{ $confirmLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|