<?php
require __DIR__ . '/../_boot.php';
require __DIR__ . '/../partials/nav.php';
if (!$user || !in_array($user['role_name'], ['super_admin','event_manager'], true)) { header('Location: dashboard.php'); exit; }
$safe = static fn($value) => htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Photo Contest Command Center</title>
  <link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/admin_photo_voting_rules_pro.css?v=2">
  <link rel="stylesheet" href="../assets/css/photo_contest.css">
  <link rel="stylesheet" href="../assets/css/walk_checkin_photo_location_pro.css?v=1">
  <link rel="stylesheet" href="../assets/css/photo_upload_limits_pro.css?v=1">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>
<main class="container enterprise-page photo-command-page photo-contest-enterprise-page">
  <section class="panel enterprise-hero photo-command-hero photo-contest-hero">
    <div class="section-head photo-hero-grid">
      <div>
        <p class="eyebrow">Enterprise photo contest</p>
        <h1>Photo voting command center</h1>
        <p class="muted">Control voting rules per walk, approve photo entries, monitor votes, and close contests from one clean enterprise workspace.</p>
      </div>
      <div class="photo-command-actions hero-actions">
        <label class="hero-select-label">Active walk / event
          <select id="walkSelect" aria-label="Select walk"></select>
        </label>
        <button class="btn btn-small btn-light" type="button" id="refreshPhotosBtn">Refresh</button>
      </div>
    </div>
  </section>

  <section class="grid five photo-kpi-grid" id="photoStats">
    <div class="stat"><span>Total photos</span><strong>0</strong><small class="muted">All entries</small></div>
    <div class="stat"><span>Pending</span><strong>0</strong><small class="muted">Needs approval</small></div>
    <div class="stat"><span>Approved</span><strong>0</strong><small class="muted">Visible</small></div>
    <div class="stat"><span>Total votes</span><strong>0</strong><small class="muted">Activity</small></div>
    <div class="stat"><span>Participants</span><strong>0</strong><small class="muted">Members</small></div>
  </section>

  <section class="panel contest-control-panel">
    <div class="section-head contest-control-head">
      <div>
        <p class="eyebrow">Voting rules</p>
        <h2>Per-walk contest control</h2>
        <p class="muted">Select one walk above, then set exactly who can vote for that walk only. Other walks keep their own rules.</p>
      </div>
      <span id="contestStatusPill" class="pill muted">Choose a walk</span>
    </div>

    <form id="contestSettingsForm" class="contest-settings-form" method="post" action="#" autocomplete="off" onsubmit="return false;">
      <input type="hidden" name="action" value="save_settings">
      <input type="hidden" name="walk_id" id="settingsWalkId">
      <input type="hidden" name="vote_mode" id="voteMode" value="one_per_contest">

      <div class="contest-current-config" id="contestCurrentConfig">
        <div class="current-config-empty">
          <strong>Choose a walk to see its current voting configuration.</strong>
          <span class="muted">Each walk has independent photo voting rules.</span>
        </div>
      </div>

      <div class="contest-settings-grid">
        <div class="settings-card settings-card-main">
          <div class="settings-card-title">
            <span class="settings-icon">⚙</span>
            <div>
              <h3>Voting policy</h3>
              <p class="muted">Open, restrict, or close voting for the selected walk.</p>
            </div>
          </div>
          <div class="settings-field-grid">
            <label>Voting status
              <select name="voting_status" id="votingStatus">
                <option value="open">Open</option>
                <option value="closed">Closed</option>
              </select>
            </label>
            <label>Who can vote?
              <select name="voting_permission" id="votingPermission">
                <option value="any_member">Anyone logged in</option>
                <option value="walk_registered">Members registered for this walk</option>
                <option value="walk_checked_in">Members checked in to this walk</option>
                <option value="selected_groups">Members of selected groups</option>
                <option value="closed">Closed / no voting</option>
              </select>
            </label>
            <label>Voting deadline
              <input type="datetime-local" name="voting_deadline" id="votingDeadline">
            </label>
            <label class="check-row nice-check self-vote-card">
              <input type="checkbox" name="allow_self_vote" id="allowSelfVote" value="1">
              <span>Allow members to vote for their own photos</span>
            </label>
            <label class="check-row nice-check owner-name-visibility-card">
              <input type="checkbox" name="show_photo_owner_name" id="showPhotoOwnerName" value="1">
              <span><strong>Show picture owner names to members</strong><small>Turn this off to keep voting anonymous/objective.</small></span>
            </label>
            <label class="photo-limit-field">Photos per participant
              <input type="number" name="max_photos_per_participant" id="maxPhotosPerParticipant" min="1" max="50" step="1" value="1">
              <small>Example: set to 1 so a member must replace their previous photo before uploading another one.</small>
            </label>
          </div>
        </div>

        <div id="contestGroupSelector" class="settings-card contest-group-selector">
          <div class="settings-card-title">
            <span class="settings-icon">👥</span>
            <div>
              <h3>Voting groups</h3>
              <p class="muted">Used when permission is “selected groups”.</p>
            </div>
            <span id="selectedGroupsCount" class="pill">0 selected</span>
          </div>
          <div class="search-box mini">
            <span>⌕</span>
            <input id="contestGroupSearch" type="search" placeholder="Search groups...">
          </div>
          <div id="contestGroupResults" class="contest-group-results"></div>
        </div>

        <div class="settings-card settings-card-summary">
          <div class="settings-card-title">
            <span class="settings-icon">✓</span>
            <div>
              <h3>Rules summary</h3>
              <p class="muted">Fast examples for how each walk can behave.</p>
            </div>
          </div>
          <div class="contest-example-stack">
            <div><strong>Walk X</strong><span>Anyone logged in can vote.</span></div>
            <div><strong>Walk Y</strong><span>Only registered members can vote.</span></div>
            <div><strong>Walk Z</strong><span>Voting is closed for everyone.</span></div>
          </div>
          <label class="rules-note-field">Internal rules note
            <textarea name="rules_note" id="rulesNote" rows="4" placeholder="Optional internal note for admins"></textarea>
          </label>
          <div class="button-row contest-action-row">
            <button class="btn" type="button" id="saveContestSettingsBtn">Save voting rules</button>
            <button class="btn btn-danger" type="button" id="closeContestBtn">Close & select winner</button>
            <button class="btn btn-light" type="button" id="reopenContestBtn">Reopen</button>
          </div>
          <p id="contestSettingsMsg" class="notice"></p>
        </div>
      </div>
    </form>
  </section>

  <section class="panel photo-ops-panel photo-workspace-panel">
    <div class="section-head photo-workspace-head">
      <div>
        <p class="eyebrow">Gallery operations</p>
        <h2>Photo entries</h2>
        <p class="muted">Review large photo contests with visual cards, enterprise table mode, filtering, and pagination.</p>
      </div>
      <div class="view-switch" role="group" aria-label="Photo view switch">
        <button class="btn btn-small btn-light active" type="button" data-view="gallery">Gallery</button>
        <button class="btn btn-small btn-light" type="button" data-view="table">Table</button>
      </div>
    </div>

    <div class="photo-filter-bar">
      <div class="search-box photo-search-box">
        <span>⌕</span>
        <input id="photoSearch" type="search" placeholder="Search title, caption, member, group, walk...">
      </div>
      <select id="groupFilter" aria-label="Filter by group"><option value="">All groups</option></select>
      <select id="statusFilter" aria-label="Photo status filter">
        <option value="">All photo statuses</option>
        <option value="pending">Pending</option>
        <option value="approved">Approved</option>
        <option value="rejected">Rejected</option>
        <option value="winner">Winner</option>
      </select>
      <select id="contestStatusFilter" aria-label="Contest status filter">
        <option value="">All contest statuses</option>
        <option value="open">Voting open</option>
        <option value="closed">Voting closed</option>
      </select>
      <select id="permissionFilter" aria-label="Voting permission filter">
        <option value="">All permissions</option>
        <option value="any_member">Anyone</option>
        <option value="walk_registered">Walk registrants</option>
        <option value="walk_checked_in">Checked-in attendees</option>
        <option value="selected_groups">Selected groups</option>
        <option value="closed">Closed</option>
      </select>
      <select id="sortFilter" aria-label="Sort photos">
        <option value="newest">Newest first</option>
        <option value="votes_desc">Most votes</option>
        <option value="pending_first">Pending first</option>
        <option value="member_az">Member A-Z</option>
        <option value="walk_date">Walk date</option>
      </select>
    </div>

    <div class="photo-status-tabs" id="photoStatusTabs">
      <button class="active" type="button" data-status="">All</button>
      <button type="button" data-status="pending">Pending</button>
      <button type="button" data-status="approved">Approved</button>
      <button type="button" data-status="winner">Winners</button>
      <button type="button" data-status="rejected">Rejected</button>
    </div>

    <p id="adminPhotoMsg" class="notice"></p>

    <div id="photoBulkBar" class="photo-bulk-bar" hidden>
      <strong><span id="visiblePhotoCount">0</span> photos shown</strong>
      <span class="muted">Use filters to manage big galleries by walk, group, permission, status, and search.</span>
    </div>

    <div id="adminPhotosGallery" class="enterprise-photo-grid contest-gallery-grid"></div>

    <div id="adminPhotosTableWrap" class="pro-table-wrap photo-table-wrap" hidden>
      <table class="pro-table photo-pro-table">
        <thead>
          <tr>
            <th>Photo</th>
            <th>Member</th>
            <th>Walk / route</th>
            <th>Contest</th>
            <th>Location</th>
            <th>Status</th>
            <th>Votes</th>
            <th class="table-actions">Actions</th>
          </tr>
        </thead>
        <tbody id="adminPhotosTable"></tbody>
      </table>
    </div>

    <div class="photo-pagination" id="photoPagination" hidden>
      <button class="btn btn-small btn-light" type="button" id="prevPhotoPage">Previous</button>
      <span id="photoPageInfo" class="muted">Page 1</span>
      <button class="btn btn-small btn-light" type="button" id="nextPhotoPage">Next</button>
    </div>
  </section>
</main>

<div class="modal-backdrop" id="photoPreviewModal" hidden>
  <section class="modal-card photo-preview-modal" role="dialog" aria-modal="true" aria-labelledby="photoPreviewTitle">
    <div class="modal-head">
      <div>
        <p class="eyebrow">Photo preview</p>
        <h2 id="photoPreviewTitle">Photo</h2>
      </div>
      <button class="icon-btn" type="button" data-close-modal aria-label="Close">×</button>
    </div>
    <div id="photoPreviewBody"></div>
  </section>
</div>

<script>window.PYRK_API_BASE='../../api'; window.PYRK_CSRF='<?= $safe($csrf) ?>';</script>
<script src="../assets/js/api.js?v=20260607-current-config"></script>
<script src="../assets/js/admin_photos.js?v=20260706-photo-upload-limit"></script>
</body>
</html>
