<?php
require __DIR__ . '/_boot.php';
require __DIR__ . '/partials/nav.php';
require __DIR__ . '/partials/map_settings.php';
if (!$user) { header('Location: login-dev.php'); exit; }
$walkId = (int)($_GET['id'] ?? 0);
$mapContext = pyrk_map_context();
$mapProvider = $mapContext['provider'];
$mapsKey = $mapContext['google_key'];
$center = $mapContext['center'];
$osmTileUrl = $mapContext['osm_tile_url'];
$osmAttribution = $mapContext['osm_attribution'];
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pyrk Walk</title>
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="assets/css/photo_contest.css">
  <link rel="stylesheet" href="assets/css/camera_picker_pro.css?v=1">
  <link rel="stylesheet" href="assets/css/walk_registered_state.css?v=20260714-waiver-top-v1">
  <link rel="stylesheet" href="assets/css/waiver_signature_pro.css?v=3">
  <link rel="stylesheet" href="assets/css/anonymous_photo_voting.css?v=2">
  <link rel="stylesheet" href="assets/css/google_map_search.css?v=1">
  <link rel="stylesheet" href="assets/css/live_route_tracking.css?v=1">
  <link rel="stylesheet" href="assets/css/walk_route_navigation_pro.css?v=2">
  <link rel="stylesheet" href="assets/css/walk_checkin_photo_location_pro.css?v=2">
  <link rel="stylesheet" href="assets/css/photo_upload_limits_pro.css?v=1">
  <link rel="stylesheet" href="assets/css/native_app_mobile_polish.css?v=5">
  <?php if ($mapProvider === 'osm'): ?><link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIINfQFuHMwOTZpQdXStT2Pv8bBTaFslN8=" crossorigin=""><?php endif; ?>
</head>
<body>
<?php pyrk_render_nav('client'); ?>
<main class="container">
  <section class="panel" id="walkDetail"><h1>Loading walk...</h1></section>

    <section class="panel walk-join-panel walk-join-panel-priority" id="walkJoinPanel" aria-labelledby="walkJoinTitle">
      <div class="walk-join-priority-head">
        <div class="walk-join-heading">
          <p class="eyebrow" id="walkJoinEyebrow">Your place</p>
          <h2 id="walkJoinTitle">Register for this walk</h2>
          <p class="muted" id="walkJoinLead">Complete the waiver and registration here before viewing the rest of the walk details.</p>
        </div>
        <span class="walk-join-top-badge" id="walkJoinTopBadge">Action required</span>
      </div>
      <div id="walkJoinStatus" class="walk-join-status" aria-live="polite">
        <span class="walk-join-status-icon">1</span>
        <div><strong>Checking your registration...</strong><small>Please wait a moment.</small></div>
      </div>
      <button class="btn walk-register-button" id="registerBtn">Register for this walk</button>
      <form id="waiverForm" class="walk-waiver-register-form">
        <div class="walk-waiver-title"><span>1</span><div><h3>Waiver & registration</h3><p class="muted small">Read the waiver, sign once, and Pyrk will register you immediately.</p></div></div>
        <div id="waiverText" class="waiver-box"></div>

        <label class="field-label">Typed name
          <input name="signed_name" id="waiverSignedName" placeholder="Type your full name" required>
        </label>

        <div class="digital-signature-panel signature-mobile-pro">
          <div class="signature-head">
            <div>
              <p class="eyebrow">Digital signature</p>
              <strong>Draw your signature</strong>
              <span class="muted small">On mobile, sign directly with your finger. The pad is larger and touch-optimized.</span>
            </div>
            <span class="signature-status-pill" id="signatureStatusPill">Ready to sign</span>
          </div>
          <div class="signature-canvas-shell">
            <canvas id="waiverSignatureCanvas" class="signature-canvas" aria-label="Draw digital signature"></canvas>
            <span class="signature-watermark" id="signatureWatermark">Sign here</span>
            <span class="signature-baseline" aria-hidden="true"></span>
          </div>
          <div class="signature-mobile-footer">
            <p class="muted small" id="signatureHelpText">Use one smooth finger movement. Turn the phone sideways if you need more space.</p>
            <button class="btn btn-light btn-small" type="button" id="clearSignatureBtn">Clear signature</button>
          </div>
          <input type="hidden" name="signature_data" id="waiverSignatureData">
          <p class="muted small signature-legal-note">Your drawn signature is saved with the waiver acceptance time, IP, and device information.</p>
        </div>

        <button class="btn walk-waiver-submit" type="submit" id="waiverSubmitBtn">Sign waiver & register</button>
      </form>
      <div class="walk-checkin-divider"><span>After registration</span></div>
      <button class="btn btn-secondary" id="selfCheckinBtn" disabled>Self Check-in</button>
      <p class="muted small" id="selfCheckinPolicyNote">Self check-in availability is controlled by Pyrk per walk.</p>
      <div id="selfCheckinSuccessCard" class="checkin-success-card" hidden></div>
      <p class="notice" id="walkMsg"></p>
  </section>


  <section class="panel">
    <div class="section-head"><h2>Route map</h2><span class="pill"><?= $mapProvider === 'osm' ? 'OpenStreetMap' : 'Google Maps' ?></span></div>
    <?php if ($mapProvider !== 'osm' && !$mapsKey): ?><p class="notice bad">Map key is missing. Add <code>google.maps_browser_key</code> in <code>config/app.php</code>, or switch <code>maps.provider</code> to <code>osm</code>.</p><?php endif; ?>
    <?php if ($mapProvider !== 'osm'): ?>
    <div class="google-map-search-bar google-map-search-bar-client">
      <input id="walkMapSearch" type="search" placeholder="Search address, café, landmark...">
    </div>
    <?php endif; ?>
    <div class="google-navigation-actions">
      <a id="openGoogleNavigationBtn" class="btn btn-light" href="#" target="_blank" rel="noopener" hidden>Open in Google Maps navigation</a>
      <button id="startLiveLocationBtn" class="btn btn-light" type="button">Share my live location</button>
      <span id="liveLocationStatus" class="muted small"></span>
    </div>
    <div id="walkMap" class="map-canvas small-map"></div>
  </section>

  <section class="panel route-navigation-pro" id="routeNavigationPanel" hidden>
    <div class="route-nav-header">
      <div>
        <p class="eyebrow">Smart route guidance</p>
        <h2>Your checkpoint route</h2>
        <p class="muted">Pyrk shows the full route here. Google Maps opens only the next checkpoint for reliable mobile navigation.</p>
      </div>
      <div class="route-progress-ring" id="routeProgressRing">0%</div>
    </div>

    <div class="route-next-card" id="routeNextCard">
      <div>
        <span class="pill" id="routeNextBadge">Next stop</span>
        <h3 id="routeNextTitle">Loading route...</h3>
        <p class="muted" id="routeNextDescription"></p>
      </div>
      <div class="route-next-actions">
        <a id="navigateNextCheckpointBtn" class="btn" href="#" target="_blank" rel="noopener" hidden>Navigate to next point</a>
        <button id="markCheckpointBtn" class="btn btn-light" type="button" hidden>I reached this point</button>
      </div>
    </div>

    <div class="route-progress-summary" id="routeProgressSummary"></div>
    <div class="route-stops-toolbar" id="routeStopsToolbar" hidden>
      <div>
        <strong>Route checkpoints</strong>
        <span id="routeStopsCount" class="muted small">0 stops</span>
      </div>
      <button id="toggleRouteStopsBtn" class="btn btn-light btn-small" type="button" aria-expanded="false" aria-controls="routeStopsList">Show checkpoints</button>
    </div>
    <div class="route-stops-list" id="routeStopsList" hidden></div>
    <p class="notice" id="routeNavigationMsg"></p>
  </section>

  <section class="panel photo-upload-panel-wide" id="photoUploadPanel" data-photo-upload-panel>
      <h2>Upload your photo</h2>
      <p class="muted">Only checked-in attendees can register photos for voting.</p>
      <div id="photoUploadPolicyCard" class="photo-upload-policy-card" hidden></div>
      <form id="photoForm" enctype="multipart/form-data">
        <input type="hidden" name="walk_id" value="<?= $walkId ?>">
        <input type="hidden" name="photo_latitude" id="photoLatitude">
        <input type="hidden" name="photo_longitude" id="photoLongitude">
        <input type="hidden" name="photo_location_accuracy" id="photoLocationAccuracy">
        <input type="hidden" name="photo_location_source" id="photoLocationSource">
        <input type="hidden" name="photo_location_captured_at" id="photoLocationCapturedAt">
        <input name="title" placeholder="Photo title" required>
        <textarea name="caption" placeholder="Caption"></textarea>

        <div class="upload-options">
          <div class="camera-panel camera-panel-pro simplified-photo-picker">
            <div class="section-head compact">
              <div>
                <p class="eyebrow">Photo source</p>
                <h3>Choose one option</h3>
              </div>
              <span class="pill">mobile ready</span>
            </div>
            <p class="muted small">To keep mobile simple, Pyrk now shows only three clear choices: gallery, selfie camera, or back camera. Large photos are prepared before upload when the browser allows it.</p>

            <div class="photo-source-grid">
              <label class="photo-source-card primary" for="photoInput">
                <span class="photo-source-icon">🖼️</span>
                <strong>Choose from gallery</strong>
                <small>Pick an existing photo</small>
              </label>
              <label class="photo-source-card" id="openNativeSelfieBtn" for="nativeSelfieInput">
                <span class="photo-source-icon">🤳</span>
                <strong>Take selfie</strong>
                <small>Open front camera</small>
              </label>
              <label class="photo-source-card" id="openNativeBackBtn" for="nativeBackInput">
                <span class="photo-source-icon">📷</span>
                <strong>Take photo</strong>
                <small>Open back camera</small>
              </label>
            </div>

            <input id="photoInput" class="photo-file-control" name="photo" type="file" accept="image/*">
            <input id="nativeSelfieInput" class="camera-native-input" type="file" accept="image/*" capture="user" aria-label="Take selfie with front camera">
            <input id="nativeBackInput" class="camera-native-input" type="file" accept="image/*" capture="environment" aria-label="Take photo with back camera">

            <video id="selfieVideo" class="camera-video" autoplay playsinline muted hidden></video>
            <canvas id="selfieCanvas" hidden></canvas>
            <img id="selfiePreview" class="selfie-preview" alt="Captured camera preview" hidden>
            <p class="notice" id="cameraMsg"></p>
          </div>

          <div class="photo-location-panel" id="photoLocationPanel">
            <div>
              <p class="eyebrow">Photo location</p>
              <strong id="photoLocationTitle">Location not attached yet</strong>
              <small class="muted" id="photoLocationStatus">When allowed by the member, Pyrk saves where the photo was captured/uploaded and shows it to admins.</small>
            </div>
            <button class="btn btn-light btn-small" type="button" id="capturePhotoLocationBtn">Add my location</button>
          </div>
        </div>

        <button class="btn" type="submit">Upload photo</button>
      </form>
      <p class="notice" id="photoMsg"></p>
  </section>

  <section class="panel">
    <div class="section-head"><h2>Photo gallery and voting</h2><button class="btn btn-small" onclick="loadGallery()">Refresh</button></div>
    <div id="gallery" class="gallery"></div>
  </section>
