<?php
require __DIR__ . '/_boot.php';
require __DIR__ . '/partials/mobile_member_shell.php';
$user = pyrk_mobile_member_guard($user);
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#087f5b">
  <title>My Profile | Pyrk</title>
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="assets/css/mobile_member_app.css?v=20260717-profile-permission-v1">
</head>
<body class="pyrk-native-app mobile-member-app" data-mobile-page="profile">
<?php pyrk_mobile_member_header('My profile', 'Personal, safety, and activity details'); ?>
<main class="mobile-member-main">
  <section class="mobile-profile-hero">
    <button class="mobile-profile-avatar" id="mobileProfileAvatarButton" type="button" aria-label="View profile photo"><span id="mobileProfileAvatar">P</span></button>
    <div><h2 id="mobileProfileName">Member</h2><p id="mobileProfileEmail">—</p></div>
    <button class="mobile-edit-button" type="button" id="mobileOpenProfileEdit">Edit</button>
  </section>

  <div class="mobile-form-message" id="mobileProfilePermissionNotice" hidden></div>

  <section class="mobile-mini-stats profile-stats">
    <article><span>Walks</span><strong id="mobileProfileWalks">0</strong></article>
    <article><span>KM</span><strong id="mobileProfileKm">0.0</strong></article>
    <article><span>Points</span><strong id="mobileProfilePoints">0</strong></article>
  </section>

  <section class="mobile-profile-sections">
    <details open><summary>Contact details</summary><div id="mobileProfileContact" class="mobile-detail-list"></div></details>
    <details><summary>Safety & medical</summary><div id="mobileProfileSafety" class="mobile-detail-list"></div></details>
    <details><summary>Account & consent</summary><div id="mobileProfileAccount" class="mobile-detail-list"></div></details>
    <details><summary>Groups</summary><div id="mobileProfileGroups" class="mobile-chip-list"></div></details>
    <details><summary>Signed waivers</summary><div id="mobileProfileWaivers" class="mobile-card-list compact-list"></div></details>
  </section>

  <section class="mobile-section-block">
    <div class="mobile-page-intro compact"><div><p class="mobile-kicker">My uploads</p><h2>Photos</h2><p>Tap any photo to view it.</p></div></div>
    <div id="mobileProfilePhotos" class="mobile-photo-grid"><div class="mobile-loading-card">Loading photos…</div></div>
  </section>

  <section class="mobile-profile-actions">
    <a href="change_password.php?source=app">Change password</a>
    <a href="login-dev.php?logout=1&source=app" class="is-danger">Sign out from this device</a>
  </section>
</main>

<div class="mobile-sheet" id="mobileProfileEditSheet" hidden>
  <div class="mobile-sheet-card" role="dialog" aria-modal="true" aria-labelledby="mobileProfileEditTitle">
    <div class="mobile-sheet-head"><div><p class="mobile-kicker">Edit profile</p><h2 id="mobileProfileEditTitle">Update my details</h2></div><button type="button" data-mobile-sheet-close>×</button></div>
    <form id="mobileProfileEditForm" enctype="multipart/form-data">
      <div class="mobile-edit-avatar-row"><div id="mobileProfileEditPreview" class="mobile-edit-preview">P</div><label>Change photo<input type="file" name="profile_photo" id="mobileProfilePhotoInput" accept="image/*"></label></div>
      <div class="mobile-form-grid">
        <label>First name<input name="first_name" id="mobileProfileFirstName" required></label>
        <label>Last name<input name="last_name" id="mobileProfileLastName" required></label>
        <input type="hidden" name="full_name" id="mobileProfileFullName">
        <label>Email<input name="email" id="mobileProfileEditEmail" type="email" required></label>
        <label>Mobile<input name="mobile" id="mobileProfileMobile" inputmode="tel"></label>
        <label>Date of birth<input name="date_of_birth" id="mobileProfileDob" type="date"></label>
        <label>Gender<select name="gender" id="mobileProfileGender"><option value="">Select</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="mobileProfileEmergencyName"></label>
        <label>Emergency mobile<input name="emergency_contact_mobile" id="mobileProfileEmergencyMobile" inputmode="tel"></label>
      </div>
      <label>Medical conditions<textarea name="medical_conditions" id="mobileProfileMedical"></textarea></label>
      <label class="mobile-check"><input type="checkbox" name="photo_consent" value="1" id="mobileProfileConsent"> I allow approved event photos according to club policy.</label>
      <p id="mobileProfileEditMessage" class="mobile-form-message"></p>
      <div class="mobile-sheet-actions"><button type="button" data-mobile-sheet-close>Cancel</button><button type="submit" class="is-primary">Save profile</button></div>
    </form>
  </div>
</div>

<div class="mobile-photo-viewer" id="mobilePhotoViewer" hidden>
  <button type="button" data-photo-viewer-close aria-label="Close photo">×</button>
  <img id="mobilePhotoViewerImage" alt="Member photo">
  <div><strong id="mobilePhotoViewerTitle"></strong><small id="mobilePhotoViewerMeta"></small></div>
</div>

<?php pyrk_mobile_member_dock('profile'); ?>
<script>window.PYRK_API_BASE='../api'; window.PYRK_CSRF='<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>';</script>
<script src="assets/js/api.js"></script>
<script src="assets/js/mobile_member_app.js?v=20260717-profile-permission-v1"></script>
</body>
</html>
