<x-layouts.app.sidebar>
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <!-- Settings Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Settings</h1>
    </div>

    <!-- Settings Navigation -->
    <x-settings-navigation />

    <!-- Settings Form -->
    <form method="POST" action="{{ route('settings.security.update') }}" class="space-y-8">
        @csrf
        @method('PUT')

        <!-- Authentication Settings -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Authentication & Access Control</h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Configure login security and session management</p>
            </div>
            <div class="px-6 py-6 space-y-6">
                <!-- Two-Factor Authentication -->
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input id="enable_two_factor_auth" 
                               name="enable_two_factor_auth" 
                               type="checkbox" 
                               value="1"
                               {{ old('enable_two_factor_auth', $settings->enable_two_factor_auth ?? false) ? 'checked' : '' }}
                               class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="enable_two_factor_auth" class="font-medium text-gray-700 dark:text-gray-300">
                            Enable Two-Factor Authentication
                        </label>
                        <p class="text-gray-500 dark:text-gray-400">Require 2FA for all user accounts</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Session Timeout -->
                    <div>
                        <label for="session_timeout_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Session Timeout (minutes)
                        </label>
                        <input type="number" 
                               id="session_timeout_minutes" 
                               name="session_timeout_minutes" 
                               value="{{ old('session_timeout_minutes', $settings->session_timeout_minutes ?? 60) }}"
                               min="5" 
                               max="1440"
                               class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        @error('session_timeout_minutes')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Password Expiry -->
                    <div>
                        <label for="password_expiry_days" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Password Expiry (days)
                        </label>
                        <input type="number" 
                               id="password_expiry_days" 
                               name="password_expiry_days" 
                               value="{{ old('password_expiry_days', $settings->password_expiry_days ?? 90) }}"
                               min="30" 
                               max="365"
                               class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        @error('password_expiry_days')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Max Login Attempts -->
                    <div>
                        <label for="max_login_attempts" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Max Login Attempts
                        </label>
                        <input type="number" 
                               id="max_login_attempts" 
                               name="max_login_attempts" 
                               value="{{ old('max_login_attempts', $settings->max_login_attempts ?? 5) }}"
                               min="3" 
                               max="10"
                               class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        @error('max_login_attempts')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Lockout Duration -->
                    <div>
                        <label for="lockout_duration_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                            Lockout Duration (minutes)
                        </label>
                        <input type="number" 
                               id="lockout_duration_minutes" 
                               name="lockout_duration_minutes" 
                               value="{{ old('lockout_duration_minutes', $settings->lockout_duration_minutes ?? 15) }}"
                               min="5" 
                               max="60"
                               class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        @error('lockout_duration_minutes')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Password Requirements -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Password Requirements</h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Set password complexity and strength requirements</p>
            </div>
            <div class="px-6 py-6 space-y-6">
                <!-- Minimum Password Length -->
                <div>
                    <label for="min_password_length" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Minimum Password Length
                    </label>
                    <input type="number" 
                           id="min_password_length" 
                           name="min_password_length" 
                           value="{{ old('min_password_length', $settings->min_password_length ?? 8) }}"
                           min="6" 
                           max="32"
                           class="mt-1 block w-full max-w-xs border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('min_password_length')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Password Requirements Checkboxes -->
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="require_uppercase" 
                                   name="require_uppercase" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('require_uppercase', $settings->require_uppercase ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="require_uppercase" class="font-medium text-gray-700 dark:text-gray-300">
                                Require Uppercase Letters
                            </label>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="require_lowercase" 
                                   name="require_lowercase" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('require_lowercase', $settings->require_lowercase ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="require_lowercase" class="font-medium text-gray-700 dark:text-gray-300">
                                Require Lowercase Letters
                            </label>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="require_numbers" 
                                   name="require_numbers" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('require_numbers', $settings->require_numbers ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="require_numbers" class="font-medium text-gray-700 dark:text-gray-300">
                                Require Numbers
                            </label>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="require_special_characters" 
                                   name="require_special_characters" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('require_special_characters', $settings->require_special_characters ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="require_special_characters" class="font-medium text-gray-700 dark:text-gray-300">
                                Require Special Characters
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Data Protection -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Data Protection & Logging</h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Configure data encryption, audit logging, and backup settings</p>
            </div>
            <div class="px-6 py-6 space-y-6">
                <!-- Data Protection Checkboxes -->
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="enable_data_encryption" 
                                   name="enable_data_encryption" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('enable_data_encryption', $settings->enable_data_encryption ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="enable_data_encryption" class="font-medium text-gray-700 dark:text-gray-300">
                                Enable Data Encryption
                            </label>
                            <p class="text-gray-500 dark:text-gray-400">Encrypt sensitive customer and vehicle data</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="enable_audit_logging" 
                                   name="enable_audit_logging" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('enable_audit_logging', $settings->enable_audit_logging ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="enable_audit_logging" class="font-medium text-gray-700 dark:text-gray-300">
                                Enable Audit Logging
                            </label>
                            <p class="text-gray-500 dark:text-gray-400">Log all user actions and system changes</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="enable_backup_alerts" 
                                   name="enable_backup_alerts" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('enable_backup_alerts', $settings->enable_backup_alerts ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="enable_backup_alerts" class="font-medium text-gray-700 dark:text-gray-300">
                                Enable Backup Alerts
                            </label>
                            <p class="text-gray-500 dark:text-gray-400">Send notifications about backup status</p>
                        </div>
                    </div>
                </div>

                <!-- Audit Log Retention -->
                <div>
                    <label for="audit_log_retention_days" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Audit Log Retention (days)
                    </label>
                    <input type="number" 
                           id="audit_log_retention_days" 
                           name="audit_log_retention_days" 
                           value="{{ old('audit_log_retention_days', $settings->audit_log_retention_days ?? 365) }}"
                           min="30" 
                           max="2555"
                           class="mt-1 block w-full max-w-xs border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('audit_log_retention_days')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- API Security -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">API Security</h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Configure API access and rate limiting</p>
            </div>
            <div class="px-6 py-6 space-y-6">
                <!-- API Rate Limiting -->
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input id="enable_api_rate_limiting" 
                               name="enable_api_rate_limiting" 
                               type="checkbox" 
                               value="1"
                               {{ old('enable_api_rate_limiting', $settings->enable_api_rate_limiting ?? true) ? 'checked' : '' }}
                               class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="enable_api_rate_limiting" class="font-medium text-gray-700 dark:text-gray-300">
                            Enable API Rate Limiting
                        </label>
                        <p class="text-gray-500 dark:text-gray-400">Limit the number of API requests per minute</p>
                    </div>
                </div>

                <!-- API Requests Per Minute -->
                <div>
                    <label for="api_requests_per_minute" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        API Requests Per Minute
                    </label>
                    <input type="number" 
                           id="api_requests_per_minute" 
                           name="api_requests_per_minute" 
                           value="{{ old('api_requests_per_minute', $settings->api_requests_per_minute ?? 60) }}"
                           min="10" 
                           max="1000"
                           class="mt-1 block w-full max-w-xs border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('api_requests_per_minute')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Allowed IP Addresses -->
                <div>
                    <label for="allowed_ip_addresses" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Allowed IP Addresses
                    </label>
                    <textarea id="allowed_ip_addresses" 
                              name="allowed_ip_addresses" 
                              rows="4"
                              placeholder="Enter IP addresses (one per line) or leave empty to allow all"
                              class="mt-1 block w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">{{ old('allowed_ip_addresses', is_array($settings->allowed_ip_addresses ?? []) ? implode("\n", $settings->allowed_ip_addresses) : '') }}</textarea>
                    @error('allowed_ip_addresses')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Enter one IP address per line. Leave empty to allow all IP addresses.</p>
                </div>
            </div>
        </div>

        <!-- Customer Portal Security -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Customer Portal Security</h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Configure customer access and data permissions</p>
            </div>
            <div class="px-6 py-6 space-y-6">
                <!-- Customer Portal Settings -->
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="allow_customer_portal" 
                                   name="allow_customer_portal" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('allow_customer_portal', $settings->allow_customer_portal ?? true) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="allow_customer_portal" class="font-medium text-gray-700 dark:text-gray-300">
                                Enable Customer Portal
                            </label>
                            <p class="text-gray-500 dark:text-gray-400">Allow customers to access their repair history and estimates</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="allow_customer_data_download" 
                                   name="allow_customer_data_download" 
                                   type="checkbox" 
                                   value="1"
                                   {{ old('allow_customer_data_download', $settings->allow_customer_data_download ?? false) ? 'checked' : '' }}
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="allow_customer_data_download" class="font-medium text-gray-700 dark:text-gray-300">
                                Allow Customer Data Download
                            </label>
                            <p class="text-gray-500 dark:text-gray-400">Let customers download their data (GDPR compliance)</p>
                        </div>
                    </div>
                </div>

                <!-- Customer Session Timeout -->
                <div>
                    <label for="customer_session_timeout_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Customer Session Timeout (minutes)
                    </label>
                    <input type="number" 
                           id="customer_session_timeout_minutes" 
                           name="customer_session_timeout_minutes" 
                           value="{{ old('customer_session_timeout_minutes', $settings->customer_session_timeout_minutes ?? 30) }}"
                           min="5" 
                           max="120"
                           class="mt-1 block w-full max-w-xs border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('customer_session_timeout_minutes')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-end space-x-3">
            <a href="{{ route('settings.general') }}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                Cancel
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                Save Security Settings
            </button>
        </div>
    </form>
</div>
</x-layouts.app.sidebar>
