<div x-data="{ open: false }">
    <x-daylight::buttons.primary x-on:click="open = true">
        {{ __('daylight::forms.resend_notification') }}
    </x-daylight::buttons.primary>

    <template x-teleport="body">
        <div
            x-show="open"
            class="relative z-30"
            style="display: none;"
        >
            <!-- Backdrop -->
            <div
                x-show="open"
                x-transition:enter="transition-opacity ease-linear duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition-opacity ease-linear duration-300"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                x-on:click="open = false"
                class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-40"
            ></div>

            <!-- Panel -->
            <div class="fixed inset-0 overflow-hidden z-50" x-on:click.self="open = false">
                <div class="absolute inset-0 overflow-hidden" x-on:click.self="open = false">
                    <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10" x-on:click.self="open = false">
                        <div
                            x-show="open"
                            x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
                            x-transition:enter-start="translate-x-full"
                            x-transition:enter-end="translate-x-0"
                            x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
                            x-transition:leave-start="translate-x-0"
                            x-transition:leave-end="translate-x-full"
                            class="pointer-events-auto w-screen max-w-2xl"
                        >
                            <div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
                                <!-- Header -->
                                <div class="bg-sky-600 px-4 py-6 sm:px-6">
                                    <div class="flex items-start justify-between space-x-3">
                                        <div class="space-y-1">
                                            <h2 class="text-base font-semibold leading-6 text-white">
                                                {{ __('daylight::forms.resend_notification') }}
                                            </h2>
                                        </div>

                                        <div class="flex h-7 items-center">
                                            <button x-on:click.prevent="open = false" type="button" class="relative text-gray-400 hover:text-gray-500">
                                                <span class="absolute -inset-2.5"></span>
                                                <span class="sr-only">{{ __('daylight::general.close_panel') }}</span>
                                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Content -->
                                <div class="flex-1">
                                    @if($sent)
                                        <div class="px-4 py-6 sm:px-6">
                                            <div class="rounded-md bg-green-50 p-4">
                                                <p class="text-sm text-green-700">{{ __('daylight::forms.notification_resent') }}</p>
                                            </div>
                                        </div>
                                    @else
                                        <div class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0">
                                            <div class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                                <div>
                                                    <label for="recipient" class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5 flex items-center">
                                                        {{ __('daylight::forms.recipient_email') }}
                                                    </label>
                                                </div>
                                                <div class="sm:col-span-2">
                                                    <input
                                                        type="text"
                                                        id="recipient"
                                                        wire:model="recipient"
                                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                    >
                                                    <p class="mt-1 text-xs text-gray-500">{{ __('daylight::forms.multiple_emails_hint') }}</p>
                                                    @error('recipient')
                                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <!-- Footer -->
                                @if(!$sent)
                                    <div class="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6">
                                        <div class="flex justify-end space-x-3">
                                            <button type="button" x-on:click.prevent="open = false"
                                                    class="bg-white text-sky-600 hover:opacity-75 border-sky-600 py-2.5 px-4 border rounded-md text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out">
                                                {{ __('daylight::general.cancel') }}
                                            </button>

                                            <button type="button" wire:click="resend" wire:loading.attr="disabled"
                                                    class="bg-sky-600 text-white hover:bg-sky-700 border-sky-600 text-sm py-2.5 px-4 border rounded-md leading-5 font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out">
                                                <span wire:loading.remove wire:target="resend">{{ __('daylight::forms.resend') }}</span>
                                                <span wire:loading wire:target="resend">{{ __('daylight::forms.sending') }}</span>
                                            </button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
