{{-- resources/views/components/confirm-modal.blade.php --}}

@props([
    'trigger',
    'title',
    'confirmText',
    'actionRoute',
    'theme' => 'danger', // 'danger', 'warning', 'success', 'info'
])

@php
    $themeClasses = [
        'danger' => [
            'icon_bg' => 'bg-red-100 dark:bg-red-900',
            'icon_text' => 'text-red-600 dark:text-red-300',
            'button_bg' => 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
        ],
        'warning' => [
            'icon_bg' => 'bg-yellow-100 dark:bg-yellow-900',
            'icon_text' => 'text-yellow-600 dark:text-yellow-400',
            'button_bg' => 'bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500',
        ],
        'success' => [
            'icon_bg' => 'bg-green-100 dark:bg-green-900',
            'icon_text' => 'text-green-600 dark:text-green-400',
            'button_bg' => 'bg-green-600 hover:bg-green-700 focus:ring-green-500',
        ],
        'info' => [
            'icon_bg' => 'bg-blue-100 dark:bg-blue-900',
            'icon_text' => 'text-blue-600 dark:text-blue-400',
            'button_bg' => 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
        ],
    ];
    $classes = $themeClasses[$theme];
@endphp

<div x-show="{{ $trigger }}" x-cloak class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title"
    role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">

        <div x-show="{{ $trigger }}" @click="{{ $trigger }} = false" x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
            aria-hidden="true"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div x-show="{{ $trigger }}" x-transition:enter="ease-out duration-300"
            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="ease-in duration-200"
            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 align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form action="{{ $actionRoute }}" method="POST">
                @csrf
                <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div
                            class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full {{ $classes['icon_bg'] }} sm:mx-0 sm:h-10 sm:w-10">
                            <svg class="h-6 w-6 {{ $classes['icon_text'] }}" xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                            </svg>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
                                {{ $title }}</h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ $slot }}
                                </p>
                            </div>
                        </div>
                    </div>

                    @if (isset($extraFields))
                        <div class="mt-4 sm:ml-14">
                            {{ $extraFields }}
                        </div>
                    @endif

                </div>
                <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 sm:ml-3 sm:w-auto sm:text-sm {{ $classes['button_bg'] }}">
                        {{ $confirmText }}
                    </button>
                    <button @click="{{ $trigger }} = false" type="button"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">
                        {{ trans('main.Cancel') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>