@extends('admin.dashboard')

@section('settings-content')
<div>
    <!-- Settings Management Header -->
    <div class="mb-6">
        <h2 class="text-xl font-semibold text-gray-900 mb-2">System Settings</h2>
        <p class="text-gray-600">Configure system-wide settings for the Elderly Care Connect platform.</p>
    </div>

    <!-- Settings Forms Container -->
    <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6" x-data="{ activeTab: 'general' }">
        <!-- Settings Tabs -->
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                <button 
                    type="button"
                    @click="activeTab = 'general'" 
                    :class="{ 'border-indigo-500 text-indigo-600': activeTab === 'general', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'general' }"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                >
                    General
                </button>
                <button 
                    type="button"
                    @click="activeTab = 'currency'" 
                    :class="{ 'border-indigo-500 text-indigo-600': activeTab === 'currency', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'currency' }"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                >
                    Currency
                </button>
                <button 
                    type="button"
                    @click="activeTab = 'donations'" 
                    :class="{ 'border-indigo-500 text-indigo-600': activeTab === 'donations', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'donations' }"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                >
                    Donations
                </button>
                <button 
                    type="button"
                    @click="activeTab = 'email'" 
                    :class="{ 'border-indigo-500 text-indigo-600': activeTab === 'email', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'email' }"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                >
                    Email
                </button>
                <button 
                    type="button"
                    @click="activeTab = 'security'" 
                    :class="{ 'border-indigo-500 text-indigo-600': activeTab === 'security', 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300': activeTab !== 'security' }"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                >
                    Security
                </button>
            </nav>
        </div>
        
        <!-- Display success message if any -->
        @if(session('success'))
        <div class="mt-4 p-4 bg-green-50 border-l-4 border-green-400 text-green-700">
            <p>{{ session('success') }}</p>
        </div>
        @endif
        
        <!-- General Settings -->
        <form action="{{ route('admin.settings.update') }}" method="POST" x-show="activeTab === 'general'" class="mt-6 space-y-6">
            @csrf
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    <label for="site_name" class="block text-sm font-medium text-gray-700">Site Name</label>
                    <div class="mt-1">
                        <input type="text" name="site_name" id="site_name" value="{{ $settings['site_name'] ?? 'Elderly Care Connect' }}" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                </div>

                <div class="sm:col-span-3">
                    <label for="contact_email" class="block text-sm font-medium text-gray-700">Contact Email</label>
                    <div class="mt-1">
                        <input type="email" name="contact_email" id="contact_email" value="{{ $settings['contact_email'] ?? 'contact@elderlycare.com' }}" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                </div>

                <div class="sm:col-span-6">
                    <label for="site_description" class="block text-sm font-medium text-gray-700">Site Description</label>
                    <div class="mt-1">
                        <textarea id="site_description" name="site_description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md">{{ $settings['site_description'] ?? 'Elderly Care Connect is a platform connecting donors with elderly individuals in need of financial assistance.' }}</textarea>
                    </div>
                    <p class="mt-2 text-sm text-gray-500">Brief description of the site that appears in search engines and social media.</p>
                </div>

                <div class="sm:col-span-6">
                    <label for="maintenance_mode" class="block text-sm font-medium text-gray-700">Maintenance Mode</label>
                    <div class="mt-1">
                        <select id="maintenance_mode" name="maintenance_mode" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            <option value="0" {{ ($settings['maintenance_mode'] ?? '0') == '0' ? 'selected' : '' }}>Off</option>
                            <option value="1" {{ ($settings['maintenance_mode'] ?? '0') == '1' ? 'selected' : '' }}>On</option>
                        </select>
                    </div>
                    <p class="mt-2 text-sm text-gray-500">When enabled, the site will display a maintenance message to all non-admin users.</p>
                </div>
            </div>
            
            <div class="mt-6 pt-5 border-t border-gray-200">
                <div class="flex justify-end">
                    <button type="submit" class="ml-3 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">
                        Save General Settings
                    </button>
                </div>
            </div>
        </form>
        
        <!-- Currency Settings -->
        <div x-show="activeTab === 'currency'" class="mt-6 space-y-6">
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-yellow-700">
                            <strong>Warning:</strong> Enabling global currency override will force all users to use the same currency throughout the application, regardless of their preferences.
                        </p>
                    </div>
                </div>
            </div>
            
            <form action="{{ route('admin.settings.currency.update') }}" method="POST" class="space-y-6">
                @csrf
                <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                    <div class="sm:col-span-6">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="global_currency_override" name="global_currency_override" type="checkbox" value="true" {{ $globalCurrencyOverride ? 'checked' : '' }} class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="global_currency_override" class="font-medium text-gray-700">Enable Global Currency Override</label>
                                <p class="text-gray-500">When enabled, all currency selections throughout the application will be forced to use the default currency below.</p>
                                <p class="text-xs text-indigo-600 mt-1">Current status: <span class="font-semibold">{{ $globalCurrencyOverride ? 'Enabled' : 'Disabled' }}</span></p>
                            </div>
                        </div>
                    </div>

                    <div class="sm:col-span-3">
                        <label for="default_currency" class="block text-sm font-medium text-gray-700">Default Currency</label>
                        <div class="mt-1">
                            <select id="default_currency" name="default_currency" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                @foreach($currencies as $code => $label)
                                    <option value="{{ $code }}" {{ $defaultCurrency == $code ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <p class="mt-2 text-sm text-gray-500">This currency will be used throughout the application when global override is enabled.</p>
                        <p class="text-xs text-indigo-600 mt-1">Current default: <span class="font-semibold">{{ $defaultCurrency }}</span></p>
                    </div>
                </div>
                
                <div class="flex justify-end">
                    <button type="submit" class="ml-3 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">
                        Save Currency Settings
                    </button>
                </div>
                
                @if($errors->has('default_currency'))
                <div class="mt-4 p-4 bg-red-50 border-l-4 border-red-400 text-red-700">
                    <ul class="list-disc pl-5">
                        @foreach($errors->get('default_currency') as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
            </form>
        </div>
        
        <!-- Donation Settings -->
        <form action="{{ route('admin.settings.update') }}" method="POST" x-show="activeTab === 'donations'" class="mt-6 space-y-6">
            @csrf
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    <label for="min_donation_amount" class="block text-sm font-medium text-gray-700">Minimum Donation Amount</label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="text-gray-500 sm:text-sm">$</span>
                        </div>
                        <input type="number" name="min_donation_amount" id="min_donation_amount" value="{{ $settings['min_donation_amount'] ?? '5' }}" min="1" step="1" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md">
                    </div>
                </div>

                <div class="sm:col-span-3">
                    <label for="platform_fee_percentage" class="block text-sm font-medium text-gray-700">Platform Fee Percentage</label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <input type="number" name="platform_fee_percentage" id="platform_fee_percentage" value="{{ $settings['platform_fee_percentage'] ?? '2.5' }}" min="0" max="100" step="0.1" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <span class="text-gray-500 sm:text-sm">%</span>
                        </div>
                    </div>
                </div>

                <div class="sm:col-span-6">
                    <label for="suggested_donation_amounts" class="block text-sm font-medium text-gray-700">Suggested Donation Amounts</label>
                    <div class="mt-1">
                        <input type="text" name="suggested_donation_amounts" id="suggested_donation_amounts" value="{{ $settings['suggested_donation_amounts'] ?? '10,25,50,100,500' }}" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <p class="mt-2 text-sm text-gray-500">Comma-separated list of suggested donation amounts.</p>
                </div>

                <div class="sm:col-span-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="allow_anonymous_donations" name="allow_anonymous_donations" type="checkbox" value="1" {{ ($settings['allow_anonymous_donations'] ?? '1') == '1' ? 'checked' : '' }} class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="allow_anonymous_donations" class="font-medium text-gray-700">Allow Anonymous Donations</label>
                            <p class="text-gray-500">When enabled, donors can choose to hide their identity when making donations.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-6 pt-5 border-t border-gray-200">
                <div class="flex justify-end">
                    <button type="submit" class="ml-3 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">
                        Save Donation Settings
                    </button>
                </div>
            </div>
        </form>
        
        <!-- Email Settings -->
        <form action="{{ route('admin.settings.update') }}" method="POST" x-show="activeTab === 'email'" class="mt-6 space-y-6">
            @csrf
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    <label for="mail_from_address" class="block text-sm font-medium text-gray-700">From Email Address</label>
                    <div class="mt-1">
                        <input type="email" name="mail_from_address" id="mail_from_address" value="{{ $settings['mail_from_address'] ?? 'noreply@elderlycare.com' }}" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                </div>

                <div class="sm:col-span-3">
                    <label for="mail_from_name" class="block text-sm font-medium text-gray-700">From Name</label>
                    <div class="mt-1">
                        <input type="text" name="mail_from_name" id="mail_from_name" value="{{ $settings['mail_from_name'] ?? 'Elderly Care Connect' }}" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                </div>

                <div class="sm:col-span-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="send_welcome_email" name="send_welcome_email" type="checkbox" value="1" {{ ($settings['send_welcome_email'] ?? '1') == '1' ? 'checked' : '' }} class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="send_welcome_email" class="font-medium text-gray-700">Send Welcome Email</label>
                            <p class="text-gray-500">When enabled, new users will receive a welcome email upon registration.</p>
                        </div>
                    </div>
                </div>

                <div class="sm:col-span-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="send_donation_receipts" name="send_donation_receipts" type="checkbox" value="1" {{ ($settings['send_donation_receipts'] ?? '1') == '1' ? 'checked' : '' }} class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="send_donation_receipts" class="font-medium text-gray-700">Send Donation Receipts</label>
                            <p class="text-gray-500">When enabled, donors will receive email receipts for their donations.</p>
                        </div>
                    </div>
                </div>

                <div class="sm:col-span-6">
                    <label for="admin_notification_email" class="block text-sm font-medium text-gray-700">Admin Notification Email</label>
                    <div class="mt-1">
                        <input type="email" name="admin_notification_email" id="admin_notification_email" value="{{ $settings['admin_notification_email'] ?? '' }}" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <p class="mt-2 text-sm text-gray-500">Email address to receive important system notifications. Leave blank to use the default admin email.</p>
                </div>
            </div>
            
            <div class="mt-6 pt-5 border-t border-gray-200">
                <div class="flex justify-end">
                    <button type="submit" class="ml-3 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">
                        Save Email Settings
                    </button>
                </div>
            </div>
        </form>
        
        <!-- Security Settings -->
        <form action="{{ route('admin.settings.update') }}" method="POST" x-show="activeTab === 'security'" class="mt-6 space-y-6">
            @csrf
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    <label for="kyc_verification_required" class="block text-sm font-medium text-gray-700">KYC Verification Required</label>
                    <div class="mt-1">
                        <select id="kyc_verification_required" name="kyc_verification_required" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            <option value="none" {{ ($settings['kyc_verification_required'] ?? 'none') == 'none' ? 'selected' : '' }}>None</option>
                            <option value="organizations" {{ ($settings['kyc_verification_required'] ?? 'none') == 'organizations' ? 'selected' : '' }}>Organizations Only</option>
                            <option value="all" {{ ($settings['kyc_verification_required'] ?? 'none') == 'all' ? 'selected' : '' }}>All Users</option>
                        </select>
                    </div>
                    <p class="mt-2 text-sm text-gray-500">Determines which user types require KYC verification.</p>
                </div>

                <div class="sm:col-span-3">
                    <label for="max_login_attempts" class="block text-sm font-medium text-gray-700">Max Login Attempts</label>
                    <div class="mt-1">
                        <input type="number" name="max_login_attempts" id="max_login_attempts" value="{{ $settings['max_login_attempts'] ?? '5' }}" min="1" max="10" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <p class="mt-2 text-sm text-gray-500">Maximum number of failed login attempts before account lockout.</p>
                </div>

                <div class="sm:col-span-3">
                    <label for="account_lockout_minutes" class="block text-sm font-medium text-gray-700">Account Lockout Minutes</label>
                    <div class="mt-1">
                        <input type="number" name="account_lockout_minutes" id="account_lockout_minutes" value="{{ $settings['account_lockout_minutes'] ?? '30' }}" min="5" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <p class="mt-2 text-sm text-gray-500">Duration in minutes for account lockout after exceeding max login attempts.</p>
                </div>

                <div class="sm:col-span-3">
                    <label for="password_expiry_days" class="block text-sm font-medium text-gray-700">Password Expiry Days</label>
                    <div class="mt-1">
                        <input type="number" name="password_expiry_days" id="password_expiry_days" value="{{ $settings['password_expiry_days'] ?? '90' }}" min="0" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <p class="mt-2 text-sm text-gray-500">Number of days after which passwords expire. Set to 0 to disable password expiry.</p>
                </div>

                <div class="sm:col-span-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="enable_two_factor" name="enable_two_factor" type="checkbox" value="1" {{ ($settings['enable_two_factor'] ?? '0') == '1' ? 'checked' : '' }} class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="enable_two_factor" class="font-medium text-gray-700">Enable Two-Factor Authentication</label>
                            <p class="text-gray-500">When enabled, users can set up two-factor authentication for their accounts.</p>
                        </div>
                    </div>
                </div>

                <div class="sm:col-span-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="force_two_factor_for_admins" name="force_two_factor_for_admins" type="checkbox" value="1" {{ ($settings['force_two_factor_for_admins'] ?? '0') == '1' ? 'checked' : '' }} class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="force_two_factor_for_admins" class="font-medium text-gray-700">Force Two-Factor for Admins</label>
                            <p class="text-gray-500">When enabled, all administrators must use two-factor authentication.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-6 pt-5 border-t border-gray-200">
                <div class="flex justify-end">
                    <button type="submit" class="ml-3 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">
                        Save Security Settings
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection