<?php
// include "includes/header.php";
include "config.php";

// Allowed report types for tabs
$allowed_types = ['Unable to Withdraw', 'Severe Slippage', 'Scam', 'Others'];
?>

<style>
  body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f8f9fa;
  }

  /* --- Main Container Wrapper (Perfect Centering) --- */
  .protect-wrapper {
    background: #f8f9fa;1
    padding: 40px 0;
    width: 100%;
  }

  .protect-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* --- Navigation Tabs (Header) --- */
  .protect-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 16px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .protect-header-left {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }

  .protect-title {
    font-weight: 700;
    font-size: 24px;
    color: #232323;
    margin: 0;
    white-space: nowrap;
  }

  .trader-nav-list {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .trader-nav-item {
    font-size: 16px;
    color: #888;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    position: relative;
    padding-bottom: 18px;
    margin-bottom: -18px;
    /* To overlap the border bottom */
  }

  .trader-nav-item.trader-nav-active,
  .trader-nav-item:hover {
    color: #232323;
    font-weight: 700;
  }

  .trader-nav-item.trader-nav-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #232323;
    border-radius: 3px 3px 0 0;
  }

  /* --- Stats Banner --- */
  .protection-stats-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 30px;
    margin: 30px 0;
  }

  .stats-left {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #666;
  }

  .stat-item b {
    color: #232323;
    font-size: 24px;
    font-weight: 700;
  }

  .btn-exposure {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #4169e1;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    padding: 10px 30px;
    text-decoration: none;
    transition: all 0.2s;
  }

  .btn-exposure:hover {
    background: #274bb6;
    box-shadow: 0 0 0 2px red;
    /* Solid red ring on hover */
  }

  /* --- Scrollable Cards List --- */
  .protect-ul-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  #potect-ul {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 12px 10px 24px 10px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
  }

  #potect-ul::-webkit-scrollbar {
    height: 6px;
  }

  #potect-ul::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }

  .protect-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: clamp(260px, 82vw, 340px);
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #eaeaea;
    scroll-snap-align: start;
    text-decoration: none;
    color: #232323;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .protect-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('<?php echo $base_url; ?>/assets/images/logo_bg.png') center center no-repeat;
    background-size: 50%;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
  }

  .protect-card:hover {
    border-color: transparent;
    box-shadow: 0 0 0 2px red;
    /* Solid red ring on hover */
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
  }

  .card-header img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid #f0f0f0;
    padding: 2px;
  }

  .card-header span {
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }

  .card-title {
    font-size: 15px;
    font-weight: 600;
    color: #232323;
    margin: 0 0 8px 0;
    position: relative;
    z-index: 1;
  }

  .card-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 16px 0;
    flex-grow: 1;
    position: relative;
    z-index: 1;
  }

  .card-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #aaa;
    border-top: 1px dashed #eee;
    padding-top: 12px;
    position: relative;
    z-index: 1;
  }

  /* --- Mobile Responsiveness --- */
  /* ===== TABLET BREAKPOINT (max-width: 1100px) ===== */
  @media (max-width: 1100px) {
    .protect-wrapper {
      padding: 30px 0;
    }

    .protect-container {
      padding: 0 16px;
    }

    .protect-header {
      gap: 16px;
    }

    .protect-header-left {
      gap: 30px;
    }

    .protect-title {
      font-size: 20px;
    }

    .trader-nav-list {
      gap: 24px;
    }

    .trader-nav-item {
      font-size: 14px;
    }

    .protection-stats-banner {
      padding: 16px 24px;
      gap: 16px;
    }

    .stats-left {
      gap: 40px;
    }

    .stat-item {
      font-size: 14px;
    }

    .stat-item b {
      font-size: 20px;
    }

    .btn-exposure {
      font-size: 14px;
      padding: 8px 24px;
    }

    .protect-card {
      width: clamp(240px, 75vw, 300px);
    }

    #potect-ul {
      gap: 12px;
    }
  }

  /* ===== MOBILE BREAKPOINT (max-width: 768px) ===== */
  @media (max-width: 768px) {
    .protect-wrapper {
      padding: 20px 0;
    }

    .protect-container {
      padding: 0 12px;
    }

    .protect-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 12px;
    }

    .protect-header-left {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      width: 100%;
    }

    .protect-title {
      font-size: 18px;
      margin-bottom: 0;
    }

    .trader-nav-list {
      gap: 16px;
      overflow-x: auto;
      width: 100%;
      padding-bottom: 4px;
      list-style: none;
      margin: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    .trader-nav-list::-webkit-scrollbar {
      height: 4px;
    }

    .trader-nav-list::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 5px;
    }

    .trader-nav-item {
      white-space: nowrap;
      font-size: 13px;
      padding-bottom: 12px;
      margin-bottom: -12px;
    }

    .protection-stats-banner {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 16px;
    }

    .stats-left {
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }

    .stat-item {
      font-size: 13px;
      gap: 8px;
    }

    .stat-item b {
      font-size: 18px;
    }

    .btn-exposure {
      width: 100%;
      justify-content: center;
      font-size: 13px;
      padding: 8px 16px;
    }

    .protect-card {
      width: calc(100vw - 56px);
      min-width: 240px;
      padding: 16px;
    }

    .card-header {
      gap: 10px;
      margin-bottom: 10px;
    }

    .card-header img {
      width: 28px;
      height: 28px;
    }

    .card-header span {
      font-size: 14px;
    }

    .card-title {
      font-size: 14px;
      margin-bottom: 6px;
    }

    .card-desc {
      font-size: 12px;
      margin-bottom: 12px;
    }

    .card-time {
      font-size: 11px;
      gap: 4px;
    }

    #potect-ul {
      padding: 10px 8px 20px 8px;
      gap: 10px;
    }
  }

  /* ===== SMALL MOBILE BREAKPOINT (max-width: 480px) ===== */
  @media (max-width: 480px) {
    .protect-wrapper {
      padding: 12px 0;
    }

    .protect-container {
      padding: 0 8px;
    }

    .protect-header {
      gap: 8px;
      padding-bottom: 8px;
    }

    .protect-header-left {
      gap: 8px;
    }

    .protect-title {
      font-size: 16px;
      margin: 0;
    }

    .trader-nav-list {
      gap: 12px;
      overflow-x: auto;
      width: calc(100vw - 20px);
      padding-bottom: 3px;
    }

    .trader-nav-item {
      font-size: 12px;
      padding-bottom: 10px;
      margin-bottom: -10px;
    }

    .protection-stats-banner {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      padding: 10px 12px;
    }

    .stats-left {
      flex-direction: column;
      gap: 8px;
    }

    .stat-item {
      font-size: 12px;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .stat-item b {
      font-size: 16px;
    }

    .btn-exposure {
      width: 100%;
      font-size: 12px;
      padding: 6px 12px;
      gap: 6px;
    }

    .btn-exposure i {
      display: none;
    }

    .protect-card {
      width: calc(100vw - 32px);
      min-width: 220px;
      padding: 12px;
    }

    .card-header {
      gap: 8px;
      margin-bottom: 8px;
    }

    .card-header img {
      width: 24px;
      height: 24px;
    }

    .card-header span {
      font-size: 12px;
    }

    .card-title {
      font-size: 12px;
      margin-bottom: 4px;
    }

    .card-desc {
      font-size: 11px;
      margin-bottom: 10px;
    }

    .card-time {
      font-size: 10px;
      gap: 3px;
    }

    #potect-ul {
      padding: 8px 4px 16px 4px;
      gap: 8px;
    }
  }

