<?php
require_once __DIR__ . '/../../api/lib.php';
hw_require_auth(['client']);
$authUser = hw_get_auth_user();

// CHECK MEMBERSHIP
$db = hw_db();
$membershipStmt = $db->prepare("SELECT id, plan_type, expires_at FROM user_memberships WHERE user_id = ? AND status = 'active' AND expires_at > NOW() LIMIT 1");
$membershipStmt->execute([$authUser['id']]);
if (!$membershipStmt->fetch()) {
    header('Location: /files/atasteofafricanmarketplace/dashboard/user/choose-plan.php');
    exit;
}

$page_title = 'My Profile | Herbal Wellness Care';
$page_description = 'Update your profile information';
$page_content = function () use ($authUser) { ?>
<style>
  nav.fixed { 
    display: none !important; 
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
  body > nav { 
    display: none !important; 
    visibility: hidden !important;
  }
  body {
    padding-top: 0 !important;
  }
</style>
<link rel="stylesheet" href="/files/atasteofafricanmarketplace/assets/dashboard.css">

<div class="dashboard-container">
  <!-- Sidebar -->
  <div class="dashboard-sidebar">
    <div class="sidebar-header">
      <div class="sidebar-profile">
        <div class="profile-avatar">
          <?= strtoupper(substr($authUser['first_name'], 0, 1) . substr($authUser['last_name'], 0, 1)) ?>
        </div>
        <div class="profile-info">
          <h3><?= htmlspecialchars($authUser['first_name'] . ' ' . $authUser['last_name']) ?></h3>
          <p>Wellness Member</p>
        </div>
      </div>
    </div>
    <nav class="sidebar-nav">
      <a href="/files/atasteofafricanmarketplace/dashboard/user/index.php"><i class="fas fa-home"></i>Home</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/appointments.php"><i class="fas fa-calendar-check"></i>Appointments</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/messages.php"><i class="fas fa-comments"></i>Messages</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/records.php"><i class="fas fa-file-medical"></i>Records</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/profile.php" class="active"><i class="fas fa-user"></i>Profile & Support</a>
      <hr class="sidebar-divider">
      <a href="/files/atasteofafricanmarketplace/store.php"><i class="fas fa-store"></i>Wellness Store</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/membership.php"><i class="fas fa-crown"></i>My Membership</a>
      <a href="/files/atasteofafricanmarketplace/dashboard/user/billing.php"><i class="fas fa-file-invoice-dollar"></i>Billing</a>
      <hr class="sidebar-divider">
      <a href="/files/atasteofafricanmarketplace/index.php"><i class="fas fa-arrow-left"></i>Back to Home</a>
    </nav>
    <div class="sidebar-footer">
      <a href="/files/atasteofafricanmarketplace/api/auth/logout.php" style="display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13px; font-weight: 500; padding: 10px 0; border-top: 1px solid rgba(212, 173, 49, 0.15); transition: all 0.3s;"><i class="fas fa-sign-out-alt"></i>Sign Out</a>
    </div>
  </div>

  <!-- Main Content -->
  <div class="dashboard-content">
    <main>
      <!-- Header -->
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 16px;">
        <div>
          <h1 style="font-size: 32px; font-weight: 800; color: #0b3d2e; margin: 0 0 8px 0;">Profile & Settings</h1>
          <p style="font-size: 16px; color: #64748b; margin: 0;">Manage your account and preferences</p>
        </div>
      </div>

      <!-- Profile Header Card -->
      <div style="background: linear-gradient(135deg, #0f5240 0%, #146651 100%); padding: 32px; border-radius: 16px; margin-bottom: 32px; box-shadow: 0 8px 24px rgba(15, 82, 64, 0.3); position: relative; overflow: hidden;">
        <div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;"></div>
        <div style="position: absolute; bottom: -80px; left: -80px; width: 250px; height: 250px; background: rgba(255, 255, 255, 0.03); border-radius: 50%;"></div>
        
        <div style="display: flex; gap: 24px; align-items: center; position: relative; z-index: 1; flex-wrap: wrap;">
          <div style="position: relative;">
            <div style="width: 100px; height: 100px; border-radius: 20px; background: linear-gradient(135deg, #d4ad31, #c9a227); color: white; font-weight: 800; font-size: 36px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); border: 4px solid rgba(255, 255, 255, 0.2);">
              <?= strtoupper(substr($authUser['first_name'], 0, 1) . substr($authUser['last_name'], 0, 1)) ?>
            </div>
            <button onclick="changeAvatar()" style="position: absolute; bottom: -8px; right: -8px; width: 36px; height: 36px; border-radius: 50%; background: white; border: 3px solid #0f5240; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
              <i class="fas fa-camera" style="color: #0f5240; font-size: 14px;"></i>
            </button>
          </div>
          
          <div style="flex: 1; min-width: 200px;">
            <h2 style="font-size: 28px; font-weight: 800; color: white; margin: 0 0 8px 0;">
              <?= htmlspecialchars($authUser['first_name'] . ' ' . $authUser['last_name']) ?>
            </h2>
            <p style="color: rgba(255, 255, 255, 0.9); margin: 0 0 12px 0; font-size: 15px; display: flex; align-items: center; gap: 8px;">
              <i class="fas fa-envelope"></i>
              <?= htmlspecialchars($authUser['email']) ?>
            </p>
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
              <span style="background: rgba(255, 255, 255, 0.2); color: white; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px;">
                <i class="fas fa-shield-alt"></i>
                Verified Member
              </span>
              <span style="background: rgba(212, 173, 49, 0.3); color: white; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px;">
                <i class="fas fa-crown"></i>
                Active Plan
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab Navigation -->
      <div style="background: white; padding: 16px 24px; border-radius: 16px 16px 0 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid #f0f9f6;">
        <button onclick="switchTab('personal')" id="tab-personal" class="profile-tab active" style="padding: 12px 24px; border: none; background: linear-gradient(135deg, #0f5240, #146651); color: white; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;">
          <i class="fas fa-user"></i>
          Personal Info
        </button>
        <button onclick="switchTab('security')" id="tab-security" class="profile-tab" style="padding: 12px 24px; border: none; background: transparent; color: #64748b; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;">
          <i class="fas fa-lock"></i>
          Security
        </button>
        <button onclick="switchTab('preferences')" id="tab-preferences" class="profile-tab" style="padding: 12px 24px; border: none; background: transparent; color: #64748b; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;">
          <i class="fas fa-cog"></i>
          Preferences
        </button>
        <button onclick="switchTab('support')" id="tab-support" class="profile-tab" style="padding: 12px 24px; border: none; background: transparent; color: #64748b; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;">
          <i class="fas fa-life-ring"></i>
          Support
        </button>
      </div>

      <!-- Tab Contents Container -->
      <div style="background: white; padding: 32px; border-radius: 0 0 16px 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
        
        <!-- Personal Info Tab -->
        <div id="content-personal" class="tab-content">
          <div style="max-width: 800px;">
            <h3 style="font-size: 20px; font-weight: 700; color: #0b3d2e; margin: 0 0 8px 0;">Personal Information</h3>
            <p style="color: #64748b; margin: 0 0 24px 0;">Update your personal details and contact information</p>
            
            <form id="profile-form" style="display: flex; flex-direction: column; gap: 24px;">
              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                  <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                    First Name <span style="color: #ef4444;">*</span>
                  </label>
                  <input id="first_name" name="first_name" value="<?= htmlspecialchars($authUser['first_name']) ?>" required 
                         style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
                </div>
                <div>
                  <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                    Last Name <span style="color: #ef4444;">*</span>
                  </label>
                  <input id="last_name" name="last_name" value="<?= htmlspecialchars($authUser['last_name']) ?>" required 
                         style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
                </div>
              </div>
              
              <div>
                <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                  Email Address <span style="color: #ef4444;">*</span>
                </label>
                <input id="email" name="email" type="email" value="<?= htmlspecialchars($authUser['email']) ?>" required 
                       style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
              </div>

              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                  <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                    Phone Number
                  </label>
                  <input id="phone" name="phone" type="tel" placeholder="(555) 123-4567" 
                         style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
                </div>
                <div>
                  <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                    Date of Birth
                  </label>
                  <input id="dob" name="dob" type="date" 
                         style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
                </div>
              </div>

              <div style="padding-top: 20px; border-top: 2px solid #f0f9f6; display: flex; gap: 12px; align-items: center;">
                <button type="submit" style="background: linear-gradient(135deg, #0f5240, #146651); color: white; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(15, 82, 64, 0.3); transition: all 0.3s;">
                  <i class="fas fa-save"></i>
                  Save Changes
                </button>
                <span id="status-personal" style="font-size: 14px; color: #64748b;"></span>
              </div>
            </form>
          </div>
        </div>

        <!-- Security Tab -->
        <div id="content-security" class="tab-content" style="display: none;">
          <div style="max-width: 800px;">
            <h3 style="font-size: 20px; font-weight: 700; color: #0b3d2e; margin: 0 0 8px 0;">Security Settings</h3>
            <p style="color: #64748b; margin: 0 0 24px 0;">Manage your password and security preferences</p>
            
            <form id="security-form" style="display: flex; flex-direction: column; gap: 24px;">
              <div style="background: #fef9e7; border-left: 4px solid #d4ad31; padding: 16px; border-radius: 8px; display: flex; gap: 12px;">
                <i class="fas fa-info-circle" style="color: #d4ad31; font-size: 20px; flex-shrink: 0; margin-top: 2px;"></i>
                <div>
                  <p style="font-weight: 600; color: #0b3d2e; margin: 0 0 4px 0;">Password Requirements</p>
                  <p style="font-size: 13px; color: #64748b; margin: 0;">Your password must be at least 8 characters long and include uppercase, lowercase, and numbers.</p>
                </div>
              </div>

              <div>
                <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                  Current Password
                </label>
                <input id="current_password" name="current_password" type="password" 
                       style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
              </div>

              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                  <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                    New Password
                  </label>
                  <input id="new_password" name="new_password" type="password" minlength="8" 
                         style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
                </div>
                <div>
                  <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                    Confirm New Password
                  </label>
                  <input id="confirm_password" name="confirm_password" type="password" minlength="8" 
                         style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s;" />
                </div>
              </div>

              <div style="padding-top: 20px; border-top: 2px solid #f0f9f6;">
                <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 16px 0;">Two-Factor Authentication</h4>
                <div style="background: #f0f9f6; padding: 20px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;">
                  <div>
                    <p style="font-weight: 600; color: #0b3d2e; margin: 0 0 4px 0;">Enable 2FA</p>
                    <p style="font-size: 13px; color: #64748b; margin: 0;">Add an extra layer of security to your account</p>
                  </div>
                  <button type="button" onclick="enable2FA()" style="background: white; border: 2px solid #0f5240; color: #0f5240; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
                    <i class="fas fa-shield-alt"></i> Enable
                  </button>
                </div>
              </div>

              <div style="padding-top: 20px; border-top: 2px solid #f0f9f6; display: flex; gap: 12px; align-items: center;">
                <button type="submit" style="background: linear-gradient(135deg, #0f5240, #146651); color: white; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(15, 82, 64, 0.3); transition: all 0.3s;">
                  <i class="fas fa-lock"></i>
                  Update Password
                </button>
                <span id="status-security" style="font-size: 14px; color: #64748b;"></span>
              </div>
            </form>
          </div>
        </div>

        <!-- Preferences Tab -->
        <div id="content-preferences" class="tab-content" style="display: none;">
          <div style="max-width: 800px;">
            <h3 style="font-size: 20px; font-weight: 700; color: #0b3d2e; margin: 0 0 8px 0;">Preferences</h3>
            <p style="color: #64748b; margin: 0 0 24px 0;">Customize your experience and notification settings</p>
            
            <div style="display: flex; flex-direction: column; gap: 20px;">
              <!-- Email Notifications -->
              <div style="background: #f0f9f6; padding: 24px; border-radius: 12px;">
                <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 16px 0; display: flex; align-items: center; gap: 10px;">
                  <i class="fas fa-envelope" style="color: #0f5240;"></i>
                  Email Notifications
                </h4>
                <div style="display: flex; flex-direction: column; gap: 16px;">
                  <label style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px; background: white; border-radius: 8px;">
                    <span style="font-size: 14px; color: #0b3d2e;">Appointment reminders</span>
                    <input type="checkbox" checked style="width: 20px; height: 20px; cursor: pointer;" />
                  </label>
                  <label style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px; background: white; border-radius: 8px;">
                    <span style="font-size: 14px; color: #0b3d2e;">New messages from coach</span>
                    <input type="checkbox" checked style="width: 20px; height: 20px; cursor: pointer;" />
                  </label>
                  <label style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px; background: white; border-radius: 8px;">
                    <span style="font-size: 14px; color: #0b3d2e;">Wellness tips and updates</span>
                    <input type="checkbox" checked style="width: 20px; height: 20px; cursor: pointer;" />
                  </label>
                  <label style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 12px; background: white; border-radius: 8px;">
                    <span style="font-size: 14px; color: #0b3d2e;">Marketing and promotions</span>
                    <input type="checkbox" style="width: 20px; height: 20px; cursor: pointer;" />
                  </label>
                </div>
              </div>

              <!-- Display Preferences -->
              <div style="background: #fef9e7; padding: 24px; border-radius: 12px;">
                <h4 style="font-size: 16px; font-weight: 700; color: #0b3d2e; margin: 0 0 16px 0; display: flex; align-items: center; gap: 10px;">
                  <i class="fas fa-palette" style="color: #d4ad31;"></i>
                  Display Preferences
                </h4>
                <div style="display: flex; flex-direction: column; gap: 16px;">
                  <div>
                    <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                      Language
                    </label>
                    <select style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; background: white; cursor: pointer;">
                      <option>English</option>
                      <option>Spanish</option>
                      <option>French</option>
                    </select>
                  </div>
                  <div>
                    <label style="display: block; font-size: 14px; font-weight: 600; color: #0b3d2e; margin-bottom: 8px;">
                      Timezone
                    </label>
                    <select style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; background: white; cursor: pointer;">
                      <option>Eastern Time (ET)</option>
                      <option>Central Time (CT)</option>
                      <option>Mountain Time (MT)</option>
                      <option>Pacific Time (PT)</option>
                    </select>
                  </div>
                </div>
              </div>

              <button onclick="savePreferences()" style="background: linear-gradient(135deg, #0f5240, #146651); color: white; padding: 14px 32px; border-radius: 10px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(15, 82, 64, 0.3); transition: all 0.3s; align-self: flex-start;">
                <i class="fas fa-save"></i>
                Save Preferences
              </button>
            </div>
          </div>
        </div>

        <!-- Support Tab -->
        <div id="content-support" class="tab-content" style="display: none;">
          <div style="max-width: 800px;">
            <h3 style="font-size: 20px; font-weight: 700; color: #0b3d2e; margin: 0 0 8px 0;">Help & Support</h3>
            <p style="color: #64748b; margin: 0 0 24px 0;">Get help with your account or contact our support team</p>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 32px;">
              <div style="background: linear-gradient(135deg, #10b981, #059669); padding: 24px; border-radius: 12px; box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3); cursor: pointer; transition: all 0.3s;" onclick="window.location.href='mailto:support@herbalwellness.com'">
                <i class="fas fa-envelope" style="font-size: 32px; color: white; margin-bottom: 12px;"></i>
                <h4 style="font-size: 16px; font-weight: 700; color: white; margin: 0 0 6px 0;">Email Support</h4>
                <p style="font-size: 13px; color: rgba(255, 255, 255, 0.9); margin: 0;">support@herbalwellness.com</p>
              </div>

              <div style="background: linear-gradient(135deg, #3b82f6, #2563eb); padding: 24px; border-radius: 12px; box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3); cursor: pointer; transition: all 0.3s;" onclick="alert('Live chat feature coming soon!')">
                <i class="fas fa-comments" style="font-size: 32px; color: white; margin-bottom: 12px;"></i>
                <h4 style="font-size: 16px; font-weight: 700; color: white; margin: 0 0 6px 0;">Live Chat</h4>
                <p style="font-size: 13px; color: rgba(255, 255, 255, 0.9); margin: 0;">Chat with our team</p>
              </div>

              <div style="background: linear-gradient(135deg, #8b5cf6, #7c3aed); padding: 24px; border-radius: 12px; box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3); cursor: pointer; transition: all 0.3s;" onclick="window.location.href='tel:+15551234567'">
                <i class="fas fa-phone" style="font-size: 32px; color: white; margin-bottom: 12px;"></i>
                <h4 style="font-size: 16px; font-weight: 700; color: white; margin: 0 0 6px 0;">Phone Support</h4>
                <p style="font-size: 13px; color: rgba(255, 255, 255, 0.9); margin: 0;">(555) 123-4567</p>
              </div>
            </div>

            <!-- FAQ Section -->
            <div style="background: #f0f9f6; padding: 24px; border-radius: 12px; margin-bottom: 24px;">
              <h4 style="font-size: 18px; font-weight: 700; color: #0b3d2e; margin: 0 0 16px 0; display: flex; align-items: center; gap: 10px;">
                <i class="fas fa-question-circle" style="color: #0f5240;"></i>
                Frequently Asked Questions
              </h4>
              <div style="display: flex; flex-direction: column; gap: 12px;">
                <details style="background: white; padding: 16px; border-radius: 8px; cursor: pointer;">
                  <summary style="font-weight: 600; color: #0b3d2e; cursor: pointer;">How do I book an appointment?</summary>
                  <p style="margin: 12px 0 0 0; color: #64748b; font-size: 14px; line-height: 1.6;">You can book appointments by visiting the "All Coaches" page, selecting your preferred wellness coach, and choosing an available time slot.</p>
                </details>
                <details style="background: white; padding: 16px; border-radius: 8px; cursor: pointer;">
                  <summary style="font-weight: 600; color: #0b3d2e; cursor: pointer;">How can I change my membership plan?</summary>
                  <p style="margin: 12px 0 0 0; color: #64748b; font-size: 14px; line-height: 1.6;">Visit the "My Membership" section in your dashboard to view available plans and upgrade or modify your current subscription.</p>
                </details>
                <details style="background: white; padding: 16px; border-radius: 8px; cursor: pointer;">
                  <summary style="font-weight: 600; color: #0b3d2e; cursor: pointer;">What if I need to cancel an appointment?</summary>
                  <p style="margin: 12px 0 0 0; color: #64748b; font-size: 14px; line-height: 1.6;">You can cancel appointments up to 24 hours before the scheduled time through the "Appointments" page.</p>
                </details>
              </div>
            </div>
          </div>
        </div>

      </div>
    </main>
  </div>
</div>

<style>
input:focus, select:focus, textarea:focus {
  border-color: #0f5240 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 82, 64, 0.1);
}

.profile-tab:hover {
  background: #f0f9f6 !important;
  color: #0f5240 !important;
  transform: translateY(-2px);
}

.profile-tab.active {
  background: linear-gradient(135deg, #0f5240, #146651) !important;
  color: white !important;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

button:active {
  transform: translateY(0);
}

details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f9f6;
}
</style>

<script>
// Tab switching
function switchTab(tabName) {
  // Hide all content
  document.querySelectorAll('.tab-content').forEach(content => {
    content.style.display = 'none';
  });
  
  // Remove active class from all tabs
  document.querySelectorAll('.profile-tab').forEach(tab => {
    tab.style.background = 'transparent';
    tab.style.color = '#64748b';
    tab.classList.remove('active');
  });
  
  // Show selected content
  document.getElementById(`content-${tabName}`).style.display = 'block';
  
  // Add active class to selected tab
  const activeTab = document.getElementById(`tab-${tabName}`);
  activeTab.classList.add('active');
}

// Personal info form
document.getElementById('profile-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  
  const statusEl = document.getElementById('status-personal');
  const submitBtn = e.target.querySelector('button[type="submit"]');
  
  const formData = {
    first_name: document.getElementById('first_name').value.trim(),
    last_name: document.getElementById('last_name').value.trim(),
    email: document.getElementById('email').value.trim()
  };
  
  if (!formData.first_name || !formData.last_name) {
    statusEl.textContent = '❌ First and last name are required.';
    statusEl.style.color = '#ef4444';
    return;
  }
  
  if (!/\S+@\S+\.\S+/.test(formData.email)) {
    statusEl.textContent = '❌ Please enter a valid email address.';
    statusEl.style.color = '#ef4444';
    return;
  }
  
  statusEl.textContent = '⏳ Updating...';
  statusEl.style.color = '#3b82f6';
  submitBtn.disabled = true;
  submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
  
  try {
    const response = await fetch('/files/atasteofafricanmarketplace/api/users/update-profile.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify(formData)
    });
    
    const result = await response.json();
    
    if (response.ok) {
      statusEl.textContent = '✓ Profile updated successfully!';
      statusEl.style.color = '#10b981';
      setTimeout(() => window.location.reload(), 1500);
    } else {
      statusEl.textContent = '❌ ' + (result.message || 'Update failed');
      statusEl.style.color = '#ef4444';
    }
  } catch (error) {
    statusEl.textContent = '❌ Network error. Please try again.';
    statusEl.style.color = '#ef4444';
  } finally {
    submitBtn.disabled = false;
    submitBtn.innerHTML = '<i class="fas fa-save"></i> Save Changes';
  }
});

// Security form
document.getElementById('security-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  
  const statusEl = document.getElementById('status-security');
  const submitBtn = e.target.querySelector('button[type="submit"]');
  
  const newPassword = document.getElementById('new_password').value;
  const confirmPassword = document.getElementById('confirm_password').value;
  
  if (!newPassword) {
    statusEl.textContent = '❌ Please enter a new password.';
    statusEl.style.color = '#ef4444';
    return;
  }
  
  if (newPassword !== confirmPassword) {
    statusEl.textContent = '❌ Passwords do not match.';
    statusEl.style.color = '#ef4444';
    return;
  }
  
  if (newPassword.length < 8) {
    statusEl.textContent = '❌ Password must be at least 8 characters.';
    statusEl.style.color = '#ef4444';
    return;
  }
  
  statusEl.textContent = '⏳ Updating password...';
  statusEl.style.color = '#3b82f6';
  submitBtn.disabled = true;
  
  try {
    const response = await fetch('/files/atasteofafricanmarketplace/api/users/update-profile.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ password: newPassword })
    });
    
    const result = await response.json();
    
    if (response.ok) {
      statusEl.textContent = '✓ Password updated successfully!';
      statusEl.style.color = '#10b981';
      document.getElementById('new_password').value = '';
      document.getElementById('confirm_password').value = '';
      document.getElementById('current_password').value = '';
    } else {
      statusEl.textContent = '❌ ' + (result.message || 'Update failed');
      statusEl.style.color = '#ef4444';
    }
  } catch (error) {
    statusEl.textContent = '❌ Network error. Please try again.';
    statusEl.style.color = '#ef4444';
  } finally {
    submitBtn.disabled = false;
  }
});

// Helper functions
function changeAvatar() {
  alert('Avatar upload feature coming soon!');
}

function enable2FA() {
  alert('Two-factor authentication setup coming soon!');
}

function savePreferences() {
  alert('Preferences saved! (Feature in development)');
}

function confirmDeleteAccount() {
  if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
    if (confirm('This will permanently delete all your data, appointments, and messages. Are you absolutely sure?')) {
      alert('Account deletion feature will be implemented with proper security measures.');
    }
  }
}
</script>

<?php };
include __DIR__ . '/../../partials/layout.php';
?>
