@extends('layouts.app')

@section('title', 'Marketing Email Settings')

@section('content')
    <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white mb-6">
        Marketing Email Settings
    </h1>

    {{-- 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">Configure your Marketing Email Service Provider (ESP) credentials. Select the active provider your
            application should use for sending marketing emails or syncing lists. API Keys/Secrets are stored encrypted.</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">

        <form method="POST" action="{{ route('admin.marketing_email.update') }}" x-data="{ selectedProvider: '{{ old('active_marketing_provider', $settings['active_marketing_provider'] ?? 'none') }}' }" class="space-y-8">
            @csrf
            @method('PUT')

            {{-- Active Provider Selection --}}
            <fieldset>
                <legend class="text-base font-medium text-gray-900 dark:text-white mb-2">Active Marketing Provider</legend>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Choose which service to use for marketing emails.
                </p>
                <div class="flex flex-col sm:flex-row sm:items-center sm:space-x-6 space-y-3 sm:space-y-0">
                    {{-- None Radio --}}
                    <div class="flex items-center">
                        <input id="active_none" name="active_marketing_provider" type="radio" value="none"
                            x-model="selectedProvider" @checked(old('active_marketing_provider', $settings['active_marketing_provider']) === 'none')
                            class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <label for="active_none" class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                            None (Disabled)
                        </label>
                    </div>
                    {{-- Mailchimp Radio --}}
                    <div class="flex items-center">
                        <input id="active_mailchimp" name="active_marketing_provider" type="radio" value="mailchimp"
                            x-model="selectedProvider" @checked(old('active_marketing_provider', $settings['active_marketing_provider']) === 'mailchimp') @disabled(!$settings['mailchimp_configured'])
                            class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
                        <label for="active_mailchimp"
                            class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {{ !$settings['mailchimp_configured'] ? 'opacity-50 cursor-not-allowed' : '' }}">
                            Mailchimp
                            @if (!$settings['mailchimp_configured'])
                                <span class="ml-1 text-xs text-yellow-600 dark:text-yellow-400">(Requires Setup)</span>
                            @else
                                <span class="ml-1 text-xs text-green-600 dark:text-green-400">(Configured)</span>
                            @endif
                        </label>
                    </div>
                    {{-- Constant Contact Radio --}}
                    <div class="flex items-center">
                        <input id="active_constant_contact" name="active_marketing_provider" type="radio"
                            value="constant_contact" x-model="selectedProvider" @checked(old('active_marketing_provider', $settings['active_marketing_provider']) === 'constant_contact')
                            @disabled(!$settings['constant_contact_configured'])
                            class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
                        <label for="active_constant_contact"
                            class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {{ !$settings['constant_contact_configured'] ? 'opacity-50 cursor-not-allowed' : '' }}">
                            Constant Contact
                            @if (!$settings['constant_contact_configured'])
                                <span class="ml-1 text-xs text-yellow-600 dark:text-yellow-400">(Requires Setup)</span>
                            @else
                                <span class="ml-1 text-xs text-green-600 dark:text-green-400">(Configured)</span>
                            @endif
                        </label>
                    </div>
                </div>
                @error('active_marketing_provider')
                    <p class="mt-2 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </fieldset>

            {{-- Mailchimp Settings (Conditional) --}}
            <fieldset x-show="selectedProvider === 'mailchimp'" x-transition x-cloak
                class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600">
                <legend class="text-lg font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
                    <span>Mailchimp Settings</span>
                    @if (!$settings['mailchimp_configured'])
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">Incomplete</span>
                    @elseif($settings['active_marketing_provider'] === 'mailchimp')
                        <span class="text-xs font-normal px-2 py-0.5 rounded-full bg-green-100 text-green-800">Active</span>
                    @else
                        <span class="text-xs font-normal px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">Inactive</span>
                    @endif
                </legend>
                <div>
                    <label for="mailchimp_api_key"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
                    <input type="password" name="mailchimp_api_key" id="mailchimp_api_key" value=""
                        placeholder="{{ $settings['mailchimp_api_key'] ? 'Set (Leave blank to keep)' : 'Your Mailchimp API Key' }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md ... @error('mailchimp_api_key') border-red-500 ... @enderror">
                    @error('mailchimp_api_key')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="mailchimp_server_prefix"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Server Prefix</label>
                    <input type="text" name="mailchimp_server_prefix" id="mailchimp_server_prefix"
                        value="{{ old('mailchimp_server_prefix', $settings['mailchimp_server_prefix'] ?? '') }}"
                        placeholder="e.g., us19 (from API key or URL)"
                        class="block w-full px-3 py-2 border ... @error('mailchimp_server_prefix') border-red-500 ... @enderror">
                    @error('mailchimp_server_prefix')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="mailchimp_list_id"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Audience/List ID</label>
                    <input type="text" name="mailchimp_list_id" id="mailchimp_list_id"
                        value="{{ old('mailchimp_list_id', $settings['mailchimp_list_id'] ?? '') }}"
                        placeholder="Your primary Mailchimp Audience ID"
                        class="block w-full px-3 py-2 border ... @error('mailchimp_list_id') border-red-500 ... @enderror">
                    @error('mailchimp_list_id')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </fieldset>

            {{-- Constant Contact Settings (Conditional) --}}
            <fieldset x-show="selectedProvider === 'constant_contact'" x-transition x-cloak
                class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600">
                <legend class="text-lg font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
                    <span>Constant Contact Settings</span>
                    @if (!$settings['constant_contact_configured'])
                        <span
                            class="text-xs font-normal px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">Incomplete</span>
                    @elseif($settings['active_marketing_provider'] === 'constant_contact')
                        <span class="text-xs font-normal px-2 py-0.5 rounded-full bg-green-100 text-green-800">Active</span>
                    @else
                        <span class="text-xs font-normal px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">Inactive</span>
                    @endif
                </legend>
                <div>
                    <label for="constant_contact_api_key"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key</label>
                    <input type="text" name="constant_contact_api_key" id="constant_contact_api_key"
                        value="{{ old('constant_contact_api_key', $settings['constant_contact_api_key'] ?? '') }}"
                        placeholder="Your Constant Contact API Key"
                        class="block w-full px-3 py-2 border ... @error('constant_contact_api_key') border-red-500 ... @enderror">
                    @error('constant_contact_api_key')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="constant_contact_secret"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">App Secret</label>
                    <input type="password" name="constant_contact_secret" id="constant_contact_secret" value=""
                        placeholder="{{ $settings['constant_contact_secret'] ? 'Set (Leave blank to keep)' : 'Your Constant Contact App Secret' }}"
                        class="block w-full px-3 py-2 border ... @error('constant_contact_secret') border-red-500 ... @enderror">
                    @error('constant_contact_secret')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                {{-- Add fields for Access Token / Refresh Token if using OAuth --}}
                <div>
                    <label for="constant_contact_access_token"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Access Token (If
                        applicable)</label>
                    <input type="password" name="constant_contact_access_token" id="constant_contact_access_token"
                        value=""
                        placeholder="{{ $settings['constant_contact_access_token'] ? 'Set (Leave blank to keep)' : 'OAuth Access Token' }}"
                        class="block w-full px-3 py-2 border ... @error('constant_contact_access_token') border-red-500 ... @enderror">
                    @error('constant_contact_access_token')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="constant_contact_list_id"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">List ID</label>
                    <input type="text" name="constant_contact_list_id" id="constant_contact_list_id"
                        value="{{ old('constant_contact_list_id', $settings['constant_contact_list_id'] ?? '') }}"
                        placeholder="Your primary Constant Contact List ID"
                        class="block w-full px-3 py-2 border ... @error('constant_contact_list_id') border-red-500 ... @enderror">
                    @error('constant_contact_list_id')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </fieldset>

            {{-- Submit Button --}}
            <div class="flex justify-end pt-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 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    Save Marketing Settings
                </button>
            </div>
        </form>
    </div> {{-- End Form Container --}}

@endsection