@php
    $defaultEmailPlaceholder = 'mohammad.idr1998@gmail.com';
    $contactEmailValue = old('contact_email', $settings->contact_email);
    $canUpdateSettings = auth()->user()?->canAny(['update_settings', 'manage_settings']) ?? false;
    $defaultTranslations = \App\Models\SiteSetting::defaultAttributes();
    $translationValue = static function (string $field, string $locale) use ($settings, $defaultTranslations) {
        return old(
            "{$field}.{$locale}",
            data_get($settings->{$field} ?? [], $locale, data_get($defaultTranslations, "{$field}.{$locale}", ''))
        );
    };
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-2xl font-semibold text-[var(--theme-text)]">{{ __('messages.settings') }}</h2>
    </x-slot>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <form id="settings-form" method="POST" action="{{ route('admin.settings.update') }}" class="space-y-4">
            @csrf
            @method('PUT')

            <fieldset @disabled(! $canUpdateSettings) class="space-y-4">
            <section id="tab-general" class="settings-tab-panel theme-surface-panel p-4 sm:p-5 space-y-4">
                <h3 class="text-lg font-semibold">{{ __('messages.settings_tab_general') }}</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="default_locale" class="block text-sm font-medium mb-1">{{ __('messages.default_locale') }}</label>
                        <select id="default_locale" name="default_locale" class="w-full rounded-lg theme-ring-brand">
                            @foreach ($locales as $locale)
                                <option value="{{ $locale }}" @selected(old('default_locale', $settings->default_locale) === $locale)>
                                    {{ strtoupper($locale) }}
                                </option>
                            @endforeach
                        </select>
                        @error('default_locale')
                            <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="trash_retention_days" class="block text-sm font-medium mb-1">{{ __('messages.trash_retention_days') }}</label>
                        <input
                            id="trash_retention_days"
                            type="number"
                            min="1"
                            max="3650"
                            name="trash_retention_days"
                            value="{{ old('trash_retention_days', $settings->trash_retention_days) }}"
                            class="w-full rounded-lg theme-ring-brand"
                        >
                        <p class="mt-1 text-xs text-[var(--theme-muted)]">{{ __('messages.trash_retention_days_hint') }}</p>
                        @error('trash_retention_days')
                            <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="theme-alert-brand p-3 text-sm">
                    {{ __('messages.footer_developer') }} - WhatsApp 00963994806517
                </div>
            </section>

            <section id="tab-texts" class="settings-tab-panel hidden theme-surface-panel p-4 sm:p-5 space-y-6">
                <h3 class="text-lg font-semibold">{{ __('messages.settings_tab_texts') }}</h3>

                @foreach ($locales as $locale)
                    <div class="rounded-lg border border-[var(--theme-border)] p-4 space-y-4">
                        <h4 class="text-sm font-semibold uppercase tracking-wide text-[var(--theme-muted)]">{{ strtoupper($locale) }}</h4>

                        <div>
                            <label for="site_name_{{ $locale }}" class="block text-sm font-medium mb-1">{{ __('messages.site_name') }}</label>
                            <input id="site_name_{{ $locale }}" type="text" name="site_name_translations[{{ $locale }}]" value="{{ $translationValue('site_name_translations', $locale) }}" class="w-full rounded-lg theme-ring-brand">
                            @error("site_name_translations.$locale")
                                <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="site_subtitle_{{ $locale }}" class="block text-sm font-medium mb-1">{{ __('messages.site_subtitle') }}</label>
                            <input id="site_subtitle_{{ $locale }}" type="text" name="site_subtitle_translations[{{ $locale }}]" value="{{ $translationValue('site_subtitle_translations', $locale) }}" class="w-full rounded-lg theme-ring-brand">
                            @error("site_subtitle_translations.$locale")
                                <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="about_text_{{ $locale }}" class="block text-sm font-medium mb-1">{{ __('messages.about_text') }}</label>
                            <textarea id="about_text_{{ $locale }}" name="about_text_translations[{{ $locale }}]" rows="9" class="w-full rounded-lg theme-ring-brand">{{ $translationValue('about_text_translations', $locale) }}</textarea>
                            <p class="mt-1 text-xs text-[var(--theme-muted)]">{{ __('messages.structured_text_hint') }}</p>
                            @error("about_text_translations.$locale")
                                <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="join_us_text_{{ $locale }}" class="block text-sm font-medium mb-1">{{ __('messages.join_us_text') }}</label>
                            <textarea id="join_us_text_{{ $locale }}" name="join_us_text_translations[{{ $locale }}]" rows="9" class="w-full rounded-lg theme-ring-brand">{{ $translationValue('join_us_text_translations', $locale) }}</textarea>
                            <p class="mt-1 text-xs text-[var(--theme-muted)]">{{ __('messages.structured_text_hint') }}</p>
                            @error("join_us_text_translations.$locale")
                                <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="legal_notice_{{ $locale }}" class="block text-sm font-medium mb-1">{{ __('messages.legal_notice_text') }}</label>
                            <textarea id="legal_notice_{{ $locale }}" name="legal_notice_translations[{{ $locale }}]" rows="3" class="w-full rounded-lg theme-ring-brand">{{ $translationValue('legal_notice_translations', $locale) }}</textarea>
                            @error("legal_notice_translations.$locale")
                                <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                @endforeach
            </section>

            <section id="tab-contact" class="settings-tab-panel hidden theme-surface-panel p-4 sm:p-5 space-y-4">
                <h3 class="text-lg font-semibold">{{ __('messages.settings_tab_contact') }}</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="contact_email" class="block text-sm font-medium mb-1">{{ __('messages.contact_email') }}</label>
                        <input id="contact_email" type="email" name="contact_email" value="{{ $contactEmailValue }}" placeholder="{{ $defaultEmailPlaceholder }}" class="w-full rounded-lg theme-ring-brand">
                        @error('contact_email')
                            <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="contact_phone" class="block text-sm font-medium mb-1">{{ __('messages.contact_phone') }}</label>
                        <input id="contact_phone" type="text" name="contact_phone" value="{{ old('contact_phone', $settings->contact_phone) }}" class="w-full rounded-lg theme-ring-brand">
                        @error('contact_phone')
                            <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </section>

            <section id="tab-search" class="settings-tab-panel hidden theme-surface-panel p-4 sm:p-5 space-y-4">
                <h3 class="text-lg font-semibold">{{ __('messages.settings_tab_search') }}</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="public_per_page" class="block text-sm font-medium mb-1">{{ __('messages.public_per_page') }}</label>
                        <input id="public_per_page" type="number" min="6" max="50" name="public_per_page" value="{{ old('public_per_page', $settings->public_per_page) }}" class="w-full rounded-lg theme-ring-brand">
                        @error('public_per_page')
                            <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="admin_per_page" class="block text-sm font-medium mb-1">{{ __('messages.admin_per_page') }}</label>
                        <input id="admin_per_page" type="number" min="10" max="100" name="admin_per_page" value="{{ old('admin_per_page', $settings->admin_per_page) }}" class="w-full rounded-lg theme-ring-brand">
                        @error('admin_per_page')
                            <p class="mt-1 text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="space-y-3">
                    <label class="inline-flex items-center gap-2">
                        <input type="hidden" name="public_search_enabled" value="0">
                        <input type="checkbox" name="public_search_enabled" value="1" class="rounded border-[var(--theme-border)]" @checked(old('public_search_enabled', (int) $settings->public_search_enabled))>
                        <span>{{ __('messages.public_search_enabled') }}</span>
                    </label>
                    @error('public_search_enabled')
                        <p class="text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                    @enderror

                    <label class="inline-flex items-center gap-2">
                        <input type="hidden" name="display_owner_phone_public" value="0">
                        <input type="checkbox" name="display_owner_phone_public" value="1" class="rounded border-[var(--theme-border)]" @checked(old('display_owner_phone_public', (int) $settings->display_owner_phone_public))>
                        <span>{{ __('messages.display_owner_phone_public') }}</span>
                    </label>
                    @error('display_owner_phone_public')
                        <p class="text-xs text-[var(--theme-primary)]">{{ $message }}</p>
                    @enderror
                </div>
            </section>
            </fieldset>

            <div class="flex justify-end">
                @if ($canUpdateSettings)
                    <button id="save-settings-button" type="submit" class="px-5 py-2.5 rounded-lg theme-btn-primary text-sm font-medium disabled:opacity-60 disabled:cursor-not-allowed">
                        {{ __('messages.save_settings') }}
                    </button>
                @endif
            </div>
        </form>
    </div>

    <script>
        (() => {
            const panels = document.querySelectorAll('.settings-tab-panel');
            const form = document.getElementById('settings-form');
            const submitButton = document.getElementById('save-settings-button');
            const loadingText = @json(__('messages.saving'));
            const requestedTab = @json(request('tab'));
            const tabMap = {
                general: 'tab-general',
                texts: 'tab-texts',
                contact: 'tab-contact',
                search: 'tab-search',
            };

            const activateTab = (tabId) => {
                panels.forEach((panel) => {
                    panel.classList.toggle('hidden', panel.id !== tabId);
                });
            };

            const initialTab = tabMap[requestedTab] ?? 'tab-general';
            activateTab(initialTab);

            form?.addEventListener('submit', () => {
                if (!submitButton) {
                    return;
                }
                submitButton.disabled = true;
                submitButton.textContent = loadingText;
            });
        })();
    </script>
</x-app-layout>