@extends('layouts.app')

@section('title', 'Settings')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">System Settings</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Configure system preferences and user settings</p>
    </div>

    <!-- Success Message -->
    {{-- @if(session('success'))
        <div class="bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-lg">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span class="text-green-700 dark:text-green-200 font-medium">{{ session('success') }}</span>
            </div>
        </div>
    @endif --}}

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Settings -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Profile Settings -->
            <div class="card">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400 mr-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Profile Information</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Update your account profile information</p>
                    </div>
                </div>

                <form action="{{ route('settings.profile.update') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name <span class="text-red-500">*</span></label>
                            <input
                                type="text"
                                name="name"
                                value="{{ old('name', Auth::user()->name) }}"
                                required
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white @error('name') border-red-500 @enderror"
                            >
                            @error('name')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address <span class="text-red-500">*</span></label>
                            <input
                                type="email"
                                name="email"
                                value="{{ old('email', Auth::user()->email) }}"
                                required
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white @error('email') border-red-500 @enderror"
                            >
                            @error('email')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
                            <input
                                type="tel"
                                name="phone"
                                value="{{ old('phone', Auth::user()->phone) }}"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                            >
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
                            <input
                                type="text"
                                value="{{ Auth::user()->roles->first()->name ?? 'No Role' }}"
                                readonly
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white"
                            >
                        </div>

                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bio</label>
                            <textarea
                                name="bio"
                                rows="3"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                            >{{ old('bio', Auth::user()->bio) }}</textarea>
                        </div>

                        <div class="md:col-span-2">
                            <button type="submit" class="btn btn-primary">
                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                                </svg>
                                Save Changes
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Security Settings -->
            <div class="card">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 rounded-lg bg-red-100 dark:bg-red-900 flex items-center justify-center text-red-600 dark:text-red-400 mr-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Security Settings</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Manage your account security</p>
                    </div>
                </div>

                <form action="{{ route('settings.password.update') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white mb-3">Password</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Password <span class="text-red-500">*</span></label>
                                <input
                                    type="password"
                                    name="current_password"
                                    required
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white @error('current_password') border-red-500 @enderror"
                                >
                                @error('current_password')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Password <span class="text-red-500">*</span></label>
                                <input
                                    type="password"
                                    name="password"
                                    required
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white @error('password') border-red-500 @enderror"
                                >
                                @error('password')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirm Password <span class="text-red-500">*</span></label>
                                <input
                                    type="password"
                                    name="password_confirmation"
                                    required
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                >
                            </div>

                            <div class="md:col-span-2">
                                <button type="submit" class="btn bg-red-600 text-white hover:bg-red-700">
                                    <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                                    </svg>
                                    Change Password
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- System Info -->
            <div class="card">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 rounded-lg bg-teal-100 dark:bg-teal-900 flex items-center justify-center text-teal-600 dark:text-teal-400 mr-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">System Information</h3>
                </div>

                <div class="space-y-3">
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Application Version</p>
                        <p class="font-semibold text-gray-900 dark:text-white">v1.0.0</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Laravel Version</p>
                        <p class="font-semibold text-gray-900 dark:text-white">{{ Illuminate\Foundation\Application::VERSION }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">PHP Version</p>
                        <p class="font-semibold text-gray-900 dark:text-white">{{ PHP_VERSION }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Database</p>
                        <p class="font-semibold text-gray-900 dark:text-white">MySQL</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Environment</p>
                        <span class="px-2 py-1 bg-{{ config('app.env') === 'production' ? 'green' : 'yellow' }}-100 dark:bg-{{ config('app.env') === 'production' ? 'green' : 'yellow' }}-900 text-{{ config('app.env') === 'production' ? 'green' : 'yellow' }}-800 dark:text-{{ config('app.env') === 'production' ? 'green' : 'yellow' }}-200 text-xs font-medium rounded-full">
                            {{ ucfirst(config('app.env')) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Appearance -->
            <div class="card">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center text-purple-600 dark:text-purple-400 mr-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">Appearance</h3>
                </div>

                <form action="{{ route('settings.appearance.update') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Theme</label>
                            <select name="theme" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                <option value="light" {{ Auth::user()->theme === 'light' ? 'selected' : '' }}>Light Mode</option>
                                <option value="dark" {{ Auth::user()->theme === 'dark' ? 'selected' : '' }}>Dark Mode</option>
                                <option value="auto" {{ Auth::user()->theme === 'auto' ? 'selected' : '' }}>Auto (System)</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Language</label>
                            <select name="language" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                <option value="en" {{ Auth::user()->language === 'en' ? 'selected' : '' }}>English (US)</option>
                                <option value="ms" {{ Auth::user()->language === 'ms' ? 'selected' : '' }}>Bahasa Melayu</option>
                                <option value="es" {{ Auth::user()->language === 'es' ? 'selected' : '' }}>Español</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Timezone</label>
                            <select name="timezone" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                <option value="Asia/Kuala_Lumpur" {{ Auth::user()->timezone === 'Asia/Kuala_Lumpur' ? 'selected' : '' }}>Malaysia (MYT)</option>
                                <option value="Asia/Singapore" {{ Auth::user()->timezone === 'Asia/Singapore' ? 'selected' : '' }}>Singapore (SGT)</option>
                                <option value="America/Los_Angeles" {{ Auth::user()->timezone === 'America/Los_Angeles' ? 'selected' : '' }}>Pacific Time (PT)</option>
                                <option value="America/New_York" {{ Auth::user()->timezone === 'America/New_York' ? 'selected' : '' }}>Eastern Time (ET)</option>
                            </select>
                        </div>

                        <button type="submit" class="w-full btn btn-primary">Save Preferences</button>
                    </div>
                </form>
            </div>

            <!-- Support -->
            <div class="card bg-gradient-to-br from-blue-500 to-purple-600 text-white border-none">
                <h3 class="text-lg font-bold mb-3">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Need Help?
                </h3>
                <p class="mb-4 opacity-90 text-sm">Our support team is here to assist you</p>
                <div class="space-y-2">
                    <button class="w-full btn bg-white text-blue-600 hover:bg-gray-100">
                        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                        Contact Support
                    </button>
                    <button class="w-full btn border border-white text-white hover:bg-white hover:bg-opacity-20">
                        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                        </svg>
                        Documentation
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection