<?php
require_once 'db.php';
require_once 'auth_check.php';
require_once 'currency.php';

$_sup = $conn->query("SELECT key_value FROM settings WHERE key_name='support_url'")->fetch_assoc();
$support_url = $_sup['key_value'] ?? '#';

$plans = $conn->query("SELECT * FROM plans WHERE active=1 ORDER BY sort_order ASC")->fetch_all(MYSQLI_ASSOC);

$task_videos = [];
if ($active_plan) {
    $pid = (int)$active_plan['id'];
    $task_videos = $conn->query("SELECT * FROM plan_videos WHERE plan_id=$pid AND active=1 ORDER BY id DESC LIMIT 20")->fetch_all(MYSQLI_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>WFM - Home</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',sans-serif;background:linear-gradient(160deg,#b8cba8 0%,#a8bc96 40%,#8faa7a 100%);min-height:100vh;padding-bottom:80px}

.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px}
.top-bar .lang{font-size:13px;color:#3a5a2a;font-weight:600}
.top-bar .logo-img{height:44px;object-fit:contain}
.top-bar .chat-icon{width:36px;height:36px;background:rgba(255,255,255,0.35);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none}
.top-bar .chat-icon svg{width:20px;height:20px;color:#3a5a2a}

.banner{width:calc(100% - 16px);margin:4px 8px 0;border-radius:14px;overflow:hidden}
.banner img{width:100%;height:190px;object-fit:cover;display:block}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,0.55);margin:10px 12px;border-radius:14px;padding:14px 4px 10px;backdrop-filter:blur(6px)}
.quick-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 2px;cursor:pointer;text-decoration:none}
.quick-item .qi-img{width:46px;height:46px;object-fit:contain}
.quick-item p{font-size:10.5px;color:#2a3a1a;text-align:center;font-weight:500;line-height:1.2}

.sec-title{font-size:15px;font-weight:700;color:#1a2a0a;padding:10px 14px 8px}

.claim-wrap{padding:0 12px 12px}
.claim-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.claim-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:8px;padding:6px 2px 5px;
  font-size:9.5px;font-weight:700;cursor:pointer;
  text-decoration:none;border:none;
  background:linear-gradient(160deg,#1c1c1e,#2a2a2e);
  min-height:48px;gap:4px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4)
}
.claim-btn:active{transform:scale(.92)}
.claim-btn .cb-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;text-align:center;color:#fff;letter-spacing:.2px}
.claim-btn .cb-play{width:30px;height:21px;background:#FF0000;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(255,0,0,.55)}
.claim-btn .cb-play svg{width:12px;height:12px;fill:#fff;margin-left:2px}

/* ── Task Hall horizontal scroll ── */
.task-hall-wrap{padding:0 12px 16px;overflow:hidden}
.task-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.task-scroll::-webkit-scrollbar{display:none}

/* Each item = image card + title text below, completely separate */
.mc-wrap{flex:0 0 148px;display:flex;flex-direction:column;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mc-wrap:active .mc-cover{transform:scale(.96)}

/* Image-only card */
.mc-cover{width:148px;height:148px;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:transform .15s;flex-shrink:0}
.mc-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mc-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.52) 100%);pointer-events:none}

.mc-play{position:absolute;bottom:8px;left:8px;width:30px;height:30px;background:rgba(0,0,0,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;border:none;cursor:pointer;padding:0}
.mc-play svg{width:15px;height:15px;fill:#fff;margin-left:2px}

.mc-star-btn{position:absolute;bottom:8px;right:8px;background:none;border:none;cursor:pointer;padding:2px;z-index:2}
.mc-star-btn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}
.mc-star-btn.active svg{fill:#FFD700;stroke:#FFD700}

/* Title & plan name — outside/below the card */
.mc-title{font-size:12px;font-weight:600;color:#1a2a0a;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0 1px}
.mc-plan-name{font-size:10.5px;color:#4a6030;padding:0 1px;margin-top:1px}

/* ── Vertical task list — LAST section ── */
.task-list{background:rgba(255,255,255,0.80);margin:0 12px 10px;border-radius:14px;overflow:hidden;backdrop-filter:blur(4px);box-shadow:0 2px 12px rgba(0,0,0,.07)}
.task-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(0,0,0,.06);cursor:pointer;-webkit-tap-highlight-color:transparent}
.task-row:last-child{border-bottom:none}
.task-row:active{background:rgba(0,0,0,.03)}

.tr-img-wrap{position:relative;flex-shrink:0}
.tr-img{width:60px;height:60px;border-radius:10px;object-fit:cover;display:block}
.tr-play{position:absolute;bottom:4px;left:4px;width:22px;height:22px;background:rgba(0,0,0,.55);border-radius:50%;display:flex;align-items:center;justify-content:center}
.tr-play svg{width:11px;height:11px;fill:#fff;margin-left:1px}

.tr-info{flex:1;overflow:hidden}
.tr-title{font-size:13.5px;font-weight:600;color:#1a2a0a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-sub{font-size:11px;color:#888;margin-top:3px}

.tr-star{padding:4px;flex-shrink:0}
.tr-star svg{width:24px;height:24px;fill:none;stroke:#b39ddb;stroke-width:2}
.tr-star.active svg{fill:#FFD700;stroke:#FFD700}

.no-plan{text-align:center;padding:26px 20px;color:#555;font-size:13px}

.float-service{position:fixed;bottom:80px;right:10px;display:flex;flex-direction:column;align-items:center;z-index:999;text-decoration:none}
.float-service img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.float-service span{font-size:10px;color:#3a5a2a;font-weight:600;text-align:center;margin-top:2px}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:64px;background:#fff;border-top:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-around;z-index:1000}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;flex:1;padding:6px 0}
.bn-item svg{width:22px;height:22px}
.bn-item span{font-size:10px;font-weight:600}
.bn-item.active span,.bn-item.active svg{color:#3eaabb}
.bn-item:not(.active) span,.bn-item:not(.active) svg{color:#aaa}
</style>
</head>
<body>

<div class="top-bar">
  <span class="lang">Select Language</span>
  <img src="home.png" alt="WFM" class="logo-img" onerror="this.style.display='none'">
  <a href="<?= htmlspecialchars($support_url) ?>" target="_blank" class="chat-icon">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
  </a>
</div>

<div class="banner">
  <img src="home.png" alt="WFM" onerror="this.src='https://eoproject.com/sn17/68dd35d65a93f.png'">
</div>

<div class="quick-grid">
  <?php
  $menus = [
    ['img'=>'deposit.png',      'label'=>'Recharge',        'href'=>'deposit.php'],
    ['img'=>'withdraw.png',     'label'=>'Withdraw',        'href'=>'withdraw.php'],
    ['img'=>'task.png',         'label'=>'Task',            'href'=>'task.php'],
    ['img'=>'income.png',       'label'=>'Income details',  'href'=>'income.php'],
    ['img'=>'invite_links.png', 'label'=>'Invite Friends',  'href'=>'invite.php'],
    ['img'=>'company.png',      'label'=>'Company Profile', 'href'=>'company.php'],
    ['img'=>'service.png',      'label'=>'Contact Us',      'href'=>$support_url],
    ['img'=>'download.png',     'label'=>'Download App',    'href'=>'#'],
  ];
  foreach($menus as $m): ?>
  <a href="<?= $m['href'] ?>" class="quick-item">
    <img src="<?= $m['img'] ?>" class="qi-img" alt="<?= $m['label'] ?>" onerror="this.src='https://api.wfmtr.me/static/api/images/icon/service.png'">
    <p><?= $m['label'] ?></p>
  </a>
  <?php endforeach; ?>
</div>

<div class="sec-title">Claim Task</div>
<div class="claim-wrap">
  <div class="claim-grid">
    <?php foreach($plans as $pl): ?>
    <a href="task.php?plan=<?= urlencode($pl['slug']) ?>" class="claim-btn">
      <span class="cb-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>
      <span class="cb-label"><?= htmlspecialchars($pl['name']) ?></span>
    </a>
    <?php endforeach; ?>
  </div>
</div>

<div class="sec-title">Task Hall</div>

<?php if (empty($task_videos)): ?>
  <div class="no-plan">
    <?php if (!$active_plan): ?>
      Join a plan at <a href="job.php" style="color:#3eaabb;font-weight:700">Job page</a> to see tasks.
    <?php else: ?>
      No videos yet for your plan. Check back soon!
    <?php endif; ?>
  </div>
<?php else: ?>

<!-- 1. Horizontal scroll cards — image only, title below card -->
<div class="task-hall-wrap">
  <div class="task-scroll">
    <?php foreach($task_videos as $v):
      $cover = $v['cover_img'] ?: 'https://eoproject.com/music/10652_905027_905027_Out_of_Flux_-_The_Great_Wild_-_A.jpg';
      $slug  = urlencode($active_plan['slug'] ?? '');
      $vid   = (int)$v['id'];
    ?>
    <div class="mc-wrap" onclick="goTask('<?= $slug ?>',<?= $vid ?>)">

      <!-- Card = image + play/star buttons only -->
      <div class="mc-cover">
        <img src="<?= htmlspecialchars($cover) ?>" alt="" onerror="this.src='https://via.placeholder.com/148'">
        <button class="mc-play" onclick="event.stopPropagation();goTask('<?= $slug ?>',<?= $vid ?>)">
          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <button class="mc-star-btn" onclick="event.stopPropagation();toggleStar(this)">
          <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
        </button>
      </div>

      <!-- Title below the card — separate from it -->
      <div class="mc-title"><?= htmlspecialchars($v['title']) ?></div>
      <div class="mc-plan-name"><?= htmlspecialchars($active_plan['name'] ?? '') ?></div>

    </div>
    <?php endforeach; ?>
  </div>
</div>

<!-- 2. Vertical list with star on right — last section -->
<div class="task-list">
  <?php foreach($task_videos as $v):
    $cover = $v['cover_img'] ?: 'https://eoproject.com/music/10652_905027_905027_Out_of_Flux_-_The_Great_Wild_-_A.jpg';
    $slug  = urlencode($active_plan['slug'] ?? '');
    $vid   = (int)$v['id'];
  ?>
  <div class="task-row" onclick="goTask('<?= $slug ?>',<?= $vid ?>)">
    <div class="tr-img-wrap">
      <img src="<?= htmlspecialchars($cover) ?>" class="tr-img" alt="" onerror="this.src='https://via.placeholder.com/60'">
      <div class="tr-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
    </div>
    <div class="tr-info">
      <div class="tr-title"><?= htmlspecialchars($v['title']) ?></div>
      <div class="tr-sub"><?= htmlspecialchars($active_plan['name'] ?? '') ?></div>
    </div>
    <div class="tr-star" onclick="event.stopPropagation();toggleStar(this)">
      <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
    </div>
  </div>
  <?php endforeach; ?>
</div>

<?php endif; ?>

<a href="<?= htmlspecialchars($support_url) ?>" target="_blank" class="float-service">
  <img src="care.png" alt="" onerror="this.style.display='none'">
  <span>Online Service</span>
</a>

<?php include 'navigation_bottom.php'; ?>

<script>
function goTask(planSlug, videoId) {
  window.location.href = 'task.php?plan=' + planSlug + '&video=' + videoId + '&autoplay=1';
}
function toggleStar(el) {
  el.classList.toggle('active');
}
</script>
</body>
</html>