@extends('layouts.app')

@section('title', __('email.title'))

@section('content')
    <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white mb-6">
        {{ __('email.title') }}
    </h1>

    {{-- Configuration Status / Instructions --}}
    <div
        class="mb-6 p-4 rounded-md bg-blue-50 dark:bg-blue-900/50 border border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200">
        <p class="text-sm">{{ __('email.configuration_description') }}</p>
    </div>

    {{-- Form Container --}}
    <div
        class="max-w-2xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700">

        {{-- Alpine.js data for tab and mailer selection --}}
        <div x-data="{
            selectedMailer: '{{ old('mail_mailer', $settings['mail_mailer'] ?? 'log') }}',
            activeTab: 'mailerConfig',
            templateLang: 'en'
        }">

            {{-- Tab Navigation --}}
            <div class="mb-6 border-b border-gray-200 dark:border-gray-600">
                <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                    <button type="button" @click="activeTab = 'mailerConfig'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'mailerConfig', 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'mailerConfig' }"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('email.tabs.mailer_config') }}
                    </button>
                    <button type="button" @click="activeTab = 'emailTemplates'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'emailTemplates', 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'emailTemplates' }"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('email.tabs.email_templates') }}
                    </button>
                    <button type="button" @click="activeTab = 'testEmail'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'testEmail', 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'testEmail' }"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('email.tabs.test_email') }}
                    </button>
                </nav>
            </div>

            {{-- Main Settings Form (for Mailer Config & Templates) --}}
            <form method="POST" action="{{ route('admin.email.update') }}" class="space-y-8"
                x-show="activeTab === 'mailerConfig' || activeTab === 'emailTemplates'">
                @csrf
                @method('PUT')

                {{-- Mailer Configuration Panel --}}
                <div x-show="activeTab === 'mailerConfig'" x-transition>
                    <fieldset>
                        <label for="mail_mailer" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ __('email.mailer.driver_label') }} <span class="text-red-500">*</span>
                        </label>
                        <select name="mail_mailer" id="mail_mailer" required x-model="selectedMailer"
                            class="block w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100">
                            <option value="log">{{ __('email.mailer.driver_options.log') }}</option>
                            <option value="smtp">{{ __('email.mailer.driver_options.smtp') }}</option>
                            <option value="mailgun">{{ __('email.mailer.driver_options.mailgun') }}</option>
                            <option value="ses">{{ __('email.mailer.driver_options.ses') }}</option>
                            <option value="postmark">{{ __('email.mailer.driver_options.postmark') }}</option>
                        </select>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('email.mailer.driver_help') }}</p>
                        @error('mail_mailer')
                            <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </fieldset>

                    <fieldset class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600 mt-6">
                        <legend class="text-base font-medium text-gray-900 dark:text-white">{{ __('email.sender.title') }}
                        </legend>
                        <div>
                            <label for="mail_from_address"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.sender.from_address_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="email" name="mail_from_address" id="mail_from_address"
                                value="{{ old('mail_from_address', $settings['mail_from_address'] ?? '') }}" required
                                placeholder="{{ __('email.sender.from_address_placeholder') }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mail_from_address') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mail_from_address')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="mail_from_name"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.sender.from_name_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="mail_from_name" id="mail_from_name"
                                value="{{ old('mail_from_name', $settings['mail_from_name'] ?? config('app.name')) }}"
                                required
                                placeholder="{{ __('email.sender.from_name_placeholder', ['app_name' => config('app.name')]) }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mail_from_name') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mail_from_name')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    {{-- SMTP Settings (Conditional) --}}
                    <fieldset x-show="selectedMailer === 'smtp'" x-transition x-cloak
                        class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600 mt-6">
                        <legend class="text-base font-medium text-gray-900 dark:text-white">{{ __('email.smtp.title') }}
                        </legend>
                        <div>
                            <label for="mail_host" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.smtp.host_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="mail_host" id="mail_host"
                                value="{{ old('mail_host', $settings['mail_host'] ?? '') }}"
                                x-bind:required="selectedMailer === 'smtp'"
                                placeholder="{{ __('email.smtp.host_placeholder') }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mail_host') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mail_host')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="mail_port" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.smtp.port_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="number" name="mail_port" id="mail_port"
                                value="{{ old('mail_port', $settings['mail_port'] ?? '') }}"
                                x-bind:required="selectedMailer === 'smtp'"
                                placeholder="{{ __('email.smtp.port_placeholder') }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mail_port') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mail_port')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="mail_username"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.smtp.username_label') }}
                            </label>
                            <input type="text" name="mail_username" id="mail_username"
                                value="{{ old('mail_username', $settings['mail_username'] ?? '') }}"
                                placeholder="{{ __('email.smtp.username_placeholder') }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mail_username') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mail_username')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="mail_password"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.smtp.password_label') }}
                            </label>
                            <input type="password" name="mail_password" id="mail_password" value=""
                                placeholder="{{ $settings['mail_password_set'] ?? false ? __('email.smtp.password_placeholder_set') : __('email.smtp.password_placeholder_empty') }}"
                                autocomplete="new-password"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mail_password') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mail_password')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="mail_encryption"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.smtp.encryption_label') }} <span class="text-red-500">*</span>
                            </label>
                            <select name="mail_encryption" id="mail_encryption"
                                x-bind:required="selectedMailer === 'smtp'"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100 @error('mail_encryption') border-red-500 ring-1 ring-red-500 @enderror">
                                <option value="null" @selected(old('mail_encryption', $settings['mail_encryption'] ?? '') == 'null')>
                                    {{ __('email.smtp.encryption_options.null') }}</option>
                                <option value="tls" @selected(old('mail_encryption', $settings['mail_encryption'] ?? 'tls') == 'tls')>
                                    {{ __('email.smtp.encryption_options.tls') }}</option>
                                <option value="ssl" @selected(old('mail_encryption', $settings['mail_encryption'] ?? '') == 'ssl')>
                                    {{ __('email.smtp.encryption_options.ssl') }}</option>
                                <option value="starttls" @selected(old('mail_encryption', $settings['mail_encryption'] ?? '') == 'starttls')>
                                    {{ __('email.smtp.encryption_options.starttls') }}</option>
                            </select>
                            @error('mail_encryption')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    {{-- Mailgun Settings (Conditional) --}}
                    <fieldset x-show="selectedMailer === 'mailgun'" x-transition x-cloak
                        class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600 mt-6">
                        <legend class="text-base font-medium text-gray-900 dark:text-white">
                            {{ __('email.mailgun.title') }}</legend>
                        <div>
                            <label for="mailgun_domain"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.mailgun.domain_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="mailgun_domain" id="mailgun_domain"
                                value="{{ old('mailgun_domain', $settings['mailgun_domain'] ?? '') }}"
                                x-bind:required="selectedMailer === 'mailgun'"
                                placeholder="{{ __('email.mailgun.domain_placeholder') }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mailgun_domain') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mailgun_domain')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="mailgun_secret"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.mailgun.secret_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="password" name="mailgun_secret" id="mailgun_secret" value=""
                                placeholder="{{ $settings['mailgun_secret_set'] ?? false ? __('email.mailgun.secret_placeholder_set') : '' }}"
                                autocomplete="new-password"
                                x-bind:required="selectedMailer === 'mailgun' && !
                                    {{ json_encode($settings['mailgun_secret_set'] ?? false) }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mailgun_secret') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mailgun_secret')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="mailgun_endpoint"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.mailgun.endpoint_label') }}
                            </label>
                            <input type="text" name="mailgun_endpoint" id="mailgun_endpoint"
                                value="{{ old('mailgun_endpoint', $settings['mailgun_endpoint'] ?? '') }}"
                                placeholder="{{ __('email.mailgun.endpoint_placeholder') }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('mailgun_endpoint') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('mailgun_endpoint')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    {{-- SES Settings (Conditional) --}}
                    <fieldset x-show="selectedMailer === 'ses'" x-transition x-cloak
                        class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600 mt-6">
                        <legend class="text-base font-medium text-gray-900 dark:text-white">{{ __('email.ses.title') }}
                        </legend>
                        <div>
                            <label for="ses_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.ses.key_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="ses_key" id="ses_key"
                                value="{{ old('ses_key', $settings['ses_key'] ?? '') }}"
                                x-bind:required="selectedMailer === 'ses'"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('ses_key') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('ses_key')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="ses_secret"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.ses.secret_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="password" name="ses_secret" id="ses_secret" value=""
                                placeholder="{{ $settings['ses_secret_set'] ?? false ? __('email.ses.secret_placeholder_set') : '' }}"
                                autocomplete="new-password"
                                x-bind:required="selectedMailer === 'ses' && !
                                    {{ json_encode($settings['ses_secret_set'] ?? false) }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('ses_secret') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('ses_secret')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="ses_region"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.ses.region_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="ses_region" id="ses_region"
                                value="{{ old('ses_region', $settings['ses_region'] ?? '') }}"
                                x-bind:required="selectedMailer === 'ses'"
                                placeholder="{{ __('email.ses.region_placeholder') }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('ses_region') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('ses_region')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    {{-- Postmark Settings (Conditional) --}}
                    <fieldset x-show="selectedMailer === 'postmark'" x-transition x-cloak
                        class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600 mt-6">
                        <legend class="text-base font-medium text-gray-900 dark:text-white">
                            {{ __('email.postmark.title') }}</legend>
                        <div>
                            <label for="postmark_token"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ __('email.postmark.token_label') }} <span class="text-red-500">*</span>
                            </label>
                            <input type="password" name="postmark_token" id="postmark_token" value=""
                                placeholder="{{ $settings['postmark_token_set'] ?? false ? __('email.postmark.token_placeholder_set') : '' }}"
                                autocomplete="new-password"
                                x-bind:required="selectedMailer === 'postmark' && !
                                    {{ json_encode($settings['postmark_token_set'] ?? false) }}"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('postmark_token') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('postmark_token')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>
                </div> {{-- End Mailer Configuration Panel --}}

                {{-- Email Templates Panel with Language Tabs --}}
                <div x-show="activeTab === 'emailTemplates'" x-transition x-cloak class="space-y-8">
                    <div>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                            {{ __('email.templates.description') }}
                        </p>
                        <div class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                            <div><strong>{{ __('email.templates.placeholders.common') }}:</strong>
                                <code>{{ __('email.templates.placeholders.common_vars') }}</code></div>
                            <div><strong>{{ __('email.templates.placeholders.donor') }}:</strong>
                                <code>{{ __('email.templates.placeholders.donor_vars') }}</code></div>
                            <div><strong>{{ __('email.templates.placeholders.admin') }}:</strong>
                                <code>{{ __('email.templates.placeholders.admin_vars') }}</code></div>
                        </div>
                    </div>

                    {{-- Language Tabs for Templates --}}
                    <div class="mb-6 border-b border-gray-200 dark:border-gray-600">
                        <nav class="-mb-px flex space-x-8" aria-label="Template Languages">
                            <button type="button" @click="templateLang = 'en'"
                                :class="{ 'border-blue-500 text-blue-600 dark:text-blue-400': templateLang === 'en', 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': templateLang !== 'en' }"
                                class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                                🇺🇳 English Templates
                            </button>
                            <button type="button" @click="templateLang = 'es'"
                                :class="{ 'border-blue-500 text-blue-600 dark:text-blue-400': templateLang === 'es', 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': templateLang !== 'es' }"
                                class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                                🇪🇸 Spanish Templates
                            </button>
                        </nav>
                    </div>

                    {{-- English Templates --}}
                    <div x-show="templateLang === 'en'" x-transition class="space-y-8">
                        {{-- Order Confirmation Email (to Donor) - English --}}
                        <fieldset class="space-y-4 p-4 border border-gray-200 dark:border-gray-600 rounded-md">
                            <legend class="text-md font-semibold text-gray-900 dark:text-white px-2">
                                🇺🇳 {{ __('email.templates.donor_confirmation.title') }}
                            </legend>

                            <div>
                                <label for="email_template_donor_confirmation_subject_en"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.donor_confirmation.subject_label') }}
                                </label>
                                <input type="text" name="email_template_donor_confirmation_subject_en"
                                    id="email_template_donor_confirmation_subject_en"
                                    value="{{ old('email_template_donor_confirmation_subject_en', $settings['email_template_donor_confirmation_subject_en'] ?? 'Your Order Confirmation - ' . config('app.name')) }}"
                                    required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('email_template_donor_confirmation_subject_en') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('email_template_donor_confirmation_subject_en')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="email_template_donor_confirmation_content_html_en"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.donor_confirmation.content_label') }}
                                </label>
                                <textarea name="email_template_donor_confirmation_content_html_en"
                                    id="email_template_donor_confirmation_content_html_en" rows="10" required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-xs @error('email_template_donor_confirmation_content_html_en') border-red-500 ring-1 ring-red-500 @enderror">{{ old('email_template_donor_confirmation_content_html_en', $settings['email_template_donor_confirmation_content_html_en']) }}</textarea>
                                @error('email_template_donor_confirmation_content_html_en')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </fieldset>

                        {{-- New Order Notification (to Admin) - English --}}
                        <fieldset class="space-y-4 p-4 border border-gray-200 dark:border-gray-600 rounded-md">
                            <legend class="text-md font-semibold text-gray-900 dark:text-white px-2">
                                🇺🇳 {{ __('email.templates.admin_notification.title') }}
                            </legend>

                            <div>
                                <label for="email_template_admin_notification_subject_en"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.admin_notification.subject_label') }}
                                </label>
                                <input type="text" name="email_template_admin_notification_subject_en"
                                    id="email_template_admin_notification_subject_en"
                                    value="{{ old('email_template_admin_notification_subject_en', $settings['email_template_admin_notification_subject_en'] ?? 'New Order Received - #' . config('app.name')) }}"
                                    required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('email_template_admin_notification_subject_en') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('email_template_admin_notification_subject_en')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="email_template_admin_notification_content_html_en"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.admin_notification.content_label') }}
                                </label>
                                <textarea name="email_template_admin_notification_content_html_en"
                                    id="email_template_admin_notification_content_html_en" rows="10" required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-xs @error('email_template_admin_notification_content_html_en') border-red-500 ring-1 ring-red-500 @enderror">{{ old('email_template_admin_notification_content_html_en', $settings['email_template_admin_notification_content_html_en']) }}</textarea>
                                @error('email_template_admin_notification_content_html_en')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </fieldset>
                    </div>

                    {{-- Spanish Templates --}}
                    <div x-show="templateLang === 'es'" x-transition class="space-y-8">
                        {{-- Order Confirmation Email (to Donor) - Spanish --}}
                        <fieldset class="space-y-4 p-4 border border-gray-200 dark:border-gray-600 rounded-md">
                            <legend class="text-md font-semibold text-gray-900 dark:text-white px-2">
                                🇪🇸 {{ __('email.templates.donor_confirmation.title') }}
                            </legend>

                            <div>
                                <label for="email_template_donor_confirmation_subject_es"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.donor_confirmation.subject_label') }}
                                </label>
                                <input type="text" name="email_template_donor_confirmation_subject_es"
                                    id="email_template_donor_confirmation_subject_es"
                                    value="{{ old('email_template_donor_confirmation_subject_es', $settings['email_template_donor_confirmation_subject_es'] ?? 'Confirmación de su Pedido - ' . config('app.name')) }}"
                                    required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('email_template_donor_confirmation_subject_es') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('email_template_donor_confirmation_subject_es')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="email_template_donor_confirmation_content_html_es"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.donor_confirmation.content_label') }}
                                </label>
                                <textarea name="email_template_donor_confirmation_content_html_es"
                                    id="email_template_donor_confirmation_content_html_es" rows="10" required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-xs @error('email_template_donor_confirmation_content_html_es') border-red-500 ring-1 ring-red-500 @enderror">{{ old('email_template_donor_confirmation_content_html_es', $settings['email_template_donor_confirmation_content_html_es']) }}</textarea>
                                @error('email_template_donor_confirmation_content_html_es')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </fieldset>

                        {{-- New Order Notification (to Admin) - Spanish --}}
                        <fieldset class="space-y-4 p-4 border border-gray-200 dark:border-gray-600 rounded-md">
                            <legend class="text-md font-semibold text-gray-900 dark:text-white px-2">
                                🇪🇸 {{ __('email.templates.admin_notification.title') }}
                            </legend>

                            <div>
                                <label for="email_template_admin_notification_subject_es"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.admin_notification.subject_label') }}
                                </label>
                                <input type="text" name="email_template_admin_notification_subject_es"
                                    id="email_template_admin_notification_subject_es"
                                    value="{{ old('email_template_admin_notification_subject_es', $settings['email_template_admin_notification_subject_es'] ?? 'Nuevo Pedido Recibido - #' . config('app.name')) }}"
                                    required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('email_template_admin_notification_subject_es') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('email_template_admin_notification_subject_es')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="email_template_admin_notification_content_html_es"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    {{ __('email.templates.admin_notification.content_label') }}
                                </label>
                                <textarea name="email_template_admin_notification_content_html_es"
                                    id="email_template_admin_notification_content_html_es" rows="10" required
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-xs @error('email_template_admin_notification_content_html_es') border-red-500 ring-1 ring-red-500 @enderror">{{ old('email_template_admin_notification_content_html_es', $settings['email_template_admin_notification_content_html_es']) }}</textarea>
                                @error('email_template_admin_notification_content_html_es')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </fieldset>
                    </div>
                </div>{{-- End Email Templates Panel --}}

                {{-- Submit Button for Mailer Config & Templates settings --}}
                <div x-show="activeTab === 'mailerConfig' || activeTab === 'emailTemplates'"
                    class="flex justify-end pt-8 border-t border-gray-200 dark:border-gray-600">
                    <button type="submit"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-indigo-500 transition duration-150 ease-in-out">
                        {{ __('email.buttons.save_settings') }}
                    </button>
                </div>
            </form> {{-- End Main Settings Form --}}

            {{-- Send Test Email Form (Separate Form, shown via Alpine tab) --}}
            <div x-show="activeTab === 'testEmail'" x-transition x-cloak
                class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-600">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">{{ __('email.test.title') }}</h3>
                <form method="POST" action="{{ route('admin.email.test') }}">
                    @csrf
                    <div>
                        <label for="test_email_recipient"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ __('email.test.recipient_label') }} <span class="text-red-500">*</span>
                        </label>
                        <input type="email" name="test_email_recipient" id="test_email_recipient"
                            value="{{ old('test_email_recipient', auth()->user()->email) }}" required
                            placeholder="{{ __('email.test.recipient_placeholder') }}"
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('test_email_recipient') border-red-500 ring-1 ring-red-500 @enderror">
                        @error('test_email_recipient')
                            <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="flex justify-end pt-4 mt-4">
                        <button type="submit"
                            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-indigo-500 transition duration-150 ease-in-out">
                            {{ __('email.test.send_button') }}
                        </button>
                    </div>
                </form>
            </div>

        </div>{{-- End Alpine x-data container --}}
    </div>{{-- End Form Container --}}

@endsection