<?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; }
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Manage branding & footer</title>
  <link rel="stylesheet" href="../assets/css/app.css">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>
<main class="container admin-wide">
  <section class="page-hero admin-hero dashboard-hero">
    <div>
      <p class="eyebrow">Site settings</p>
      <h1>Branding & footer</h1>
      <p class="muted">Control the top logo, admin/client portal names, subtitle, public footer, contact details, quick links, and social links.</p>
    </div>
    <div class="hero-actions">
      <a class="btn btn-light" href="../index.php">View client portal</a>
      <button class="btn" type="button" id="saveFooterTopBtn">Save settings</button>
    </div>
  </section>

  <section class="footer-admin-grid">
    <form class="panel footer-admin-form" id="footerForm" enctype="multipart/form-data">
      <div class="full section-head">
        <div>
          <p class="eyebrow">Top navigation</p>
          <h2>Logo and portal names</h2>
          <p class="muted">This controls the logo/name shown at the top-left of every admin and client page.</p>
        </div>
      </div>

      <label>Logo initials fallback
        <input name="header_logo_text" maxlength="6" placeholder="PY">
      </label>

      <label>Upload top logo
        <input name="header_logo_image" type="file" accept="image/png,image/jpeg,image/webp">
      </label>

      <label>Admin portal name
        <input name="header_admin_brand_name" maxlength="120" placeholder="Pyrk Admin">
      </label>

      <label>Client portal name
        <input name="header_client_brand_name" maxlength="120" placeholder="Pyrk">
      </label>

      <label class="full">Subtitle under name
        <input name="header_subtitle" maxlength="120" placeholder="Walking Club">
      </label>

      <div class="full brand-preview-box">
        <div class="brand-preview-title">Current top logo preview</div>
        <div class="brand-preview-row">
          <span class="brand-preview-mark" id="headerLogoPreviewMark">PY</span>
          <div>
            <strong id="headerAdminNamePreview">Pyrk Admin</strong>
            <small id="headerSubtitlePreview">Walking Club</small>
          </div>
        </div>
        <label class="footer-toggle-card brand-remove-logo"><input type="checkbox" name="header_remove_logo" value="1"> Remove uploaded logo and use initials</label>
      </div>

      <div class="full section-head section-divider-soft">
        <div>
          <p class="eyebrow">Footer content</p>
          <h2>Brand and message</h2>
        </div>
      </div>

      <label>Enable footer
        <select name="footer_enabled">
          <option value="1">Enabled</option>
          <option value="0">Disabled</option>
        </select>
      </label>

      <label>Footer logo text
        <input name="footer_logo_text" maxlength="8" placeholder="PY">
      </label>

      <label>Footer brand name
        <input name="footer_brand_name" maxlength="120" placeholder="Pyrk Walking Club">
      </label>

      <label>Footer tagline
        <input name="footer_tagline" maxlength="180" placeholder="Walk together. Grow stronger.">
      </label>

      <label class="full">Footer description
        <textarea name="footer_description" maxlength="900" placeholder="Write a short footer description..."></textarea>
      </label>

      <label class="full">Accent note
        <input name="footer_accent_note" maxlength="220" placeholder="Safety, community, wellness, and memories from every walk.">
      </label>

      <div class="full section-head section-divider-soft">
        <div>
          <p class="eyebrow">Contact and social</p>
          <h2>Public information</h2>
        </div>
      </div>

      <label>Address
        <input name="footer_address" maxlength="220" placeholder="Beirut, Lebanon">
      </label>

      <label>Phone
        <input name="footer_phone" maxlength="60" placeholder="+961 ...">
      </label>

      <label>Email
        <input name="footer_email" type="email" maxlength="180" placeholder="hello@pyrk.com">
      </label>

      <label>WhatsApp URL
        <input name="footer_whatsapp_url" maxlength="260" placeholder="https://wa.me/961...">
      </label>

      <label>Instagram URL
        <input name="footer_instagram_url" maxlength="260" placeholder="https://instagram.com/...">
      </label>

      <label>Facebook URL
        <input name="footer_facebook_url" maxlength="260" placeholder="https://facebook.com/...">
      </label>

      <label class="full">Copyright line
        <input name="footer_copyright" maxlength="220" placeholder="© {year} Pyrk Walking Club. All rights reserved.">
      </label>

      <div class="full footer-toggle-grid">
        <label class="footer-toggle-card"><input type="checkbox" name="footer_show_quick_links" value="1"> Quick links</label>
        <label class="footer-toggle-card"><input type="checkbox" name="footer_show_contact" value="1"> Contact</label>
        <label class="footer-toggle-card"><input type="checkbox" name="footer_show_social" value="1"> Social</label>
      </div>

      <div class="full form-actions">
        <button class="btn" type="submit">Save settings</button>
        <button class="btn btn-light" type="button" id="previewFooterBtn">Refresh preview</button>
        <p class="notice" id="footerMsg"></p>
      </div>
    </form>

    <aside class="panel footer-preview-card">
      <div class="section-head">
        <div>
          <p class="eyebrow">Live preview</p>
          <h2>Header and footer appearance</h2>
        </div>
      </div>
      <div class="header-preview-card" id="headerPreview"></div>
      <div class="footer-preview-inner" id="footerPreview"></div>
    </aside>
  </section>
</main>
<script>window.PYRK_API_BASE='../../api'; window.PYRK_CSRF='<?= htmlspecialchars($csrf) ?>';</script>
<script src="../assets/js/api.js"></script>
<script src="../assets/js/admin_footer.js"></script>
</body>
</html>
