@use('App\Enums\Currency')

@php
$location ??= null;
$selectedCurrency = old('currency', $location?->currency->value ?? Currency::default()->value);
$selectedTimezone = old('timezone', $location?->timezone ?? '');
$timezones = \DateTimeZone::listIdentifiers();
@endphp

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

<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="__('Where')" :description="__('A name people will recognise, and where it is.')">
            <div>
                <x-input-label for="name" :value="__('Name')" />
                <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $location?->name)" autofocus autocomplete="off" placeholder="{{ __('e.g. Lahore Office, Dallas Dental Clinic') }}" />
                <x-input-error class="mt-2" :messages="$errors->get('name')" />
            </div>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <x-input-label for="country" :value="__('Country')" />
                    <x-text-input id="country" name="country" type="text" class="mt-1 block w-full" :value="old('country', $location?->country)" autocomplete="off" placeholder="{{ __('e.g. Pakistan, United States') }}" />
                    <x-input-error class="mt-2" :messages="$errors->get('country')" />
                </div>

                <div>
                    <x-input-label for="city" :value="__('City')" />
                    <x-text-input id="city" name="city" type="text" class="mt-1 block w-full" :value="old('city', $location?->city)" autocomplete="off" placeholder="{{ __('Optional') }}" />
                    <x-input-error class="mt-2" :messages="$errors->get('city')" />
                </div>
            </div>
        </x-form-panel>

        <x-form-panel step="2" :title="__('Currency and time')" :description="__('Salaries and payments for everyone at this location are recorded in this currency, and attendance is judged by this clock.')">
            <div>
                <x-input-label for="timezone" :value="__('Timezone')" />
                <x-select-input id="timezone" name="timezone" class="mt-1 block w-full">
                    <option value="" @selected($selectedTimezone === '')>{{ __('App default (:tz)', ['tz' => config('app.timezone')]) }}</option>
                    @foreach ($timezones as $timezone)
                        <option value="{{ $timezone }}" @selected($selectedTimezone === $timezone)>{{ str_replace('_', ' ', $timezone) }}</option>
                    @endforeach
                </x-select-input>
                <x-input-error class="mt-2" :messages="$errors->get('timezone')" />
                <p class="mt-2 text-xs text-gray-500">{{ __('Pakistan is Asia/Karachi; Texas is America/Chicago. Check-in times and "late" are worked out in it.') }}</p>
            </div>

            <fieldset>
                <legend class="sr-only">{{ __('Currency') }}</legend>

                <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                    @foreach (Currency::cases() as $currency)
                        <x-choice-card name="currency" :value="$currency->value" :checked="$selectedCurrency === $currency->value" :label="$currency->symbol().' '.$currency->value" :description="$currency->label()" />
                    @endforeach
                </div>

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

            @if ($location && $location->users_count > 0)
                <p class="rounded-xl bg-amber-50 p-4 text-sm text-amber-800 ring-1 ring-amber-200">
                    {{ trans_choice('Changing the currency changes how :count person’s salary is shown. Payments already recorded keep the currency they were made in.|Changing the currency changes how :count people’s salaries are shown. Payments already recorded keep the currency they were made in.', $location->users_count, ['count' => $location->users_count]) }}
                </p>
            @endif
        </x-form-panel>

        @if ($location)
            <x-form-panel step="3" :title="__('Status')" :description="__('A closed location cannot be chosen for new people, but keeps everyone already there.')">
                <label class="flex items-center gap-3">
                    <x-switch name="is_active" value="1" :checked="(bool) old('is_active', $location->is_active)" />
                    <span class="text-sm font-medium text-gray-900">{{ __('Open') }}</span>
                </label>
            </x-form-panel>
        @endif

        <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('settings.index')">{{ __('Cancel') }}</x-secondary-button>

            <x-primary-button>
                @unless ($location)
                    <x-icon-plus />
                @endunless

                {{ $submitLabel }}
            </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>
                {{ __('Place each employee at a location when adding or editing them. Their salary and payments then use that currency automatically.') }}
            </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>
                {{ __('Totals on the dashboard and payments page are shown per currency, so rupees and dollars are never added together.') }}
            </li>
        </ul>
    </aside>
</div>