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

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

// Staff users should land in the admin portal by default when opening /public/index.php.
$role = $user['role_name'] ?? '';
if (in_array($role, ['super_admin', 'event_manager', 'walk_leader'], true)) {
    header('Location: admin/dashboard.php');
    exit;
}

// Keep the desktop web dashboard unchanged. Native/PWA members use the compact app home.
if ($role === 'member' && \App\Core\Auth::isNativeAppRequest()) {
    header('Location: mobile_home.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>Pyrk Client Portal</title>
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="assets/css/client_rewards_pro.css?v=2">
  <link rel="stylesheet" href="assets/css/walk_registered_state.css?v=2">
  <link rel="stylesheet" href="assets/css/member_walk_registered_count_hide.css?v=1">
  <link rel="stylesheet" href="assets/css/walk_payment_model.css?v=1">
  <link rel="stylesheet" href="assets/css/client_points_ledger.css?v=1">
  <link rel="stylesheet" href="assets/css/member_mobile_experience_pro.css?v=4">
  <link rel="stylesheet" href="assets/css/member_profile_edit_pro.css?v=20260713-native-save-v1">
  <link rel="stylesheet" href="assets/css/native_app_mobile_polish.css?v=5">
</head>
<body>
<?php pyrk_render_nav('client'); ?>
<main class="container">
  <section class="page-hero client-hero dashboard-hero">
    <div>
      <p class="eyebrow">Client Interface</p>
      <h1>Hello, <?= htmlspecialchars(explode(' ', trim($user['full_name']))[0] ?? $user['full_name']) ?></h1>
      <p class="muted">Register for walks, sign waivers, check in, upload photos, vote, and collect badges.</p>
    </div>
    <div class="client-hero-card" id="clientHeroCard"><div class="avatar-preview xl" id="clientHeroAvatar">P</div><div><strong id="clientHeroName">My profile</strong><small id="clientHeroMeta">Loading progress...</small></div><a class="btn btn-small" href="my_qr.php">My QR</a></div>
  </section>



  <section class="member-priority-walk-action" id="memberPriorityWalkAction" hidden>
    <div class="priority-walk-card">
      <div class="priority-walk-icon">🥾</div>
      <div class="priority-walk-copy">
        <p class="member-app-label" id="priorityWalkLabel">Next action</p>
        <h2 id="priorityWalkTitle">Prepare for your walk</h2>
        <p id="priorityWalkText">Register and sign your waiver before the walk starts.</p>
      </div>
      <a class="priority-walk-btn" id="priorityWalkButton" href="#walks">Open</a>
    </div>
  </section>

  <section class="member-mobile-experience-pro" id="memberMobileExperience">
    <div class="member-app-hero-card">
      <div class="member-app-hero-glow"></div>
      <div class="member-app-identity">
        <div class="member-app-avatar" id="memberAppAvatar">P</div>
        <div>
          <p class="member-app-label">Pyrk member pass</p>
          <h2 id="memberAppName">Loading member...</h2>
          <p id="memberAppMeta">Preparing your mobile dashboard</p>
        </div>
      </div>
      <div class="member-app-status-row">
        <span class="member-app-status-pill" id="memberAppStatus">Member</span>
        <span class="member-app-status-pill light" id="memberAppLevel">Starter</span>
      </div>
      <div class="member-app-actions">
        <a class="member-app-action primary" href="my_qr.php">Show my QR</a>
        <a class="member-app-action" href="#walks">Find walks</a>
      </div>
    </div>

    <div class="member-app-quick-grid">
      <a class="member-quick-tile" href="my_qr.php"><span>▣</span><strong>My QR</strong><small>Check-in pass</small></a>
      <a class="member-quick-tile" href="#walks"><span>🥾</span><strong>Walks</strong><small>Join events</small></a>
      <a class="member-quick-tile" href="#rewards"><span>🎁</span><strong>Rewards</strong><small>Use points</small></a>
      <a class="member-quick-tile" href="#history"><span>📜</span><strong>History</strong><small>My activity</small></a>
    </div>

    <div class="member-app-main-grid">
      <article class="member-next-card" id="memberNextWalkCard">
        <div class="member-card-head">
          <div>
            <p class="member-app-label">Next registered walk</p>
            <h3>Loading...</h3>
          </div>
          <span class="member-live-dot">Live</span>
        </div>
        <p class="member-card-muted">Your next registered walk will appear here.</p>
      </article>

      <article class="member-progress-card">
        <div class="member-progress-top">
          <div>
            <p class="member-app-label">Progress</p>
            <h3 id="memberProgressTitle">0.0 KM</h3>
          </div>
          <div class="member-progress-ring-mini"><span id="memberProgressPercent">0%</span></div>
        </div>
        <div class="member-progress-bar"><span id="memberProgressBar"></span></div>
        <p id="memberProgressNote" class="member-card-muted">Complete your first walk to unlock milestones.</p>
      </article>
    </div>

    <div class="member-app-info-grid" id="memberProfileSection" data-member-profile>
      <article class="member-info-card">
        <p class="member-app-label">Digital member card</p>
        <h3 id="memberDigitalName">Member</h3>
        <p id="memberDigitalEmail" class="member-card-muted">—</p>
        <div class="member-profile-points-pro"><strong id="memberDigitalPoints">0</strong><span>Loyalty points</span></div>
        <div class="member-card-footer"><span id="memberDigitalStatus">Active member</span><a href="my_qr.php">QR</a></div>
      </article>
      <article class="member-info-card">
        <p class="member-app-label">Safety contact</p>
        <h3 id="memberEmergencyName">Not set</h3>
        <p id="memberEmergencyPhone" class="member-card-muted">Ask admin to complete your emergency contact.</p>
        <div class="member-card-footer"><span id="memberSafetyNote">Safety ready</span></div>
      </article>
      <article class="member-info-card member-profile-hub-card">
        <p class="member-app-label">Profile options</p>
        <h3>My account & activity</h3>
        <p class="member-card-muted">Mobile access to the same member areas available on the web dashboard, without login activity.</p>
        <div class="member-profile-option-grid">
          <a href="my_qr.php"><span>▣</span><strong>My QR</strong><small>Member check-in pass</small></a>
          <a href="#profileStats"><span>⭐</span><strong>Points</strong><small>Loyalty balance & stats</small></a>
          <a href="#rewards"><span>🎁</span><strong>Prizes</strong><small>Reward marketplace</small></a>
          <a href="#badges"><span>🎖️</span><strong>Badges</strong><small>Achievements earned</small></a>
          <a href="#pointsLedger"><span>📒</span><strong>Ledger</strong><small>Points gained and used</small></a>
          <a href="#history"><span>🥾</span><strong>History</strong><small>Walk registrations and completions</small></a>
          <a href="notifications.php"><span>🔔</span><strong>Notifications</strong><small>Unread and read messages</small></a>
          <button class="member-profile-option-button" type="button" id="openMemberEditProfile"><span>✎</span><strong>Edit profile</strong><small>Update contact, safety and medical details</small></button>
        </div>
      </article>

    </div>
  </section>

  <section class="grid four compact-stats" id="profileStats">
    <div class="stat stat-pro"><span>🥾 Total Walks</span><strong id="statWalks">0</strong></div>
    <div class="stat stat-pro"><span>📍 Total KM</span><strong id="statKm">0</strong></div>
    <div class="stat stat-pro"><span>⭐ Loyalty Points</span><strong id="statPoints">0</strong></div>
    <div class="stat stat-pro"><span>🎖️ Badges</span><strong id="statBadges">0</strong></div>
  </section>

  <section class="panel member-profile-full-panel" id="myProfile">
    <div class="section-head member-profile-full-head">
      <div>
        <p class="eyebrow">My profile</p>
        <h2>Personal, safety & activity profile</h2>
        <p class="muted small">View your member details on mobile and desktop. Login activity is intentionally hidden.</p>
      </div>
      <button class="btn" type="button" id="openMemberEditProfileTop">Edit profile</button>
    </div>

    <div class="member-profile-full-grid">
      <article class="member-profile-full-card member-profile-identity-card">
        <div class="member-profile-identity-row">
          <div class="avatar-preview xl" id="memberFullProfileAvatar">P</div>
          <div>
            <p class="member-app-label">Member identity</p>
            <h3 id="memberFullProfileName">Member</h3>
            <p id="memberFullProfileEmail" class="member-card-muted">—</p>
          </div>
        </div>
        <div class="member-profile-kpi-row">
          <span><strong id="memberFullProfilePoints">0</strong><em>points</em></span>
          <span><strong id="memberFullProfileWalks">0</strong><em>walks</em></span>
          <span><strong id="memberFullProfileKm">0.0</strong><em>KM</em></span>
        </div>
      </article>

      <article class="member-profile-full-card">
        <h3>Contact</h3>
        <div id="memberProfileContactFields" class="member-profile-field-list"></div>
      </article>

      <article class="member-profile-full-card">
        <h3>Safety & medical</h3>
        <div id="memberProfileSafetyFields" class="member-profile-field-list"></div>
      </article>

      <article class="member-profile-full-card">
        <h3>Account & consent</h3>
        <div id="memberProfileAccountFields" class="member-profile-field-list"></div>
      </article>
    </div>

    <div class="member-profile-extra-grid">
      <article class="member-profile-list-card"><div class="section-head compact"><div><h3>Signed waivers</h3><p class="muted small">Your signed walk waivers.</p></div></div><div id="memberProfileWaivers" class="member-mini-list"></div></article>
      <article class="member-profile-list-card"><div class="section-head compact"><div><h3>Photos</h3><p class="muted small">Recent uploads and approval status.</p></div></div><div id="memberProfilePhotos" class="member-mini-list"></div></article>
      <article class="member-profile-list-card"><div class="section-head compact"><div><h3>Groups</h3><p class="muted small">Member groups used for invitations.</p></div></div><div id="memberProfileGroups" class="member-chip-list"></div></article>
    </div>
  </section>

  <section class="grid client-dashboard-grid">
    <div class="panel dashboard-card-large" id="walks">
      <div class="section-head"><div><p class="eyebrow">Join the next event</p><h2>Upcoming walks</h2></div><button class="btn btn-small" onclick="loadWalks()">Refresh</button></div>
      <div id="walksList" class="walk-card-list"></div>
    </div>

    <aside class="panel profile-progress-panel">
      <div class="section-head"><div><p class="eyebrow">Your journey</p><h2>Next milestone</h2></div></div>
      <div class="progress-ring-card">
        <div class="progress-ring"><strong id="progressKm">0</strong><span>KM</span></div>
        <p id="progressText">Complete your first walk to start collecting kilometers.</p>
      </div>
      <div id="nextWalkBox" class="next-walk-box"></div>
    </aside>
  </section>

  <section class="client-rewards-suite">
    <div class="client-rewards-main">
      <div class="panel rewards-market-panel-pro" id="rewards">
        <div class="rewards-suite-head">
          <div>
            <p class="eyebrow">Claim rewards</p>
            <h2>Prize marketplace</h2>
            <p class="muted small">Use your Pyrk points to claim prizes. Choose an available reward, submit your claim, and the Pyrk team will prepare it.</p>
          </div>
          <button class="btn btn-small btn-light" onclick="loadRewards()">Refresh rewards</button>
        </div>

        <div id="rewardStoreHeader" class="reward-store-header-pro"></div>

        <div class="rewards-section-title">
          <div>
            <h3>Available prizes</h3>
            <p>Cards update automatically based on your current points and prize stock.</p>
          </div>
        </div>
        <div id="rewardStore" class="reward-store-grid-pro"></div>

        <div class="claims-panel-pro">
          <div class="section-head compact">
            <div>
              <p class="eyebrow">Redemption history</p>
              <h3>My prize claims</h3>
            </div>
          </div>
          <div class="table-wrap reward-claim-history-pro">
            <table>
              <thead><tr><th>Prize</th><th>Status</th><th>Points</th><th>Date</th></tr></thead>
              <tbody id="rewardClaimsBody"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <aside class="panel badges-side-panel-pro" id="badges">
      <div class="section-head">
        <div>
          <p class="eyebrow">Achievements</p>
          <h2>My badges</h2>
          <p class="muted small">Complete walks, join contests, and unlock Pyrk milestones.</p>
        </div>
      </div>
      <div id="badgesList" class="badges-pro-list"></div>
    </aside>
  </section>



  <section class="panel points-ledger-panel-pro" id="pointsLedger">
    <div class="section-head">
      <div>
        <p class="eyebrow">Points ledger</p>
        <h2>Gained & used points</h2>
        <p class="muted small">A complete history of points earned from walks, badges, contests and points used for prizes.</p>
      </div>
      <div class="points-ledger-summary" id="pointsLedgerSummary"></div>
    </div>
    <div class="table-wrap points-ledger-table-wrap">
      <table class="points-ledger-table">
        <thead><tr><th>Date</th><th>Type</th><th>Description</th><th>Walk</th><th>Points</th></tr></thead>
        <tbody id="pointsLedgerBody"></tbody>
      </table>
    </div>
  </section>

  <section class="panel" id="history">
    <div class="section-head"><div><p class="eyebrow">Activity log</p><h2>My walk history</h2></div></div>
    <div class="table-wrap"><table><thead><tr><th>Walk</th><th>Date</th><th>Status</th><th>KM</th></tr></thead><tbody id="historyBody"></tbody></table></div>
  </section>

<div class="modal-backdrop member-self-profile-modal" id="memberSelfProfileModal" hidden>
  <div class="modal-card modal-large member-self-profile-card" role="dialog" aria-modal="true" aria-labelledby="memberSelfProfileTitle">
    <div class="modal-head">
      <div>
        <p class="eyebrow">Edit profile</p>
        <h2 id="memberSelfProfileTitle">Update my member profile</h2>
        <p class="muted small">Keep your contact, emergency and medical details up to date for safer walks.</p>
      </div>
      <button class="icon-btn" type="button" data-self-profile-close>×</button>
    </div>
    <form id="memberSelfProfileForm" class="stack-form member-self-profile-form" enctype="multipart/form-data">
      <div class="profile-upload-box compact-upload-box">
        <div class="avatar-preview xl" id="memberSelfProfilePreview">P</div>
        <label class="upload-trigger">Profile photo
          <input name="profile_photo" id="memberSelfProfilePhoto" type="file" accept="image/*">
        </label>
      </div>
      <div class="form-grid two member-self-form-grid">
        <label>First name<input name="first_name" id="memberSelfFirstName" autocomplete="given-name" required></label>
        <label>Last name<input name="last_name" id="memberSelfLastName" autocomplete="family-name" required></label>
        <input type="hidden" name="full_name" id="memberSelfFullName">
        <label>Email<input name="email" id="memberSelfEmail" type="email" autocomplete="email" required></label>
        <label>Mobile<input name="mobile" id="memberSelfMobile" inputmode="tel" autocomplete="tel" placeholder="+96170123456"></label>
        <label>Date of birth<input name="date_of_birth" id="memberSelfDateOfBirth" type="date"></label>
        <label>Gender<select name="gender" id="memberSelfGender"><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>
        <label>Emergency contact<input name="emergency_contact_name" id="memberSelfEmergencyName" autocomplete="off"></label>
        <label>Emergency mobile<input name="emergency_contact_mobile" id="memberSelfEmergencyMobile" inputmode="tel" autocomplete="tel" placeholder="+96170123456"></label>
      </div>
      <label>Medical conditions<textarea name="medical_conditions" id="memberSelfMedicalConditions" placeholder="Allergies, asthma, medication, injuries, or notes the team should know."></textarea></label>
      <label class="check member-self-check"><input type="checkbox" name="photo_consent" id="memberSelfPhotoConsent" value="1"> I allow Pyrk to use approved event photos according to club policy.</label>
      <div class="modal-actions">
        <button class="btn btn-light" type="button" data-self-profile-close>Cancel</button>
        <button class="btn" type="submit" id="memberSelfSaveBtn">Save profile</button>
      </div>
      <p id="memberSelfProfileMsg" class="notice"></p>
    </form>
  </div>
</div>

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