@extends('layouts.app')

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

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

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

        <div x-data="{
            activeTab: 'general',
            enableSurcharge: {{ json_encode(old('enable_surcharge_convenience_fee', $settings['enable_surcharge_convenience_fee'] ?? false)) }},
            init() {
                // Set tab priority: 1. Server error, 2. Server (after save), 3. URL param, 4. Browser memory, 5. Default
                let initialTab = '{{ old('active_tab') }}' || '{{ session('active_tab') }}' || '{{ request('tab') }}' || localStorage.getItem('settings_active_tab') || 'general';
                this.activeTab = initialTab;
        
                this.$watch('activeTab', value => {
                    localStorage.setItem('settings_active_tab', value);
                });
            }
        }">

            <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
                <nav class="-mb-px flex space-x-4 sm:space-x-8 overflow-x-auto" aria-label="Tabs">
                    {{-- General Tab --}}
                    <button type="button" @click="activeTab = 'general'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'general', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'general' }"
                        class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('settings.tab_general') }}
                    </button>
                    {{-- Organization Tab --}}
                    <button type="button" @click="activeTab = 'organization'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'organization', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'organization' }"
                        class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('settings.tab_organization') }}
                    </button>
                    {{-- Financial Tab --}}
                    <button type="button" @click="activeTab = 'financial'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'financial', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'financial' }"
                        class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('settings.tab_financial') }}
                    </button>
                    {{-- Landing Page Tab --}}
                    <button type="button" @click="activeTab = 'landingPage'"
                        :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'landingPage', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'landingPage' }"
                        class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                        {{ __('settings.tab_landing_page') }}
                    </button>
                    {{-- Packages Tab - Admin Only --}}
                    @if (auth()->user() && auth()->user()->hasAdminPrivileges())
                        <button type="button" @click="activeTab = 'packages'"
                            :class="{ 'border-indigo-500 text-indigo-600 dark:text-indigo-400': activeTab === 'packages', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': activeTab !== 'packages' }"
                            class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                            Packages
                        </button>
                    @endif
                </nav>
            </div>

            <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data"
                class="space-y-8">
                @csrf
                @method('PUT')

                <input type="hidden" name="active_tab" x-bind:value="activeTab">

                {{-- General Tab Panel --}}
                <div x-show="activeTab === 'general'" x-transition class="space-y-8">
                    <fieldset>
                        <legend
                            class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                            {{ __('settings.bulk_delete_options') }}
                        </legend>
                        <div class="space-y-4">
                            <div x-data="{ enabled: {{ json_encode(old('enable_campaign_bulk_delete', $settings['enable_campaign_bulk_delete'] ?? true)) }} }" class="flex items-center justify-between">
                                <span class="flex-grow flex flex-col mr-4">
                                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
                                        id="campaign-bulk-label">{{ __('settings.enable_campaign_bulk_delete') }}</span>
                                    <span
                                        class="text-xs text-gray-500 dark:text-gray-400">{{ __('settings.allow_campaign_delete_desc') }}</span>
                                </span>
                                <input type="hidden" name="enable_campaign_bulk_delete" :value="enabled ? 1 : 0">
                                <button type="button"
                                    class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
                                    :class="{ 'bg-indigo-600': enabled, 'bg-gray-200 dark:bg-gray-600': !enabled }"
                                    role="switch" :aria-checked="enabled.toString()" aria-labelledby="campaign-bulk-label"
                                    @click="enabled = !enabled">
                                    <span aria-hidden="true"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                        :class="{ 'translate-x-5': enabled, 'translate-x-0': !enabled }"></span>
                                </button>
                            </div>
                            @error('enable_campaign_bulk_delete')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror

                            <div x-data="{ enabled: {{ json_encode(old('enable_product_bulk_delete', $settings['enable_product_bulk_delete'] ?? true)) }} }" class="flex items-center justify-between">
                                <span class="flex-grow flex flex-col mr-4">
                                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
                                        id="product-bulk-label">{{ __('settings.enable_product_bulk_delete') }}</span>
                                    <span
                                        class="text-xs text-gray-500 dark:text-gray-400">{{ __('settings.allow_product_delete_desc') }}</span>
                                </span>
                                <input type="hidden" name="enable_product_bulk_delete" :value="enabled ? 1 : 0">
                                <button type="button"
                                    class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
                                    :class="{ 'bg-indigo-600': enabled, 'bg-gray-200 dark:bg-gray-600': !enabled }"
                                    role="switch" :aria-checked="enabled.toString()" aria-labelledby="product-bulk-label"
                                    @click="enabled = !enabled">
                                    <span aria-hidden="true"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                        :class="{ 'translate-x-5': enabled, 'translate-x-0': !enabled }"></span>
                                </button>
                            </div>
                            @error('enable_product_bulk_delete')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    <fieldset class="pt-6 border-t border-gray-200 dark:border-gray-600">
                        <legend
                            class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                            {{ __('settings.localization') }}
                        </legend>
                        <div class="space-y-6">
                            <div>
                                <label for="app_locale"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('settings.default_locale') }}<span
                                        class="text-red-500">*</span></label>
                                <select name="app_locale" id="app_locale" required
                                    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 appearance-none @error('app_locale') border-red-500 ring-1 ring-red-500 @enderror">
                                    @foreach ($availableLocales as $code => $name)
                                        <option value="{{ $code }}" @selected(old('app_locale', $settings['app_locale']) === $code)>
                                            {{ $name }}</option>
                                    @endforeach
                                </select>
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    {{ __('settings.default_locale_desc') }}</p>
                                @error('app_locale')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="app_timezone"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('settings.app_timezone') }}<span
                                        class="text-red-500">*</span></label>
                                <select name="app_timezone" id="app_timezone" required
                                    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 appearance-none @error('app_timezone') border-red-500 ring-1 ring-red-500 @enderror">
                                    @foreach ($timezones as $timezone)
                                        <option value="{{ $timezone }}" @selected(old('app_timezone', $settings['app_timezone']) === $timezone)>
                                            {{ $timezone }}</option>
                                    @endforeach
                                </select>
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    {{ __('settings.app_timezone_desc') }}</p>
                                @error('app_timezone')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </fieldset>
                </div>

                {{-- Organization Tab Panel --}}
                <div x-show="activeTab === 'organization'" x-transition class="space-y-8">
                    <fieldset>
                        <legend
                            class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                            {{ __('settings.organization_details') }}
                        </legend>
                        <div>
                            <label for="org_name"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('settings.org_name') }}<span
                                    class="text-red-500">*</span></label>
                            <input type="text" name="org_name" id="org_name"
                                value="{{ old('org_name', $settings['org_name'] ?? '') }}" required
                                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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('org_name') border-red-500 ring-1 ring-red-500 @enderror">
                            @error('org_name')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="mt-6">
                            <label for="org_email"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('settings.org_email') }}<span
                                    class="text-red-500">*</span></label>
                            <input type="email" name="org_email" id="org_email"
                                value="{{ old('org_email', $settings['org_email'] ?? '') }}" required
                                placeholder="e.g., contact@yourorg.com"
                                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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('org_email') border-red-500 ring-1 ring-red-500 @enderror">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('settings.org_email_desc') }}
                            </p>
                            @error('org_email')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="mt-6">
                            <label for="org_logo"
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('settings.org_logo') }}</label>
                            @if ($settings['org_logo_path'])
                                <div class="mb-2 flex items-center space-x-4">
                                    <img src="{{ asset('storage/' . $settings['org_logo_path']) }}"
                                        alt="Current Org Logo"
                                        class="h-12 w-auto rounded border p-1 bg-gray-100 dark:bg-gray-700">
                                    <label for="remove_org_logo"
                                        class="flex items-center text-xs text-red-600 dark:text-red-400 cursor-pointer">
                                        <input type="checkbox" id="remove_org_logo" name="remove_org_logo"
                                            value="1"
                                            class="h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded mr-1 focus:ring-red-500">
                                        {{ __('settings.remove_logo') }}
                                    </label>
                                </div>
                            @endif
                            <input type="file" name="org_logo" id="org_logo"
                                accept="image/jpeg,image/png,image/gif,image/svg+xml"
                                class="block w-full text-sm text-gray-500 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 dark:file:bg-gray-600 file:text-indigo-700 dark:file:text-indigo-200 hover:file:bg-indigo-100 dark:hover:file:bg-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('org_logo') border-red-500 ring-1 ring-red-500 @enderror">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('settings.org_logo_desc') }}
                            </p>
                            @error('org_logo')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>

                    {{-- Amazon API Settings --}}
                    <fieldset class="pt-6 border-t border-gray-200 dark:border-gray-600">
                        <legend
                            class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                            Amazon Business API Connection
                        </legend>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {{-- Client ID --}}
                            <div>
                                <label for="amazon_b_client_id"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Client
                                    ID</label>
                                <input type="text" name="amazon_b_client_id" id="amazon_b_client_id"
                                    value="{{ old('amazon_b_client_id', $settings['amazon_b_client_id'] ?? '') }}"
                                    required
                                    class="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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('amazon_b_client_id') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('amazon_b_client_id')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                            {{-- Client Secret --}}
                            <div>
                                <label for="amazon_b_client_secret"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Client
                                    Secret</label>
                                <input type="password" name="amazon_b_client_secret" id="amazon_b_client_secret"
                                    placeholder="Leave blank to keep existing"
                                    class="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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('amazon_b_client_secret') border-red-500 ring-1 ring-red-500 @enderror">
                                <p class="help-text dark:text-gray-400">Only enter a value if you want to change the
                                    current secret.</p>
                                @error('amazon_b_client_secret')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                            {{-- Endpoint --}}
                            <div>
                                <label for="amazon_b_endpoint"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Endpoint
                                    URL</label>
                                <input type="url" name="amazon_b_endpoint" id="amazon_b_endpoint"
                                    value="{{ old('amazon_b_endpoint', $settings['amazon_b_endpoint'] ?? '') }}" required
                                    placeholder="e.g., https://na.business-api.amazon.com"
                                    class="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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('amazon_b_endpoint') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('amazon_b_endpoint')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                            {{-- Product Region --}}
                            <div>
                                <label for="amazon_b_product_region"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Product
                                    Region</label>
                                <select name="amazon_b_product_region" id="amazon_b_product_region" required
                                    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 appearance-none @error('amazon_b_product_region') border-red-500 ring-1 ring-red-500 @enderror">
                                    <option value="US" @selected(old('amazon_b_product_region', $settings['amazon_b_product_region'] ?? '') == 'US')>US</option>
                                    <option value="CA" @selected(old('amazon_b_product_region', $settings['amazon_b_product_region'] ?? '') == 'CA')>CA</option>
                                </select>
                                @error('amazon_b_product_region')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                            {{-- Refresh Token --}}
                            <div class="md:col-span-2">
                                <label for="amazon_b_refresh_token"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Refresh
                                    Token</label>
                                <textarea name="amazon_b_refresh_token" id="amazon_b_refresh_token" rows="4"
                                    placeholder="Leave blank to keep existing"
                                    class="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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('amazon_b_refresh_token') border-red-500 ring-1 ring-red-500 @enderror"></textarea>
                                <p class="help-text dark:text-gray-400">Only enter a value if you want to change the
                                    current token.</p>
                                @error('amazon_b_refresh_token')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                            {{-- User Email --}}
                            <div>
                                <label for="amazon_b_user_email"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Registered User
                                    Email</label>
                                <input type="email" name="amazon_b_user_email" id="amazon_b_user_email"
                                    value="{{ old('amazon_b_user_email', $settings['amazon_b_user_email'] ?? '') }}"
                                    required
                                    class="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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('amazon_b_user_email') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('amazon_b_user_email')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                            {{-- Buying Group Identifier --}}
                            <div>
                                <label for="amazon_b_buying_group_identifier"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Buying Group
                                    Identifier</label>
                                <input type="text" name="amazon_b_buying_group_identifier"
                                    id="amazon_b_buying_group_identifier"
                                    value="{{ old('amazon_b_buying_group_identifier', $settings['amazon_b_buying_group_identifier'] ?? '') }}"
                                    required
                                    class="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 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('amazon_b_buying_group_identifier') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('amazon_b_buying_group_identifier')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                            {{-- Trial Mode --}}
                            <div class="md:col-span-2">
                                <div class="flex items-center">
                                    <input id="amazon_b_trial_mode" name="amazon_b_trial_mode" type="checkbox"
                                        value="1" @checked(old('amazon_b_trial_mode', $settings['amazon_b_trial_mode'] ?? false))
                                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <label for="amazon_b_trial_mode"
                                        class="ml-2 block text-sm text-gray-900 dark:text-gray-100">
                                        Enable Trial Mode
                                    </label>
                                </div>
                                <p class="help-text dark:text-gray-400">When enabled, API calls may use mock data or not
                                    have real-world
                                    effects.</p>
                            </div>
                        </div>
                    </fieldset>
                </div>

                {{-- Financial Tab Panel --}}
                <div x-show="activeTab === 'financial'" x-transition class="space-y-8">
                    <fieldset>
                        <legend
                            class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                            {{ __('settings.surcharge_settings') }}
                        </legend>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 mb-4">{{ __('settings.surcharge_desc') }}
                        </p>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <span class="flex-grow flex flex-col mr-4">
                                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
                                        id="surcharge-fee-label">{{ __('settings.enable_surcharge') }}</span>
                                    <span
                                        class="text-xs text-gray-500 dark:text-gray-400">{{ __('settings.enable_surcharge_desc') }}</span>
                                </span>
                                <input type="hidden" name="enable_surcharge_convenience_fee"
                                    :value="enableSurcharge ? 1 : 0">
                                <button type="button"
                                    class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
                                    :class="{
                                        'bg-indigo-600': enableSurcharge,
                                        'bg-gray-200 dark:bg-gray-600': !
                                            enableSurcharge
                                    }"
                                    role="switch" :aria-checked="enableSurcharge.toString()"
                                    aria-labelledby="surcharge-fee-label" @click="enableSurcharge = !enableSurcharge">
                                    <span aria-hidden="true"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                        :class="{ 'translate-x-5': enableSurcharge, 'translate-x-0': !enableSurcharge }"></span>
                                </button>
                            </div>
                            @error('enable_surcharge_convenience_fee')
                                <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                            <div x-show="enableSurcharge" x-transition class="mt-4 space-y-1">
                                <label for="surcharge_convenience_fee_label"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('settings.surcharge_label') }}</label>
                                <input type="text" name="surcharge_convenience_fee_label"
                                    id="surcharge_convenience_fee_label"
                                    value="{{ old('surcharge_convenience_fee_label', $settings['surcharge_convenience_fee_label'] ?? 'Convenience Fee') }}"
                                    class="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('surcharge_convenience_fee_label') border-red-500 ring-1 ring-red-500 @enderror">
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    {{ __('settings.surcharge_label_desc') }}</p>
                                @error('surcharge_convenience_fee_label')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                            <div x-show="enableSurcharge" x-transition class="mt-4 space-y-1">
                                <label for="surcharge_convenience_fee_percentage"
                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('settings.surcharge_percentage') }}</label>
                                <input type="number" name="surcharge_convenience_fee_percentage"
                                    id="surcharge_convenience_fee_percentage"
                                    value="{{ old('surcharge_convenience_fee_percentage', $settings['surcharge_convenience_fee_percentage'] ?? 0) }}"
                                    min="0" max="100" step="0.01" placeholder="e.g., 2.9"
                                    class="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('surcharge_convenience_fee_percentage') border-red-500 ring-1 ring-red-500 @enderror">
                                @error('surcharge_convenience_fee_percentage')
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </fieldset>
                </div>

                {{-- Landing Page Tab Panel --}}
                <div x-show="activeTab === 'landingPage'" x-transition class="space-y-8">
                    <fieldset>
                        <legend
                            class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                            {{ __('settings.landing_page_content') }}
                        </legend>

                        <div x-data="{ langTab: '{{ array_key_first($availableLocales) }}' }">
                            <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
                                <nav class="-mb-px flex space-x-4" aria-label="Language Tabs">
                                    @foreach ($availableLocales as $code => $name)
                                        <button type="button" @click="langTab = '{{ $code }}'"
                                            :class="{
                                                'border-indigo-500 text-indigo-600 dark:text-indigo-400': langTab === '{{ $code }}',
                                                'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600': langTab !==
                                                    '{{ $code }}'
                                            }"
                                            class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none">
                                            {{ $name }}
                                        </button>
                                    @endforeach
                                </nav>
                            </div>

                            @foreach ($availableLocales as $code => $name)
                                <div x-show="langTab === '{{ $code }}'" x-transition class="space-y-6">
                                    <div>
                                        <label for="landing_page_title_{{ $code }}"
                                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('settings.landing_page_title_label') }}</label>
                                        <input type="text" name="landing_page_title[{{ $code }}]"
                                            id="landing_page_title_{{ $code }}"
                                            value="{{ old('landing_page_title.' . $code, $settings['landing_page_title'][$code] ?? '') }}"
                                            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('landing_page_title.' . $code) border-red-500 ring-1 ring-red-500 @enderror">
                                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            {{ __('settings.landing_page_title_desc') }}</p>
                                        @error('landing_page_title.' . $code)
                                            <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="landing_page_welcome_message_{{ $code }}"
                                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('settings.landing_page_welcome_label') }}</label>
                                        <textarea name="landing_page_welcome_message[{{ $code }}]"
                                            id="landing_page_welcome_message_{{ $code }}" rows="4"
                                            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('landing_page_welcome_message.' . $code) border-red-500 ring-1 ring-red-500 @enderror">{{ old('landing_page_welcome_message.' . $code, $settings['landing_page_welcome_message'][$code] ?? '') }}</textarea>
                                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            {{ __('settings.landing_page_welcome_desc') }}</p>
                                        @error('landing_page_welcome_message.' . $code)
                                            <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                </div>
                            @endforeach
                        </div>


                        <div class="pt-6 mt-6 border-t border-gray-200 dark:border-gray-600">
                            <label
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('settings.choose_layout') }}</label>
                            <div class="space-y-4">
                                <div
                                    class="flex items-start p-3 border rounded-md dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                    <input id="layout_classic" name="landing_page_layout" type="radio" value="classic"
                                        @checked(old('landing_page_layout', $settings['landing_page_layout'] ?? 'classic') === 'classic')
                                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 focus:ring-indigo-500 mt-1">
                                    <label for="layout_classic"
                                        class="ml-3 block text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
                                        <span class="font-medium flex items-center">
                                            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                                            </svg>
                                            {{ __('settings.layout_classic') }}
                                        </span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-7">
                                            {{ __('settings.layout_classic_desc') }}</p>
                                    </label>
                                </div>
                                <div
                                    class="flex items-start p-3 border rounded-md dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                    <input id="layout_full_width_hero_grid" name="landing_page_layout" type="radio"
                                        value="full_width_hero_grid" @checked(old('landing_page_layout', $settings['landing_page_layout'] ?? '') === 'full_width_hero_grid')
                                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 focus:ring-indigo-500 mt-1">
                                    <label for="layout_full_width_hero_grid"
                                        class="ml-3 block text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
                                        <span class="font-medium flex items-center">
                                            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18M12 12.75h.008v.008H12v-.008z" />
                                            </svg>
                                            {{ __('settings.layout_hero_grid') }}
                                        </span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-7">
                                            {{ __('settings.layout_hero_grid_desc') }}</p>
                                    </label>
                                </div>
                                <div
                                    class="flex items-start p-3 border rounded-md dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                    <input id="layout_grid_cards_images" name="landing_page_layout" type="radio"
                                        value="grid_cards_images" @checked(old('landing_page_layout', $settings['landing_page_layout'] ?? '') === 'grid_cards_images')
                                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 focus:ring-indigo-500 mt-1">
                                    <label for="layout_grid_cards_images"
                                        class="ml-3 block text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
                                        <span class="font-medium flex items-center">
                                            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor">
                                                <rect x="3" y="3" width="7" height="7" rx="1"
                                                    ry="1" stroke-width="1.5" />
                                                <path d="M6.5 3.5 V2 M6.5 10.5V11" stroke-width="0.5" />
                                                <line x1="4" y1="8.5" x2="9" y2="8.5"
                                                    stroke-width="1" />
                                                <rect x="14" y="3" width="7" height="7" rx="1"
                                                    ry="1" stroke-width="1.5" />
                                                <path d="M17.5 3.5 V2 M17.5 10.5V11" stroke-width="0.5" />
                                                <line x1="15" y1="8.5" x2="20" y2="8.5"
                                                    stroke-width="1" />
                                                <rect x="3" y="14" width="7" height="7" rx="1"
                                                    ry="1" stroke-width="1.5" />
                                                <path d="M6.5 14.5 V13 M6.5 21.5V22" stroke-width="0.5" />
                                                <line x1="4" y1="19.5" x2="9" y2="19.5"
                                                    stroke-width="1" />
                                                <rect x="14" y="14" width="7" height="7" rx="1"
                                                    ry="1" stroke-width="1.5" />
                                                <path d="M17.5 14.5 V13 M17.5 21.5V22" stroke-width="0.5" />
                                                <line x1="15" y1="19.5" x2="20" y2="19.5"
                                                    stroke-width="1" />
                                            </svg>
                                            {{ __('settings.layout_grid_cards') }}
                                        </span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-7">
                                            {{ __('settings.layout_grid_cards_desc') }}</p>
                                    </label>
                                </div>
                                <div
                                    class="flex items-start p-3 border rounded-md dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                    <input id="layout_carousel" name="landing_page_layout" type="radio"
                                        value="carousel" @checked(old('landing_page_layout', $settings['landing_page_layout'] ?? '') === 'carousel')
                                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 focus:ring-indigo-500 mt-1">
                                    <label for="layout_carousel"
                                        class="ml-3 block text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
                                        <span class="font-medium flex items-center">
                                            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                                            </svg>
                                            {{ __('settings.layout_carousel') }}
                                        </span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-7">
                                            {{ __('settings.layout_carousel_desc') }}</p>
                                    </label>
                                </div>
                                <div
                                    class="flex items-start p-3 border rounded-md dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                    <input id="layout_featured_dropdown" name="landing_page_layout" type="radio"
                                        value="featured_dropdown" @checked(old('landing_page_layout', $settings['landing_page_layout'] ?? '') === 'featured_dropdown')
                                        class="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-500 focus:ring-indigo-500 mt-1">
                                    <label for="layout_featured_dropdown"
                                        class="ml-3 block text-sm text-gray-700 dark:text-gray-200 cursor-pointer">
                                        <span class="font-medium flex items-center">
                                            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.324h5.388a.563.563 0 01.328.958l-4.204 3.058a.563.563 0 00-.182.557l1.285 5.022a.562.562 0 01-.82.632l-4.203-3.057a.563.563 0 00-.652 0l-4.203 3.057a.562.562 0 01-.82-.632l1.285-5.022a.562.562 0 00-.182-.557l-4.204-3.058a.563.563 0 01.328-.958h5.388a.563.563 0 00.475-.324L11.48 3.5z" />
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                                                    transform="translate(0, 10) scale(0.6)" />
                                            </svg>
                                            {{ __('settings.layout_featured_dropdown') }}
                                        </span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-7">
                                            {{ __('settings.layout_featured_dropdown_desc') }}</p>
                                    </label>
                                </div>
                            </div>
                            @error('landing_page_layout')
                                <p class="mt-2 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </fieldset>
                </div>

                {{-- Packages Tab Panel - Admin Only --}}
                @if (auth()->user() && auth()->user()->hasAdminPrivileges())
                    <div x-show="activeTab === 'packages'" x-transition class="space-y-8">
                        <fieldset>
                            <legend class="text-lg font-semibold text-gray-900 dark:text-white pb-2 mb-1">
                                Select a Package
                            </legend>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
                                Choose the package that best fits your organization's needs. This will enable or disable
                                features across the platform.
                            </p>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                @foreach ($packageTiers as $key => $package)
                                    <div>
                                        <input type="radio" name="package_tier" id="package_{{ $key }}"
                                            value="{{ $key }}" @checked(old('package_tier', $settings['package_tier']) === $key)
                                            class="peer hidden">
                                        <label for="package_{{ $key }}"
                                            class="block h-full cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-6 shadow-sm transition-all duration-200 hover:border-indigo-500 dark:hover:border-indigo-400 peer-checked:border-indigo-600 peer-checked:ring-2 peer-checked:ring-indigo-600 dark:peer-checked:border-indigo-500 dark:peer-checked:ring-indigo-500">

                                            <div class="flex items-center justify-between">
                                                <h3 class="text-lg font-bold text-gray-900 dark:text-white">
                                                    {{ $package['name'] }}</h3>
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                    fill="currentColor"
                                                    class="w-6 h-6 text-indigo-600 opacity-0 peer-checked:opacity-100 transition-opacity">
                                                    <path fill-rule="evenodd"
                                                        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.06-1.06L11.25 12.94l-1.72-1.72a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l3.25-3.25z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                            </div>

                                            <ul class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                                                @foreach ($package['features'] as $feature)
                                                    <li class="flex items-start">
                                                        <svg class="h-5 w-5 text-green-500 flex-shrink-0 mr-2 mt-0.5"
                                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                            fill="currentColor">
                                                            <path fill-rule="evenodd"
                                                                d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.052-.143z"
                                                                clip-rule="evenodd" />
                                                        </svg>
                                                        <span>{{ $feature }}</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                            @error('package_tier')
                                <p class="mt-2 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </fieldset>
                    </div>
                @endif

                {{-- Updated Save Button Condition to Include Admin Check for Packages --}}
                <div x-show="activeTab === 'general' || activeTab === 'organization' || activeTab === 'financial' || activeTab === 'landingPage' || (activeTab === 'packages' && {{ auth()->user() && auth()->user()->is_admin ? 'true' : 'false' }})"
                    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 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                        {{ __('settings.save_button') }}
                    </button>
                </div>
            </form>

            <div x-show="activeTab === 'general'" class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                <h3 class="text-base font-medium text-gray-900 dark:text-white">{{ __('settings.version_title') }}</h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    {{ __('settings.version_current') }}: <span class="font-semibold">{{ $appBuildVersion }}</span>
                </p>
            </div>
        </div>
    </div>
@endsection