@extends("layouts.app")

@section('title', 'My Profile')

@section("main")
    <div class="py-12 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-gray-900 dark:via-slate-900 dark:to-gray-900 min-h-screen">
        <div class="mx-auto px-4 lg:px-16 space-y-8">
            <!-- Page Header -->
            <div class="text-center mb-12">
                <div class="flex items-center justify-center mb-6">
                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mr-4">
                        <i class="fas fa-user-edit text-white text-2xl"></i>
                    </div>
                    <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
                        Profile Settings
                    </h1>
                </div>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    Manage your account information, security settings, and preferences
                </p>
            </div>

            <!-- Profile Information Card -->
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-user text-white text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-white">Profile Information</h2>
                    </div>
                </div>
                <div class="p-8">
                    @include("profile.partials.update-profile-information-form")
                </div>
            </div>

            <!-- Password Security Card -->
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 overflow-hidden">
                <div class="bg-gradient-to-r from-green-500 to-emerald-600 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-lock text-white text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-white">Password Security</h2>
                    </div>
                </div>
                <div class="p-8">
                    @include("profile.partials.update-password-form")
                </div>
            </div>

            <!-- Two-Factor Authentication Card -->
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 overflow-hidden">
                <div class="bg-gradient-to-r from-orange-500 to-red-600 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-shield-alt text-white text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-white">Two-Factor Authentication</h2>
                    </div>
                </div>
                <div class="p-8">
                    <section>
                        <header class="mb-6">
                            <p class="text-gray-600 dark:text-gray-400">
                                Enhance your account security with Google 2-Factor Authentication. This adds an extra layer of protection to your account.
                            </p>
                        </header>
                        @if ($user->google2fa_enabled == "On")
                            <div class="text-center mb-8">
                                <div class="inline-flex items-center justify-center w-20 h-20 bg-green-100 dark:bg-green-900/30 rounded-full mb-4">
                                    <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-3xl"></i>
                                </div>
                                <p class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">2FA is Enabled</p>
                                <p class="text-gray-600 dark:text-gray-400">Your account is protected with two-factor authentication</p>
                            </div>
                            <form method="post" action="{{ route("profile.disable_2fa") }}" class="space-y-6">
                                @csrf
                                <button type="submit" class="w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                                    <i class="fas fa-times-circle mr-2"></i>
                                    {{ __("Disable Google 2FA Authentication") }}
                                </button>
                            </form>
                        @else
                            <form method="post" action="{{ route("profile.enable_2fa") }}" class="space-y-8">
                                @csrf
                                <div class="text-center">
                                    <div class="inline-block p-6 bg-white dark:bg-gray-700 rounded-2xl shadow-lg mb-6">
                                        <img src="{{ $qrCodeInline }}" alt="2FA QR Code" class="rounded-lg">
                                    </div>
                                    <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-xl p-4 mb-6">
                                        <div class="flex items-center justify-center mb-2">
                                            <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mr-2"></i>
                                            <span class="font-semibold text-yellow-800 dark:text-yellow-300">Setup Required</span>
                                        </div>
                                        <p class="text-yellow-700 dark:text-yellow-300 text-sm">
                                            Scan the QR code with your Google Authenticator app, then enter the 6-digit code below to enable 2FA
                                        </p>
                                    </div>
                                </div>
                                <div>
                                    <x-input-label for="one_time_password" :value="__('Enter 6-Digit Authentication Code')" class="text-lg font-semibold mb-3" />
                                    <x-text-input id="one_time_password" name="one_time_password" type="text" class="mt-1 block w-full text-center text-2xl font-mono py-4 rounded-xl border-2 focus:border-orange-500 focus:ring-orange-500" autocomplete="off" placeholder="000000" maxlength="6" />
                                    <x-input-error :messages="$errors->get('one_time_password')" class="mt-2" />
                                </div>
                                <button type="submit" class="w-full bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                                    <i class="fas fa-shield-alt mr-2"></i>
                                    {{ __("Enable Google 2FA Authentication") }}
                                </button>
                            </form>
                        @endif
                    </section>
                </div>
            </div>

            <!-- Profile Picture Card -->
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 overflow-hidden">
                <div class="bg-gradient-to-r from-purple-500 to-pink-600 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-camera text-white text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-white">Profile Picture</h2>
                    </div>
                </div>
                <div class="p-8">
                    <section>
                        <header class="mb-6">
                            <p class="text-gray-600 dark:text-gray-400">
                                Upload a profile picture to personalize your account. Supported formats: JPG, PNG, GIF (max 2MB)
                            </p>
                        </header>
                        <form method="post" action="{{ route("profile.avatar") }}" enctype="multipart/form-data" class="space-y-6">
                            @csrf
                            <div class="flex items-center justify-center w-full">
                                <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-2xl cursor-pointer bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 hover:from-blue-50 hover:to-purple-50 dark:hover:from-gray-600 dark:hover:to-gray-500 transition-all duration-300 group">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                                            <i class="fas fa-cloud-upload-alt text-white text-2xl"></i>
                                        </div>
                                        <p class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300">
                                            <span class="text-purple-600 dark:text-purple-400">Click to upload</span> or drag and drop
                                        </p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">PNG, JPG, GIF up to 2MB</p>
                                    </div>
                                    <input id="dropzone-file" name="logo" type="file" class="hidden" accept="image/*" />
                                </label>
                            </div>
                            <x-input-error :messages="$errors->get('logo')" class="mt-2" />
                            <button type="submit" class="w-full mt-8 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                                <i class="fas fa-save mr-2"></i>
                                {{ __("Save Profile Picture") }}
                            </button>
                        </form>
                    </section>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('dropzone-file');
            const dropzone = fileInput.parentElement;
            
            // File preview functionality
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const preview = document.createElement('div');
                        preview.className = 'absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-2xl';
                        preview.innerHTML = `
                            <div class="text-center">
                                <img src="${e.target.result}" class="max-w-32 max-h-32 rounded-lg shadow-lg mb-2" alt="Preview">
                                <p class="text-white text-sm font-medium">${file.name}</p>
                            </div>
                        `;
                        
                        // Remove existing preview
                        const existingPreview = dropzone.querySelector('.absolute');
                        if (existingPreview) {
                            existingPreview.remove();
                        }
                        
                        dropzone.style.position = 'relative';
                        dropzone.appendChild(preview);
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Drag and drop functionality
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropzone.addEventListener(eventName, preventDefaults, false);
            });

            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }

            ['dragenter', 'dragover'].forEach(eventName => {
                dropzone.addEventListener(eventName, highlight, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropzone.addEventListener(eventName, unhighlight, false);
            });

            function highlight(e) {
                dropzone.classList.add('border-purple-500', 'bg-purple-50', 'dark:bg-purple-900/20');
            }

            function unhighlight(e) {
                dropzone.classList.remove('border-purple-500', 'bg-purple-50', 'dark:bg-purple-900/20');
            }

            dropzone.addEventListener('drop', handleDrop, false);

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                fileInput.files = files;
                
                // Trigger change event
                const event = new Event('change', { bubbles: true });
                fileInput.dispatchEvent(event);
            }

            // 2FA code input formatting
            const otpInput = document.getElementById('one_time_password');
            if (otpInput) {
                otpInput.addEventListener('input', function(e) {
                    // Only allow numbers
                    this.value = this.value.replace(/[^0-9]/g, '');
                    
                    // Add spacing for better readability
                    if (this.value.length === 6) {
                        this.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
                    } else {
                        this.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
                    }
                });
            }
        });
    </script>
@endpush