

<?php $__env->startSection('title', 'Settings - WedBooker'); ?>
<?php $__env->startSection('page-title', 'Account Settings'); ?>
<?php $__env->startSection('page-description', 'Manage your account preferences'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    
    <!-- Profile Settings -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Profile Information</h3>
            <button onclick="document.getElementById('avatarInput').click()" class="flex items-center gap-2 text-purple-400 hover:text-purple-300 transition">
                <i class="fas fa-camera"></i>
                <span class="text-sm">Change Photo</span>
            </button>
            <form id="avatarForm" action="<?php echo e(route('settings.upload-avatar')); ?>" method="POST" enctype="multipart/form-data" style="display: none;">
                <?php echo csrf_field(); ?>
                <input type="file" id="avatarInput" name="avatar" accept="image/*" onchange="this.form.submit()">
            </form>
        </div>
        
        <form action="<?php echo e(route('settings.update-profile')); ?>" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PUT'); ?>
            <div class="flex items-center gap-4 mb-6">
                <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=John+Doe" class="w-20 h-20 rounded-full border-2 border-purple-500">
                <div>
                    <p class="text-white font-semibold">John Doe</p>
                    <p class="text-gray-400 text-sm">Member since January 2024</p>
                </div>
            </div>
            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-white mb-2">First Name *</label>
                    <input type="text" name="first_name" value="John" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Last Name *</label>
                    <input type="text" name="last_name" value="Doe" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Email Address *</label>
                    <input type="email" name="email" value="john@example.com" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" required>
                </div>
                <div>
                    <label class="block text-white mb-2">Phone Number</label>
                    <input type="tel" name="phone" value="+44 123 456 789" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Timezone</label>
                    <select name="timezone" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                        <option>UTC/GMT</option>
                        <option selected>Europe/London</option>
                        <option>America/New_York</option>
                        <option>Asia/Dubai</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Date Format</label>
                    <select name="date_format" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                        <option>DD/MM/YYYY</option>
                        <option selected>MM/DD/YYYY</option>
                        <option>YYYY-MM-DD</option>
                    </select>
                </div>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
                    <i class="fas fa-save mr-2"></i>Update Profile
                </button>
                <button type="button" onclick="resetForm()" class="px-6 py-2 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition">
                    Reset
                </button>
            </div>
        </form>
    </div>
    
    <!-- Change Password -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Change Password</h3>
        <form action="<?php echo e(route('settings.update-password')); ?>" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PUT'); ?>
            <div>
                <label class="block text-white mb-2">Current Password *</label>
                <input type="password" name="current_password" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" required>
                <p class="text-gray-500 text-xs mt-1">Enter your current password to verify your identity</p>
            </div>
            <div>
                <label class="block text-white mb-2">New Password *</label>
                <input type="password" name="password" id="new_password" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" required>
                <div class="mt-2">
                    <div class="flex gap-2">
                        <div class="flex-1 h-1 bg-white/10 rounded-full overflow-hidden">
                            <div id="passwordStrength" class="h-full w-0 bg-red-500 rounded-full transition-all duration-300"></div>
                        </div>
                    </div>
                    <p id="strengthText" class="text-gray-500 text-xs mt-1"></p>
                </div>
            </div>
            <div>
                <label class="block text-white mb-2">Confirm New Password *</label>
                <input type="password" name="password_confirmation" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" required>
            </div>
            <button type="submit" class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                <i class="fas fa-key mr-2"></i>Change Password
            </button>
        </form>
    </div>
    
    <!-- Notification Preferences -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Notification Preferences</h3>
        <form action="<?php echo e(route('settings.update-notifications')); ?>" method="POST" class="space-y-3">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PUT'); ?>
            <label class="flex items-center justify-between p-3 bg-white/5 rounded-lg cursor-pointer hover:bg-white/10 transition">
                <div>
                    <span class="text-gray-300">Email me when guests RSVP</span>
                    <p class="text-gray-500 text-xs">Receive instant notifications when guests submit their RSVP</p>
                </div>
                <div class="relative">
                    <input type="checkbox" name="notifications[rsvp]" value="1" checked class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:bg-purple-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
                </div>
            </label>
            <label class="flex items-center justify-between p-3 bg-white/5 rounded-lg cursor-pointer hover:bg-white/10 transition">
                <div>
                    <span class="text-gray-300">Email me when bookings are made</span>
                    <p class="text-gray-500 text-xs">Get notified about new accommodation, transport, and activity bookings</p>
                </div>
                <div class="relative">
                    <input type="checkbox" name="notifications[bookings]" value="1" checked class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:bg-purple-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
                </div>
            </label>
            <label class="flex items-center justify-between p-3 bg-white/5 rounded-lg cursor-pointer hover:bg-white/10 transition">
                <div>
                    <span class="text-gray-300">Weekly summary reports</span>
                    <p class="text-gray-500 text-xs">Receive a weekly email with guest statistics and booking updates</p>
                </div>
                <div class="relative">
                    <input type="checkbox" name="notifications[weekly_report]" value="1" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:bg-purple-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
                </div>
            </label>
            <label class="flex items-center justify-between p-3 bg-white/5 rounded-lg cursor-pointer hover:bg-white/10 transition">
                <div>
                    <span class="text-gray-300">Marketing emails</span>
                    <p class="text-gray-500 text-xs">Receive tips, updates, and special offers</p>
                </div>
                <div class="relative">
                    <input type="checkbox" name="notifications[marketing]" value="1" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:bg-purple-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
                </div>
            </label>
            <button type="submit" class="mt-4 px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                <i class="fas fa-save mr-2"></i>Save Preferences
            </button>
        </form>
    </div>
    
    <!-- Account Security -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Account Security</h3>
        <div class="space-y-4">
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                <div>
                    <p class="text-white font-semibold">Two-Factor Authentication</p>
                    <p class="text-gray-400 text-sm">Add an extra layer of security to your account</p>
                </div>
                <button onclick="enable2FA()" class="px-4 py-2 bg-green-600/20 text-green-400 rounded-lg hover:bg-green-600/30 transition">
                    <i class="fas fa-shield-alt mr-2"></i>Enable 2FA
                </button>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                <div>
                    <p class="text-white font-semibold">Sessions</p>
                    <p class="text-gray-400 text-sm">Manage your active sessions</p>
                </div>
                <button onclick="viewSessions()" class="px-4 py-2 bg-purple-600/20 text-purple-400 rounded-lg hover:bg-purple-600/30 transition">
                    <i class="fas fa-laptop mr-2"></i>View Sessions
                </button>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                <div>
                    <p class="text-white font-semibold">Login Activity</p>
                    <p class="text-gray-400 text-sm">View your recent login activity</p>
                </div>
                <button onclick="viewLoginActivity()" class="px-4 py-2 bg-blue-600/20 text-blue-400 rounded-lg hover:bg-blue-600/30 transition">
                    <i class="fas fa-history mr-2"></i>View Activity
                </button>
            </div>
        </div>
    </div>
    
    <!-- Danger Zone -->
    <div class="glass-card rounded-2xl p-6 border border-red-500/20" data-aos="fade-up">
        <h3 class="text-xl font-bold text-red-400 mb-4">⚠️ Danger Zone</h3>
        <div class="space-y-4">
            <div class="flex items-center justify-between p-3 bg-red-500/5 rounded-lg">
                <div>
                    <p class="text-white font-semibold">Delete Account</p>
                    <p class="text-gray-400 text-sm">Permanently delete your account and all data</p>
                </div>
                <button onclick="deleteAccount()" class="px-4 py-2 bg-red-600/20 text-red-400 rounded-lg hover:bg-red-600/30 transition">
                    <i class="fas fa-trash mr-2"></i>Delete Account
                </button>
            </div>
            <div class="flex items-center justify-between p-3 bg-red-500/5 rounded-lg">
                <div>
                    <p class="text-white font-semibold">Export Data</p>
                    <p class="text-gray-400 text-sm">Download all your personal data</p>
                </div>
                <button onclick="exportData()" class="px-4 py-2 bg-blue-600/20 text-blue-400 rounded-lg hover:bg-blue-600/30 transition">
                    <i class="fas fa-download mr-2"></i>Export Data
                </button>
            </div>
        </div>
    </div>
</div>

<form id="deleteAccountForm" method="POST" style="display: none;">
    <?php echo csrf_field(); ?>
    <?php echo method_field('DELETE'); ?>
</form>

<?php $__env->startPush('scripts'); ?>
<script>
    // Password strength checker
    const passwordInput = document.getElementById('new_password');
    const strengthBar = document.getElementById('passwordStrength');
    const strengthText = document.getElementById('strengthText');
    
    if(passwordInput) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            let strength = 0;
            
            if(password.length >= 8) strength++;
            if(password.match(/[a-z]+/)) strength++;
            if(password.match(/[A-Z]+/)) strength++;
            if(password.match(/[0-9]+/)) strength++;
            if(password.match(/[$@#&!]+/)) strength++;
            
            const width = (strength / 5) * 100;
            strengthBar.style.width = width + '%';
            
            if(strength <= 2) {
                strengthBar.style.backgroundColor = '#ef4444';
                strengthText.innerHTML = 'Weak password - add more characters, numbers, and symbols';
                strengthText.style.color = '#ef4444';
            } else if(strength <= 4) {
                strengthBar.style.backgroundColor = '#f59e0b';
                strengthText.innerHTML = 'Medium password - good, but could be stronger';
                strengthText.style.color = '#f59e0b';
            } else {
                strengthBar.style.backgroundColor = '#10b981';
                strengthText.innerHTML = 'Strong password!';
                strengthText.style.color = '#10b981';
            }
            
            if(!password) {
                strengthBar.style.width = '0%';
                strengthText.innerHTML = '';
            }
        });
    }
    
    function resetForm() {
        if(confirm('Reset all changes? Your unsaved changes will be lost.')) {
            location.reload();
        }
    }
    
    function enable2FA() {
        alert('Two-factor authentication setup would begin here');
        // In real app: window.location.href = "<?php echo e(route('settings.2fa')); ?>";
    }
    
    function viewSessions() {
        alert('Active sessions list would appear here');
        // In real app: window.location.href = "<?php echo e(route('settings.sessions')); ?>";
    }
    
    function viewLoginActivity() {
        alert('Login activity log would appear here');
        // In real app: window.location.href = "<?php echo e(route('settings.login-activity')); ?>";
    }
    
    function deleteAccount() {
        if(confirm('⚠️ WARNING: This action is permanent and cannot be undone. All your wedding data, guest lists, and bookings will be deleted forever. Are you absolutely sure you want to delete your account?')) {
            if(confirm('Please confirm again: Type "DELETE" in the box to proceed.')) {
                const confirmation = prompt('Type "DELETE" to confirm account deletion:');
                if(confirmation === 'DELETE') {
                    const form = document.getElementById('deleteAccountForm');
                    form.action = "<?php echo e(route('settings.delete-account')); ?>";
                    form.submit();
                } else {
                    alert('Account deletion cancelled. You did not type DELETE correctly.');
                }
            }
        }
    }
    
    function exportData() {
        if(confirm('Download all your personal data? This may take a few moments.')) {
            window.location.href = "<?php echo e(route('settings.export-data')); ?>";
        }
    }
    
    // Add animation to cards
    document.querySelectorAll('.glass-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\skietagency\wedding\code\resources\views/settings/index.blade.php ENDPATH**/ ?>