{{--
    Account Settings - Professional Bootstrap Design
    Professional Account Management Page
    
    @author David Valera Melendez <david@valera-melendez.de>
    @created 2025-08-09
    @location Made in Germany 🇩🇪
--}}

@extends('layouts.app')

@section('title', 'Account Settings - Professional Resume Builder')
@section('page_class', 'account-settings-page')

@section('content')
<div class="account-settings-container">
    <!-- Page Header -->
    <section class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">Account Settings</h1>
                <p class="page-subtitle">Manage your account preferences and security settings</p>
            </div>
            <a href="{{ route('profile.show') }}" class="btn secondary-cta">
                <i class="bi bi-arrow-left"></i>
                Back to Profile
            </a>
        </div>
    </section>

    <!-- Settings Navigation Tabs -->
    <section class="settings-nav">
        <div class="card nav-card">
            <div class="card-body">
                <nav class="settings-tabs">
                    <button class="tab-btn active" data-tab="security">
                        <i class="bi bi-shield-lock"></i>
                        Security
                    </button>
                    <button class="tab-btn" data-tab="preferences">
                        <i class="bi bi-gear"></i>
                        Preferences
                    </button>
                    <button class="tab-btn" data-tab="notifications">
                        <i class="bi bi-bell"></i>
                        Notifications
                    </button>
                    <button class="tab-btn" data-tab="privacy">
                        <i class="bi bi-eye-slash"></i>
                        Privacy
                    </button>
                </nav>
            </div>
        </div>
    </section>

    <!-- Settings Content -->
    <section class="settings-content">
        <!-- Security Settings Tab -->
        <div class="tab-content active" id="security-tab">
            <div class="row g-4">
                <!-- Change Password Card -->
                <div class="col-lg-6">
                    <div class="card settings-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-key"></i>
                                Change Password
                            </h5>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('account.password.update') }}">
                                @csrf
                                @method('PUT')
                                
                                <!-- Current Password -->
                                <div class="form-floating mb-3">
                                    <input type="password" 
                                           class="form-control @error('current_password') is-invalid @enderror" 
                                           id="current_password" 
                                           name="current_password" 
                                           placeholder="Current Password"
                                           required>
                                    <label for="current_password">Current Password</label>
                                    @error('current_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <!-- New Password -->
                                <div class="form-floating mb-3">
                                    <input type="password" 
                                           class="form-control @error('password') is-invalid @enderror" 
                                           id="password" 
                                           name="password" 
                                           placeholder="New Password"
                                           required>
                                    <label for="password">New Password</label>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <!-- Confirm Password -->
                                <div class="form-floating mb-3">
                                    <input type="password" 
                                           class="form-control" 
                                           id="password_confirmation" 
                                           name="password_confirmation" 
                                           placeholder="Confirm New Password"
                                           required>
                                    <label for="password_confirmation">Confirm New Password</label>
                                </div>
                                
                                <button type="submit" class="btn primary-cta">
                                    <i class="bi bi-shield-check"></i>
                                    Update Password
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- Account Security Card -->
                <div class="col-lg-6">
                    <div class="card settings-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-shield-check"></i>
                                Account Security
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="security-status">
                                <div class="status-item">
                                    <div class="status-indicator verified">
                                        <i class="bi bi-check-circle-fill"></i>
                                    </div>
                                    <div class="status-content">
                                        <span class="status-title">Email Verified</span>
                                        <span class="status-description">Your email is verified and secure</span>
                                    </div>
                                </div>
                                
                                <div class="status-item">
                                    <div class="status-indicator">
                                        <i class="bi bi-clock"></i>
                                    </div>
                                    <div class="status-content">
                                        <span class="status-title">Last Password Change</span>
                                        <span class="status-description">{{ $user->updated_at->diffForHumans() }}</span>
                                    </div>
                                </div>
                                
                                <div class="status-item">
                                    <div class="status-indicator active">
                                        <i class="bi bi-circle-fill"></i>
                                    </div>
                                    <div class="status-content">
                                        <span class="status-title">Account Status</span>
                                        <span class="status-description">Active and in good standing</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preferences Tab -->
        <div class="tab-content" id="preferences-tab">
            <div class="card settings-card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-palette"></i>
                        Display Preferences
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('account.preferences.update') }}">
                        @csrf
                        @method('PUT')
                        
                        <div class="row g-3">
                            <!-- Theme Preference -->
                            <div class="col-md-6">
                                <label class="form-label">Theme</label>
                                <select class="form-select" name="theme">
                                    <option value="light" selected>Light Theme</option>
                                    <option value="dark">Dark Theme</option>
                                    <option value="auto">Auto (System)</option>
                                </select>
                            </div>
                            
                            <!-- Language Preference -->
                            <div class="col-md-6">
                                <label class="form-label">Language</label>
                                <select class="form-select" name="language">
                                    <option value="en" selected>English</option>
                                    <option value="es">Español</option>
                                    <option value="de">Deutsch</option>
                                    <option value="fr">Français</option>
                                </select>
                            </div>
                            
                            <!-- Timezone -->
                            <div class="col-md-6">
                                <label class="form-label">Timezone</label>
                                <select class="form-select" name="timezone">
                                    <option value="Europe/Berlin" selected>Europe/Berlin (GMT+1)</option>
                                    <option value="America/New_York">America/New_York (GMT-5)</option>
                                    <option value="America/Los_Angeles">America/Los_Angeles (GMT-8)</option>
                                    <option value="Asia/Tokyo">Asia/Tokyo (GMT+9)</option>
                                </select>
                            </div>
                            
                            <!-- Date Format -->
                            <div class="col-md-6">
                                <label class="form-label">Date Format</label>
                                <select class="form-select" name="date_format">
                                    <option value="d/m/Y" selected>DD/MM/YYYY</option>
                                    <option value="m/d/Y">MM/DD/YYYY</option>
                                    <option value="Y-m-d">YYYY-MM-DD</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <button type="submit" class="btn primary-cta">
                                <i class="bi bi-check-circle"></i>
                                Save Preferences
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Notifications Tab -->
        <div class="tab-content" id="notifications-tab">
            <div class="card settings-card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-bell"></i>
                        Notification Settings
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('account.preferences.update') }}">
                        @csrf
                        @method('PUT')
                        
                        <div class="notification-settings">
                            <!-- Email Notifications -->
                            <div class="notification-group">
                                <h6 class="notification-group-title">Email Notifications</h6>
                                <div class="notification-item">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="email_resume_updates" name="email_resume_updates" checked>
                                        <label class="form-check-label" for="email_resume_updates">
                                            Resume Updates
                                        </label>
                                    </div>
                                    <small class="text-muted">Get notified when your resume is updated or completed</small>
                                </div>
                                
                                <div class="notification-item">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="email_tips" name="email_tips" checked>
                                        <label class="form-check-label" for="email_tips">
                                            Tips & Suggestions
                                        </label>
                                    </div>
                                    <small class="text-muted">Receive helpful tips for improving your resume</small>
                                </div>
                                
                                <div class="notification-item">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="email_security" name="email_security" checked>
                                        <label class="form-check-label" for="email_security">
                                            Security Alerts
                                        </label>
                                    </div>
                                    <small class="text-muted">Important security notifications about your account</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <button type="submit" class="btn primary-cta">
                                <i class="bi bi-check-circle"></i>
                                Save Notification Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Privacy Tab -->
        <div class="tab-content" id="privacy-tab">
            <div class="row g-4">
                <!-- Privacy Settings -->
                <div class="col-lg-8">
                    <div class="card settings-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-shield-lock"></i>
                                Privacy Settings
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="privacy-settings">
                                <div class="privacy-item">
                                    <div class="privacy-header">
                                        <h6>Profile Visibility</h6>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="profile_public" name="profile_public">
                                            <label class="form-check-label" for="profile_public"></label>
                                        </div>
                                    </div>
                                    <p class="privacy-description">Make your profile visible to other users</p>
                                </div>
                                
                                <div class="privacy-item">
                                    <div class="privacy-header">
                                        <h6>Resume Sharing</h6>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="resume_sharing" name="resume_sharing" checked>
                                            <label class="form-check-label" for="resume_sharing"></label>
                                        </div>
                                    </div>
                                    <p class="privacy-description">Allow sharing of your resumes via public links</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Danger Zone -->
                <div class="col-lg-4">
                    <div class="card settings-card danger-zone">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-exclamation-triangle"></i>
                                Danger Zone
                            </h5>
                        </div>
                        <div class="card-body">
                            <p class="danger-description">
                                These actions are permanent and cannot be undone.
                            </p>
                            
                            <form method="POST" action="{{ route('profile.destroy') }}" onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">
                                    <i class="bi bi-trash"></i>
                                    Delete Account
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Tab functionality
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabId = this.dataset.tab + '-tab';
                
                // Remove active class from all tabs and contents
                tabBtns.forEach(b => b.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));
                
                // Add active class to clicked tab and corresponding content
                this.classList.add('active');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // Password strength indicator
        const passwordInput = document.getElementById('password');
        if (passwordInput) {
            passwordInput.addEventListener('input', function() {
                // Add password strength validation here if needed
            });
        }
        
        // Form submission loading states
        const forms = document.querySelectorAll('form');
        forms.forEach(form => {
            form.addEventListener('submit', function(e) {
                const submitBtn = form.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    const originalText = submitBtn.innerHTML;
                    submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Saving...';
                    
                    // Re-enable after 3 seconds to prevent permanent disable on validation errors
                    setTimeout(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    }, 3000);
                }
            });
        });
    });
</script>
@endpush
@endsection