<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
include ('include/header.php');
$page_title = WEB_NAME . " | My Profile";

// Fetch current admin data
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = :user_id");
$stmt->bindParam(':user_id', $_SESSION['user_id'], PDO::PARAM_INT);
$stmt->execute();
$admin_data = $stmt->fetch(PDO::FETCH_ASSOC);
?>
  <title>My Profile - <?php echo $site_data['web_name']; ?></title>

        <!-- Container Fluid-->
        <div class="container-fluid" id="container-wrapper">
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">My Profile</h1>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="dashboard.php">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">My Profile</li>
            </ol>
          </div>

          <div class="row mb-3">
            <!-- Profile Information Card -->
            <div class="col-xl-6 col-lg-6 mb-4">
              <div class="card h-100">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-primary">Profile Information</h6>
                </div>
                <div class="card-body">
                  <form id="profileForm">
                    <div class="form-group">
                      <label for="username"><strong>Username</strong></label>
                      <input type="text" 
                             class="form-control" 
                             id="username" 
                             name="username" 
                             value="<?php echo htmlspecialchars($admin_data['username']); ?>" 
                             required>
                      <small class="form-text text-muted">Your unique username</small>
                    </div>
                    
                    <div class="form-group">
                      <label for="email"><strong>Email Address</strong></label>
                      <input type="email" 
                             class="form-control" 
                             id="email" 
                             name="email" 
                             value="<?php echo htmlspecialchars($admin_data['email']); ?>" 
                             required>
                      <small class="form-text text-muted">Your email address</small>
                    </div>
                    
                    <div class="form-group">
                      <label for="full_name"><strong>Full Name</strong></label>
                      <input type="text" 
                             class="form-control" 
                             id="full_name" 
                             name="full_name" 
                             value="<?php echo htmlspecialchars($admin_data['full_name']); ?>">
                      <small class="form-text text-muted">Your full name (optional)</small>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                      <i class="fas fa-save"></i> Update Profile
                    </button>
                  </form>
                </div>
              </div>
            </div>
            
            <!-- Change Password Card -->
            <div class="col-xl-6 col-lg-6 mb-4">
              <div class="card h-100">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-danger">Change Password</h6>
                </div>
                <div class="card-body">
                  <form id="passwordForm">
                    <div class="form-group">
                      <label for="current_password"><strong>Current Password</strong></label>
                      <div style="position: relative;">
                        <input type="password" 
                               class="form-control" 
                               id="current_password" 
                               name="current_password" 
                               required>
                        <button type="button" 
                                onclick="togglePassword('current_password')" 
                                style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
                          <i class="fa fa-eye"></i>
                        </button>
                      </div>
                    </div>
                    
                    <div class="form-group">
                      <label for="new_password"><strong>New Password</strong></label>
                      <div style="position: relative;">
                        <input type="password" 
                               class="form-control" 
                               id="new_password" 
                               name="new_password" 
                               required
                               minlength="6">
                        <button type="button" 
                                onclick="togglePassword('new_password')" 
                                style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
                          <i class="fa fa-eye"></i>
                        </button>
                      </div>
                      <small class="form-text text-muted">Minimum 6 characters</small>
                    </div>
                    
                    <div class="form-group">
                      <label for="confirm_password"><strong>Confirm New Password</strong></label>
                      <div style="position: relative;">
                        <input type="password" 
                               class="form-control" 
                               id="confirm_password" 
                               name="confirm_password" 
                               required
                               minlength="6">
                        <button type="button" 
                                onclick="togglePassword('confirm_password')" 
                                style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
                          <i class="fa fa-eye"></i>
                        </button>
                      </div>
                    </div>
                    
                    <button type="submit" class="btn btn-danger">
                      <i class="fas fa-key"></i> Change Password
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Account Information Card -->
          <div class="row">
            <div class="col-lg-12">
              <div class="card mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Account Information</h6>
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-4 mb-3">
                      <div class="border-left-primary shadow h-100 py-2 pl-3">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Account ID</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">#<?php echo $admin_data['id']; ?></div>
                      </div>
                    </div>
                    <div class="col-md-4 mb-3">
                      <div class="border-left-success shadow h-100 py-2 pl-3">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Account Type</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                          <?php echo $admin_data['is_admin'] == 1 ? 'Administrator' : 'User'; ?>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4 mb-3">
                      <div class="border-left-info shadow h-100 py-2 pl-3">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Member Since</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                          <?php echo date('M d, Y', strtotime($admin_data['created_at'])); ?>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!---Container Fluid-->
      </div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// Toggle password visibility
function togglePassword(fieldId) {
  const input = document.getElementById(fieldId);
  const icon = input.nextElementSibling.querySelector('i');
  
  if (input.type === 'password') {
    input.type = 'text';
    icon.classList.remove('fa-eye');
    icon.classList.add('fa-eye-slash');
  } else {
    input.type = 'password';
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
  }
}

// Profile form submission
document.getElementById('profileForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = new FormData(this);
  
  Swal.fire({
    title: 'Updating Profile...',
    allowOutsideClick: false,
    didOpen: () => { Swal.showLoading(); }
  });
  
  fetch('ajax/update_profile.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    Swal.close();
    
    if(data.status == '1') {
      Swal.fire({
        title: 'Success!',
        text: data.msg,
        icon: 'success',
        confirmButtonColor: '#1cc88a'
      }).then(() => {
        location.reload();
      });
    } else {
      Swal.fire({
        title: 'Error!',
        text: data.msg,
        icon: 'error',
        confirmButtonColor: '#e74a3b'
      });
    }
  })
  .catch(error => {
    Swal.close();
    console.error('Error:', error);
    Swal.fire({
      title: 'Error!',
      text: 'An error occurred. Please try again.',
      icon: 'error',
      confirmButtonColor: '#e74a3b'
    });
  });
});

// Password form submission
document.getElementById('passwordForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const newPassword = document.getElementById('new_password').value;
  const confirmPassword = document.getElementById('confirm_password').value;
  
  // Validate passwords match
  if (newPassword !== confirmPassword) {
    Swal.fire({
      title: 'Error!',
      text: 'New passwords do not match!',
      icon: 'error',
      confirmButtonColor: '#e74a3b'
    });
    return;
  }
  
  // Validate password length
  if (newPassword.length < 6) {
    Swal.fire({
      title: 'Error!',
      text: 'Password must be at least 6 characters long!',
      icon: 'error',
      confirmButtonColor: '#e74a3b'
    });
    return;
  }
  
  const formData = new FormData(this);
  
  Swal.fire({
    title: 'Changing Password...',
    allowOutsideClick: false,
    didOpen: () => { Swal.showLoading(); }
  });
  
  fetch('ajax/change_password.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    Swal.close();
    
    if(data.status == '1') {
      Swal.fire({
        title: 'Success!',
        text: data.msg,
        icon: 'success',
        confirmButtonColor: '#1cc88a'
      }).then(() => {
        document.getElementById('passwordForm').reset();
      });
    } else {
      Swal.fire({
        title: 'Error!',
        text: data.msg,
        icon: 'error',
        confirmButtonColor: '#e74a3b'
      });
    }
  })
  .catch(error => {
    Swal.close();
    console.error('Error:', error);
    Swal.fire({
      title: 'Error!',
      text: 'An error occurred. Please try again.',
      icon: 'error',
      confirmButtonColor: '#e74a3b'
    });
  });
});
</script>

<?php
include ('include/footer.php');
?>