<x-layouts.admin title="Settings | Admin Suite" activePage="admin-settings">
<div class="w-full">
    <div class="mb-10">
        <h2 class="font-serif text-3xl text-on-surface">System Settings</h2>
        <p class="text-on-surface-variant text-sm mt-1">Configure global application parameters and security controls.</p>
    </div>

    <form method="POST" action="{{ route('admin.settings.update') }}" class="space-y-10">
        @csrf

        <!-- OTP Settings -->
        <div class="bg-surface-container-lowest p-8 space-y-6">
            <div class="flex items-center gap-3 mb-2">
                <span class="material-symbols-outlined text-secondary">security</span>
                <h3 class="font-label text-lg font-bold text-on-surface">Security & Authentication</h3>
            </div>

            <div class="flex items-center justify-between py-4 border-b border-surface-container">
                <div>
                    <h4 class="font-label text-sm font-bold text-on-surface">OTP Requirements</h4>
                    <p class="text-xs text-on-surface-variant">Require OTP verification for all user logins</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="hidden" name="otp_enabled" value="false">
                    <input type="checkbox" name="otp_enabled" value="true" class="sr-only peer" {{ $otpEnabled === 'true' ? 'checked' : '' }}>
                    <div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
                </label>
            </div>

            <div class="flex items-center justify-between py-4">
                <div>
                    <h4 class="font-label text-sm font-bold text-on-surface">Maintenance Mode</h4>
                    <p class="text-xs text-on-surface-variant">Restrict access to admin users only</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="hidden" name="maintenance_mode" value="false">
                    <input type="checkbox" name="maintenance_mode" value="true" class="sr-only peer" {{ $maintenanceMode === 'true' ? 'checked' : '' }}>
                    <div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
                </label>
            </div>
        </div>

        <!-- Transfer Settings -->
        <div class="bg-surface-container-lowest p-8 space-y-6">
            <div class="flex items-center gap-3 mb-2">
                <span class="material-symbols-outlined text-secondary">swap_horiz</span>
                <h3 class="font-label text-lg font-bold text-on-surface">Transfer Controls</h3>
            </div>

            <div>
                <label class="block text-xs font-label uppercase tracking-widest text-on-surface-variant mb-2">Transfer Review Threshold ($)</label>
                <input type="number" name="transfer_review_threshold" value="{{ old('transfer_review_threshold', $transferReviewThreshold) }}"
                       class="w-full bg-surface-container-high border-none rounded-md px-4 py-3 text-sm focus:ring-2 focus:ring-secondary transition-all"
                       step="100" min="0">
                <p class="text-xs text-on-surface-variant mt-1">Transfers above this amount will require admin review.</p>
                @error('transfer_review_threshold')
                    <p class="text-xs text-error mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-8 py-3 rounded-md text-sm font-label font-medium flex items-center gap-2">
                <span class="material-symbols-outlined text-sm">save</span>
                Save Settings
            </button>
        </div>
    </form>
</div>
</x-layouts.admin>
