@props([
    /** @var \App\Livewire\Projects\ProjectManager */
    'projectManager'
])

<x-modal max-width="4xl" wire:model.live="showMailSettingsModal" {{ $attributes }}>
    <x-form-modal submit="saveMailSettings">
        <x-slot name="title">
            {{ __('Project') }} : {{ $projectManager->formData['name'] ?? '' }}
        </x-slot>

        <x-slot name="description">
            {{ __('Email settings for project.') }}
        </x-slot>

        <x-slot name="form">
            <div class="col-span-6 sm:col-span-4">
                <x-label for="email_subject" value="{{ __('Subject') }}"/>
                <x-input id="email_subject" type="text" class="mt-1 block w-full" wire:model="formData.mail_subject" autofocus/>
                <x-input-error for="mail_subject" class="mt-2"/>
            </div>
            <div class="col-span-6 sm:col-span-4">
                <x-label for="email_template" value="{{ __('Template') }}"/>
                <textarea id="email_template" type="text" class="mt-1 block w-full h-[200px] 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" wire:model="formData.mail_template" autofocus></textarea>
                <x-input-error for="mail_template" class="mt-2"/>
            </div>
            <div class="col-span-6 sm:col-span-4">
                <x-label for="email_frequency" value="{{ __('Frequency') }}"/>
                <select id="email_frequency" class="mt-1 block w-full" wire:model="formData.mail_frequency">
                    @foreach(App\Helper::getMailFrequencies() as $frequency)
                        <option value="{{ $frequency }}">{{ $frequency }}</option>
                    @endforeach
                </select>
                <x-input-error for="mail_frequency" class="mt-2"/>
            </div>
            <div class="col-span-6 sm:col-span-4">
                <x-label for="mail_day" value="{{ __('Day') }}"/>
                <select id="mail_day" wire:model="formData.mail_day" class="mt-1 block w-full">
                    @foreach(App\Helper::getDays() as $day)
                        <option value="{{ $day }}">{{ $day }}</option>
                    @endforeach
                </select>
                <x-input-error for="mail_day" class="mt-2"/>
            </div>
            <div class="col-span-6 sm:col-span-4">
                {{ __('Recipients') }}
            </div>
            @foreach($projectManager->formData['mail_recipients'] as $key => $email_recipient)
                <div class="col-span-6 sm:colspan-4 grid grid-cols-6 gap-1">
                    <div class="col-span-2">
                        <x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
                        <x-input id="mail_recipient_{{ $key }}_name" type="text" class="mt-1 block w-full"
                                 wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
                        <x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
                    </div>

                    <div class="col-span-3">
                        <x-label for="bounding_box_{{ $key }}_top_left_latitude"
                                 value="{{ __('Email') }}"/>
                        <x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
                                 class="mt-1 block w-full"
                                 wire:model="formData.mail_recipients.{{ $key }}.email"
                                 autofocus/>
                        <x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
                    </div>
                    <div class="col-span-1 flex">
                        @if( count($projectManager->formData['mail_recipients']) > 1)
                            <button
                                class="cursor-pointer ml-6 text-sm text-red-500 py-3 self-end"
                                type="button"
                                wire:click="deleteEmailRecipient({{ $key }})"
                                wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
                            >
                                Delete
                            </button>
                        @endif
                    </div>
                </div>
            @endforeach
        </x-slot>

        <x-slot name="actions">
            <x-action-message class="mr-3" on="saved">
                {{ __('Saved.') }}
            </x-action-message>
            <x-secondary-button class="mr-3"
                                type="button"
                                wire:click="addEmailRecipient"
            >
                {{ __('Add recipient') }}
            </x-secondary-button>
            <x-secondary-button class="mr-3"
                                type="button"
                                x-on:click="$wire.showMailSettingsModal = false"
            >
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button>
                {{ __('Save') }}
            </x-button>

        </x-slot>
    </x-form-modal>
</x-modal>