<?php
require __DIR__ . '/_boot.php';

if (!$user) {
    header('Location: login-dev.php');
    exit;
}

$role = $user['role_name'] ?? '';
if (in_array($role, ['super_admin', 'event_manager', 'walk_leader'], true)) {
    header('Location: admin/dashboard.php');
    exit;
}

require __DIR__ . '/partials/nav.php';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Profile · Pyrk</title>
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="assets/css/member_profile_edit_pro.css?v=20260717-web-profile-v1">
  <link rel="stylesheet" href="assets/css/member_profile_web_pro.css?v=20260717-profile-permission-v1">
</head>
<body>
<?php pyrk_render_nav('client'); ?>

<main class="container member-web-profile-page" id="memberWebProfilePage">
  <section class="page-hero member-profile-page-hero">
    <div>
      <p class="eyebrow">My account</p>
      <h1>My Profile</h1>
      <p class="muted">View and safely update your personal, contact, emergency and medical details.</p>
    </div>
    <div class="member-profile-page-actions">
      <a class="btn btn-light" href="my_qr.php">Show my QR</a>
      <a class="btn btn-light" href="change_password.php">Change password</a>
      <button class="btn" type="button" id="focusProfileEdit">Edit profile</button>
    </div>
  </section>

  <div class="member-profile-page-notice notice" id="memberProfilePageNotice" hidden></div>

  <section class="member-profile-overview-grid" aria-label="Profile overview">
    <article class="member-profile-hero-card-pro">
      <div class="member-profile-hero-top">
        <div class="member-profile-avatar-pro" id="memberProfilePageAvatar" aria-label="Profile photo">P</div>
        <div>
          <p class="member-profile-label">Pyrk member</p>
          <h2 id="memberProfilePageName">Loading profile...</h2>
          <p id="memberProfilePageEmail">—</p>
          <div class="member-profile-status-row">
            <span class="member-profile-status-pill" id="memberProfilePageStatus">Member</span>
            <span class="member-profile-status-pill soft" id="memberProfilePageCompleteness">0% complete</span>
          </div>
        </div>
      </div>
      <div class="member-profile-kpis-pro">
        <div><strong id="memberProfilePagePoints">0</strong><span>Points</span></div>
        <div><strong id="memberProfilePageWalks">0</strong><span>Walks</span></div>
        <div><strong id="memberProfilePageKm">0.0</strong><span>KM</span></div>
        <div><strong id="memberProfilePageBadges">0</strong><span>Badges</span></div>
      </div>
    </article>

    <article class="member-profile-readiness-card">
      <div class="member-profile-card-head">
        <div>
          <p class="member-profile-label">Profile readiness</p>
          <h2>Keep your details current</h2>
        </div>
        <strong id="memberProfileReadinessPercent">0%</strong>
      </div>
      <div class="member-profile-progress-track" aria-hidden="true"><span id="memberProfileReadinessBar"></span></div>
      <p class="muted" id="memberProfileReadinessText">Loading your profile details...</p>
      <div class="member-profile-readiness-list" id="memberProfileReadinessList"></div>
    </article>
  </section>

  <section class="member-profile-content-grid">
    <article class="panel member-profile-edit-panel" id="editProfile">
      <div class="section-head member-profile-edit-head">
        <div>
          <p class="eyebrow">Edit profile</p>
          <h2>Personal & safety information</h2>
          <p class="muted small">Changes apply only to your own member account.</p>
        </div>
        <span class="member-profile-save-state" id="memberProfileSaveState">Ready</span>
      </div>

      <form id="memberWebProfileForm" class="member-web-profile-form" enctype="multipart/form-data" novalidate>
        <div class="member-profile-photo-editor">
          <div class="member-profile-avatar-pro editable" id="memberWebProfilePreview">P</div>
          <div>
            <label class="btn btn-light btn-small member-profile-upload-button">
              Change profile photo
              <input type="file" name="profile_photo" id="memberWebProfilePhoto" accept="image/jpeg,image/png,image/webp" hidden>
            </label>
            <p class="muted small">JPG, PNG or WebP. The existing photo stays unless you choose a new one.</p>
          </div>
        </div>

        <fieldset class="member-profile-fieldset">
          <legend>Personal details</legend>
          <div class="form-grid two">
            <label>First name <span aria-hidden="true">*</span><input name="first_name" id="memberWebFirstName" autocomplete="given-name" maxlength="100" required></label>
            <label>Last name <span aria-hidden="true">*</span><input name="last_name" id="memberWebLastName" autocomplete="family-name" maxlength="100" required></label>
            <input type="hidden" name="full_name" id="memberWebFullName">
            <label>Email <span aria-hidden="true">*</span><input name="email" id="memberWebEmail" type="email" autocomplete="email" maxlength="180" required></label>
            <label>Mobile<input name="mobile" id="memberWebMobile" type="tel" inputmode="tel" autocomplete="tel" maxlength="40" placeholder="+96170123456"></label>
            <label>Date of birth<input name="date_of_birth" id="memberWebDateOfBirth" type="date"></label>
            <label>Gender<select name="gender" id="memberWebGender"><option value="">Select gender</option><option value="female">Female</option><option value="male">Male</option><option value="other">Other</option><option value="prefer_not_to_say">Prefer not to say</option></select></label>
          </div>
        </fieldset>

        <fieldset class="member-profile-fieldset safety">
          <legend>Emergency & medical details</legend>
          <div class="form-grid two">
            <label>Emergency contact<input name="emergency_contact_name" id="memberWebEmergencyName" maxlength="150" autocomplete="off"></label>
            <label>Emergency mobile<input name="emergency_contact_mobile" id="memberWebEmergencyMobile" type="tel" inputmode="tel" maxlength="40" autocomplete="tel" placeholder="+96170123456"></label>
          </div>
          <label>Medical conditions or safety notes<textarea name="medical_conditions" id="memberWebMedicalConditions" rows="5" placeholder="Allergies, asthma, medication, injuries, or anything the walk team should know."></textarea></label>
          <label class="check member-web-photo-consent"><input type="checkbox" name="photo_consent" id="memberWebPhotoConsent" value="1"> I allow Pyrk to use approved event photos according to club policy.</label>
        </fieldset>

        <div class="member-profile-form-actions">
          <button class="btn btn-light" type="button" id="resetMemberWebProfile">Reset changes</button>
          <button class="btn" type="submit" id="saveMemberWebProfile">Save my profile</button>
        </div>
        <p class="notice" id="memberWebProfileMessage" aria-live="polite"></p>
      </form>
    </article>

    <aside class="member-profile-sidebar">
      <article class="panel member-profile-details-card">
        <div class="section-head compact"><div><p class="eyebrow">Account summary</p><h2>Membership details</h2></div></div>
        <div class="member-profile-summary-list" id="memberProfileSummaryList"></div>
        <div class="member-profile-account-actions">
          <a class="btn btn-light btn-small" href="my_qr.php">My QR code</a>
          <a class="btn btn-light btn-small" href="change_password.php">Password & security</a>
        </div>
      </article>

      <article class="panel member-profile-details-card">
        <div class="section-head compact"><div><p class="eyebrow">Groups</p><h2>My member groups</h2></div></div>
        <div class="member-profile-chip-list" id="memberProfilePageGroups"><p class="muted small">Loading groups...</p></div>
      </article>

      <article class="panel member-profile-details-card">
        <div class="section-head compact"><div><p class="eyebrow">Achievements</p><h2>Recent badges</h2></div></div>
        <div class="member-profile-activity-list" id="memberProfilePageBadgesList"><p class="muted small">Loading badges...</p></div>
      </article>
    </aside>
  </section>

  <section class="member-profile-activity-grid">
    <article class="panel member-profile-activity-card">
      <div class="section-head compact"><div><p class="eyebrow">Waivers</p><h2>Recently signed</h2></div><a class="text-link" href="index.php#history">Activity history</a></div>
      <div class="member-profile-activity-list" id="memberProfilePageWaivers"></div>
    </article>
    <article class="panel member-profile-activity-card">
      <div class="section-head compact"><div><p class="eyebrow">Photos</p><h2>Recent uploads</h2></div></div>
      <div class="member-profile-activity-list" id="memberProfilePagePhotos"></div>
    </article>
  </section>
</main>

<script>
window.PYRK_API_BASE='../api';
window.PYRK_CSRF='<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>';
window.PYRK_USER_ID=<?= (int)$user['id'] ?>;
</script>
<script src="assets/js/api.js"></script>
<script src="assets/js/member_profile_web_pro.js?v=20260717-profile-permission-v1"></script>
</body>
</html>