</style>

<div class="protect-wrapper">
  <div class="protect-container">

    <div class="protect-header">
      <div class="protect-header-left">
        <h2 class="protect-title">Rights Protection Center</h2>
        <ul id="tabs" class="trader-nav-list">
          <?php foreach ($allowed_types as $tab): ?>
            <li>
              <a href="?type=<?= urlencode($tab) ?>"
                style="text-decoration:none;"
                class="trader-nav-item <?= (isset($_GET['type']) && $_GET['type'] === $tab) ? 'trader-nav-active' : '' ?>"
                data-type="<?= htmlspecialchars($tab) ?>">
                <?= htmlspecialchars($tab) ?>
              </a>
            </li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>

    <div class="protection-stats-banner">
      <div class="stats-left">
        <div class="stat-item">
          <span>Amount resolved within one month(USD)</span>
          <b>$65,373,945</b>
        </div>
        <div class="stat-item">
          <span>Number of People Resolved</span>
          <b>15,067</b>
        </div>
      </div>
      <a href="includes/exposure.php" target="_blank" class="btn-exposure">
        <span class="fas fa-bullhorn"></span>
        <i>Exposure</i>
      </a>
    </div>

    <div class="protect-ul-wrapper">
      <div id="potect-ul" aria-live="polite" aria-busy="false">
      </div>
    </div>

  </div>
