@use('App\Enums\AnnouncementAudience')
@use('App\Enums\AnnouncementType')

@php
$type = old('type', AnnouncementType::Holiday->value);
$audience = old('audience', AnnouncementAudience::Everyone->value);
$selectedUserIds = array_map('intval', (array) old('user_ids', []));
$locationCounts = $locations->mapWithKeys(fn ($location): array => [$location->id => $location->active_users_count]);
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('New announcement') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-4 px-4 sm:px-6 lg:px-8">
            <div>
                <a href="{{ route('announcements.index') }}" class="inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                    </svg>
                    {{ __('Back to announcements') }}
                </a>
            </div>

            <x-toast :message="$errors->any() ? __('Please fix the fields marked in red.') : session('error')" icon="error" />

            <form method="POST" action="{{ route('announcements.store') }}" novalidate x-data="{ type: @js($type), audience: @js($audience), locationId: @js(old('location_id', '')), counts: @js($locationCounts), everyone: @js($everyoneCount) }">
                @csrf

                <div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
                    <div class="flex flex-col gap-6 xl:col-span-2">
                        <x-form-panel step="1" :title="__('What is it about')" :description="__('The type sets the subject line and whether a day is attached.')">
                            <fieldset>
                                <legend class="sr-only">{{ __('Type') }}</legend>

                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                                    @foreach ($types as $option)
                                        <x-choice-card name="type" :value="$option->value" :checked="$type === $option->value" :label="$option->label()" :description="$option->description()" x-model="type" />
                                    @endforeach
                                </div>

                                <x-input-error class="mt-2" :messages="$errors->get('type')" />
                            </fieldset>

                            <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                                <div class="sm:col-span-2">
                                    <x-input-label for="title" :value="__('Title')" />
                                    <x-text-input id="title" name="title" type="text" class="mt-1 block w-full" :value="old('title')" maxlength="150" placeholder="{{ __('e.g. Eid ul Fitr holidays, Annual dinner') }}" />
                                    <x-input-error class="mt-2" :messages="$errors->get('title')" />
                                </div>

                                <div x-show="type !== 'general'" x-cloak>
                                    <x-input-label for="event_date" :value="__('Day')" />
                                    <x-text-input id="event_date" name="event_date" type="date" class="mt-1 block w-full" :value="old('event_date')" />
                                    <x-input-error class="mt-2" :messages="$errors->get('event_date')" />
                                </div>
                            </div>

                            <div>
                                <x-input-label for="body" :value="__('Message')" />
                                <x-textarea-input id="body" name="body" class="mt-1 block w-full" rows="6" maxlength="5000" placeholder="{{ __('Write the message as it should read in the email. Blank lines start a new paragraph.') }}">{{ old('body') }}</x-textarea-input>
                                <x-input-error class="mt-2" :messages="$errors->get('body')" />
                            </div>

                            <label x-show="type === 'holiday'" x-cloak class="flex cursor-pointer items-start gap-3 rounded-xl border border-gray-200 bg-gray-50 p-4">
                                <input type="checkbox" name="marks_holiday" value="1" @checked(old('marks_holiday')) class="mt-0.5 rounded border-gray-300 text-brand-600 shadow-sm focus:ring-brand-500">
                                <span class="min-w-0">
                                    <span class="block text-sm font-semibold text-gray-900">{{ __('Also record the day as a holiday in attendance') }}</span>
                                    <span class="mt-0.5 block text-sm text-gray-600">{{ __('Everyone this goes to gets a holiday on that day, so it does not count as an absence. Days that already have a record are left alone.') }}</span>
                                </span>
                            </label>
                        </x-form-panel>

                        <x-form-panel step="2" :title="__('Who gets it')" :description="__('The email goes to every active employee in the audience.')">
                            <fieldset>
                                <legend class="sr-only">{{ __('Audience') }}</legend>

                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                                    @foreach ($audiences as $option)
                                        <x-choice-card name="audience" :value="$option->value" :checked="$audience === $option->value" :label="$option->label()" :description="$option->description()" x-model="audience" />
                                    @endforeach
                                </div>

                                <x-input-error class="mt-2" :messages="$errors->get('audience')" />
                            </fieldset>

                            <div x-show="audience === 'location'" x-cloak>
                                <x-input-label for="location_id" :value="__('Location')" />
                                <x-select-input id="location_id" name="location_id" class="mt-1 block w-full" x-model="locationId">
                                    <option value="">{{ __('Choose a location') }}</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location->id }}" @selected((int) old('location_id') === $location->id)>{{ $location->name }} · {{ $location->place() }} ({{ trans_choice(':count person|:count people', $location->active_users_count, ['count' => $location->active_users_count]) }})</option>
                                    @endforeach
                                </x-select-input>
                                <x-input-error class="mt-2" :messages="$errors->get('location_id')" />
                            </div>

                            <div x-show="audience === 'selected'" x-cloak>
                                <x-input-label for="user_ids" :value="__('People')" />
                                <x-select-input id="user_ids" name="user_ids[]" class="mt-1 block w-full" multiple>
                                    <option value="">{{ __('Pick people') }}</option>
                                    @foreach ($employees as $employee)
                                        <option value="{{ $employee->id }}" @selected(in_array($employee->id, $selectedUserIds, true))>{{ $employee->name }}{{ $employee->location ? ' · '.$employee->location->name : '' }} ({{ $employee->email }})</option>
                                    @endforeach
                                </x-select-input>
                                <x-input-error class="mt-2" :messages="$errors->get('user_ids')" />
                            </div>

                            <p class="text-sm text-gray-600">
                                <template x-if="audience === 'everyone'"><span>{{ __('Goes to') }} <strong class="text-gray-900" x-text="everyone"></strong> {{ __('active employees.') }}</span></template>
                                <template x-if="audience === 'location' && locationId"><span>{{ __('Goes to') }} <strong class="text-gray-900" x-text="counts[locationId] ?? 0"></strong> {{ __('active employees at that location.') }}</span></template>
                                <template x-if="audience === 'location' && ! locationId"><span>{{ __('Choose a location to see how many people it reaches.') }}</span></template>
                                <template x-if="audience === 'selected'"><span>{{ __('Only the people you pick get it.') }}</span></template>
                            </p>
                        </x-form-panel>

                        <div class="flex items-center justify-end gap-3 rounded-2xl bg-white px-6 py-4 shadow-raised sm:px-8">
                            <x-secondary-button :href="route('announcements.index')">{{ __('Cancel') }}</x-secondary-button>

                            <x-primary-button>
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
                                {{ __('Send announcement') }}
                            </x-primary-button>
                        </div>
                    </div>

                    <aside class="flex flex-col gap-3 self-start rounded-2xl bg-white p-6 text-sm shadow-raised xl:sticky xl:top-8">
                        <h3 class="text-base font-semibold text-gray-900">{{ __('Good to know') }}</h3>

                        <ul class="flex flex-col gap-3 text-gray-700">
                            <li class="flex items-start gap-2">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                                {{ __('Each person gets an email at the address on their profile, and a notification in the app.') }}
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                                {{ __('Emails go out in the background, one after another. The announcement page shows who has been emailed so far.') }}
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                                {{ __('Deactivated accounts never get announcements.') }}
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                                {{ __('An announcement cannot be unsent, so read it once more before pressing Send.') }}
                            </li>
                        </ul>
                    </aside>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>