</main>
<script>window.PYRK_API_BASE='../api'; window.PYRK_CSRF='<?= htmlspecialchars($csrf) ?>'; window.PYRK_WALK_ID=<?= $walkId ?>; window.PYRK_PHOTO_UPLOAD_TIMEOUT_MS=90000; window.PYRK_USER_ID=<?= (int)$user['id'] ?>; window.PYRK_MAP_CENTER=<?= json_encode($center) ?>; window.PYRK_MAP_PROVIDER='<?= htmlspecialchars($mapProvider) ?>'; window.PYRK_OSM_TILE_URL=<?= json_encode($osmTileUrl) ?>; window.PYRK_OSM_ATTRIBUTION=<?= json_encode($osmAttribution) ?>;</script>
<script src="assets/js/api.js?v=20260708-photo-timeout"></script>
<script src="assets/js/gallery.js?v=20260714-waiver-top-v1"></script>
<script src="assets/js/native_app_mobile_polish.js?v=5"></script>
<?php if ($mapProvider === 'osm'): ?>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<?php endif; ?>
<script src="assets/js/route_view.js?v=20260712-native-gps-v1"></script>
<?php if ($mapProvider !== 'osm' && $mapsKey): ?>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?= urlencode($mapsKey) ?>&loading=async&libraries=geometry,marker,places&callback=initPyrkWalkMap"></script>
<?php endif; ?>
</body>
</html>