</div>

<script>
  const tabs = document.getElementById('tabs');
  const container = document.getElementById('potect-ul');
  let autoSlideTimer = null;

  function cardStep() {
    const firstCard = container.querySelector('.protect-card');
    if (!firstCard) return Math.max(320, Math.floor(container.clientWidth * 0.85));
    const style = window.getComputedStyle(container);
    const gap = parseInt(style.columnGap || style.gap || '0', 10) || 0;
    return firstCard.offsetWidth + gap;
  }

  function slideNext() {
    const step = cardStep();
    const maxLeft = container.scrollWidth - container.clientWidth;
    if (container.scrollLeft + step >= maxLeft - 2) {
      container.scrollTo({
        left: 0,
        behavior: 'smooth'
      });
      return;
    }
    container.scrollBy({
      left: step,
      behavior: 'smooth'
    });
  }

  function startAutoSlide() {
    stopAutoSlide();
    autoSlideTimer = setInterval(slideNext, 4200);
  }

  function stopAutoSlide() {
    if (autoSlideTimer) {
      clearInterval(autoSlideTimer);
      autoSlideTimer = null;
    }
  }

  container.addEventListener('mouseenter', stopAutoSlide);
  container.addEventListener('mouseleave', startAutoSlide);
  container.addEventListener('touchstart', stopAutoSlide, {
    passive: true
  });
  container.addEventListener('touchend', startAutoSlide, {
    passive: true
  });

  // Escape HTML to avoid XSS
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  // Render reports cards with New HTML Structure
  function renderReports(reports) {
    if (!reports.length) {
      container.innerHTML = '<p style="color:#888; padding: 20px;">No reports found in this category.</p>';
      return;
    }

    container.innerHTML = reports.map(report => `
      <a href="${escapeHtml(report.report_url)}" target="_blank" class="protect-card">
        <div class="card-header">
          <img alt="${escapeHtml(report.broker_name)}" src="./uploads/${escapeHtml(report.broker_image_url)}" loading="lazy">
          <span>${escapeHtml(report.broker_name)}</span>
        </div>
        <h3 class="card-title">${escapeHtml(report.title)}</h3>
        <p class="card-desc">${escapeHtml(report.description)}</p>
        <div class="card-time">
          <span class="far fa-clock"></span>
          <span>${new Date(report.report_date).toLocaleString()}</span>
        </div>
      </a>
    `).join('');
  }

  // Load reports by selected type from server
  async function loadReports(type) {
    container.setAttribute('aria-busy', 'true');
    container.innerHTML = '<p style="color:#888; padding: 20px;">Loading reports...</p>';
    try {
      const res = await fetch(`protection_reports.php?type=${encodeURIComponent(type)}`);
      if (!res.ok) throw new Error('Network response was not ok');
      const data = await res.json();
      renderReports(data);
    } catch (error) {
      container.innerHTML = '<p style="color:red; padding: 20px;">Failed to load reports.</p>';
      console.error(error);
    }
    container.setAttribute('aria-busy', 'false');
  }

  // Tab click handler with keyboard support
  tabs.addEventListener('click', e => {
    if (e.target.tagName.toLowerCase() !== 'a') return;
    e.preventDefault();
    const type = e.target.dataset.type;
    if (!type) return;

    tabs.querySelectorAll('a').forEach(a => {
      a.classList.remove('trader-nav-active');
      a.setAttribute('aria-selected', 'false');
      a.setAttribute('tabindex', '-1');
    });

    e.target.classList.add('trader-nav-active');
    e.target.setAttribute('aria-selected', 'true');
    e.target.setAttribute('tabindex', '0');

    loadReports(type);
  });

  // Load default tab reports on page load
  document.addEventListener('DOMContentLoaded', () => {
    const activeTab = tabs.querySelector('a.trader-nav-active') || tabs.querySelector('a');
    if (activeTab) {
      loadReports(activeTab.dataset.type);
    }
    startAutoSlide();
  });
</script>