<?php
session_start();
include 'db.php';

$user_id = $_SESSION['user_id'] ?? 0;

if(!$user_id){
    header("Location: login.php");
    exit;
}

/* =========================================================
   DATE / TIME
========================================================= */

date_default_timezone_set("Africa/Nairobi");

$today = date("Y-m-d");
$dayOfWeek = date("w"); // Sunday = 0


/* =========================================================
   USER ACCOUNT CREATION DATE
========================================================= */

$userStmt = $conn->prepare("
    SELECT created_at
    FROM users
    WHERE id=?
    LIMIT 1
");

$userStmt->bind_param("i", $user_id);
$userStmt->execute();

$userResult = $userStmt->get_result();

$userCreatedAt = null;

if($userResult->num_rows){

    $userRow = $userResult->fetch_assoc();

    $userCreatedAt = $userRow['created_at'];
}


/* =========================================================
   CHECK INVESTMENT
========================================================= */

$hasInvestment = false;
$currentLevel = 0;

$investmentStmt = $conn->prepare("
    SELECT level
    FROM investments
    WHERE user_id=?
    ORDER BY level DESC
    LIMIT 1
");

$investmentStmt->bind_param("i", $user_id);
$investmentStmt->execute();

$investmentResult = $investmentStmt->get_result();

if($investmentResult->num_rows){

    $hasInvestment = true;

    $investmentRow = $investmentResult->fetch_assoc();

    $currentLevel = (int)$investmentRow['level'];
}


/* =========================================================
   DAILY TASK LIMIT
========================================================= */

if(!$hasInvestment){

    /*
       No investment = 3 tasks
    */

    $dailyTaskLimit = 3;

}else{

    if($currentLevel == 1){

        $dailyTaskLimit = 5;

    }elseif($currentLevel == 2){

        $dailyTaskLimit = 7;

    }elseif($currentLevel >= 3){

        $dailyTaskLimit = 10;

    }else{

        $dailyTaskLimit = 3;
    }
}


/* =========================================================
   COUNT TODAY'S COMPLETED TASKS
========================================================= */

$completedToday = 0;

$taskStmt = $conn->prepare("
    SELECT COUNT(*) AS total
    FROM task_records
    WHERE user_id=?
    AND DATE(created_date)=?
    AND LOWER(status)='completed'
");

$taskStmt->bind_param(
    "is",
    $user_id,
    $today
);

$taskStmt->execute();

$taskResult = $taskStmt->get_result();

if($taskResult->num_rows){

    $taskRow = $taskResult->fetch_assoc();

    $completedToday = (int)$taskRow['total'];
}


/*
   Never display more completed tasks
   than the user's daily task limit.
*/

if($completedToday > $dailyTaskLimit){

    $completedToday = $dailyTaskLimit;
}


/* =========================================================
   FREE TASK PERIOD
========================================================= */

/*
   User without investment gets 3 days
   from account creation.
*/

$freeTaskExpired = false;

if(!$hasInvestment && $userCreatedAt){

    $freeEndTimestamp =
        strtotime($userCreatedAt . " +3 days");

    if(time() >= $freeEndTimestamp){

        $freeTaskExpired = true;
    }
}


/* =========================================================
   CHECK WHETHER USER IS STILL IN FREE PERIOD
========================================================= */

$freeTaskActive = false;

if(!$hasInvestment && $userCreatedAt && !$freeTaskExpired){

    $freeTaskActive = true;
}


/* =========================================================
   DAILY TASK ACCESS CONTROL
========================================================= */

$isSunday = ($dayOfWeek == 0);

$dailyTaskAllowed = true;

$dailyTaskMessage = "";


/*
   IMPORTANT SUNDAY RULE:

   1. No investment + free 3 days still active
      = ALLOWED even on Sunday.

   2. Has investment
      = NOT ALLOWED on Sunday.

   3. No investment + free 3 days expired
      = NOT ALLOWED anyway.
*/

if(!$hasInvestment && $freeTaskActive){

    /*
       Free users within their 3-day period
       can access Daily Task even on Sunday.
    */

    $dailyTaskAllowed = true;

    $dailyTaskMessage = "";

}elseif($isSunday){

    /*
       Investment users cannot do tasks on Sunday.
    */

    $dailyTaskAllowed = false;

    $dailyTaskMessage =
        "Daily tasks are not available on Sunday.";

}elseif(!$hasInvestment && $freeTaskExpired){

    /*
       Free period has ended.
    */

    $dailyTaskAllowed = false;

    $dailyTaskMessage =
        "Your free task period has ended.<br><br>" .
        "Please upgrade first to continue using Daily Tasks.";
}


/* =========================================================
   DAILY TASK CLICK
========================================================= */

function openDailyTask(){

    global $dailyTaskAllowed;

    if($dailyTaskAllowed){

        echo "location.href='task.php';";

    }else{

        echo "showTaskRestriction();";
    }
}

?>
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width,initial-scale=1">

<title>Snapshot</title>

<style>

*{
box-sizing:border-box;
margin:0;
padding:0
}

body{
font-family:Arial,sans-serif;
background:#fff;
color:#333;
overflow-x:hidden;
padding-bottom:70px
}


/* =================================================
   HEADER
================================================= */

.header{
height:110px;
background:#11723b;
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 28px
}

.logo{
font-size:43px
}

.header h1{
font-size:30px
}

.head-icons{
display:flex;
gap:25px;
font-size:38px
}


/* =================================================
   MAIN
================================================= */

.main{
background:#f8f9f9;
padding-bottom:25px
}


/* =================================================
   BANNER
================================================= */

.banner{
width:94%;
max-width:780px;
margin:34px auto 45px;
padding:26px;
background:#087c48;
border-radius:27px
}

.banner-top{
color:#fff;
font-size:22px;
margin:0 0 25px 10px
}

.banner img{
display:block;
width:100%;
border-radius:22px
}


/* =================================================
   GRID
================================================= */

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:45px 20px;
padding:40px 5.5% 60px;
background:#fff
}

.item{
text-align:center;
min-width:0;
cursor:pointer
}

.icon{
width:120px;
height:120px;
margin:auto;
border-radius:30px;
object-fit:cover;
display:block;
box-shadow:0 4px 18px #eee
}

.name{
font-size:20px;
color:#aaa;
line-height:1.35;
margin-top:16px
}


/* =================================================
   TEAM REWARDS
================================================= */

.extra{
background:#fff;
padding:0 2.5% 45px
}

.section-title{
font-size:28px;
font-weight:bold;
color:#176f43;
display:flex;
align-items:center;
gap:12px;
margin:0 0 25px 5px
}

.section-title:before{
content:"";
width:7px;
height:48px;
background:#176f43;
border-radius:5px;
display:block
}

.team-rewards{
width:100%;
overflow:hidden;
border-radius:0 0 20px 20px;
cursor:pointer
}

.team-rewards img{
display:block;
width:100%;
height:auto;
object-fit:cover
}


/* =================================================
   DAILY TASK
================================================= */

.daily-title{
margin-top:10px
}

.daily-card{
position:relative;
width:100%;
height:400px;
border-radius:45px;
overflow:hidden;
background:#fff;
box-shadow:0 3px 18px rgba(0,0,0,.14);
cursor:pointer
}

.daily-card:before{
content:"";
position:absolute;
right:-10%;
top:-45%;
width:70%;
height:95%;
background:#c56569;
border-radius:0 0 0 100%
}

.daily-card:after{
content:"";
position:absolute;
left:-8%;
bottom:-32%;
width:82%;
height:48%;
background:#57917b;
border-radius:0 100% 0 0
}

.daily-content{
position:relative;
z-index:3;
padding:42px 32px
}

.daily-heading{
font-size:30px;
font-weight:bold;
color:#087c48;
margin-bottom:38px
}

.task-count{
display:inline-flex;
align-items:center;
justify-content:center;
background:#d9363e;
color:#fff;
font-size:27px;
font-weight:bold;
border-radius:35px;
padding:13px 27px;
margin-bottom:22px
}

.task-text{
font-size:22px;
line-height:1.45;
color:#aaa;
max-width:60%
}

.all-tasks{
position:absolute;
z-index:5;
left:32px;
bottom:20px;
border:0;
background:#08b86a;
color:#fff;
font-size:20px;
padding:17px 38px;
border-radius:18px;
cursor:pointer
}

.shield{
position:absolute;
z-index:4;
right:8%;
top:11%;
width:230px;
height:230px;
border:9px solid #fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center
}

.shield-icon{
font-size:80px
}


/* =================================================
   POPULAR IMAGES
================================================= */

.popular{
background:#fff;
padding:0 4% 60px
}

.popular-head{
display:flex;
align-items:center;
justify-content:space-between;
margin:0 0 35px 5px
}

.popular-title{
font-size:28px;
font-weight:bold;
color:#176f43;
display:flex;
align-items:center;
gap:12px
}

.popular-title:before{
content:"";
width:7px;
height:48px;
background:#176f43;
border-radius:5px;
display:block
}

.view-more{
font-size:24px;
color:#176f43;
cursor:pointer;
white-space:nowrap
}

.popular-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:45px 5.5%
}

.popular-item{
width:100%;
aspect-ratio:1/1.32;
overflow:hidden;
cursor:pointer;
background:#eee
}

.popular-item img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:transform .3s ease
}

.popular-item:active img{
transform:scale(.97)
}


/* =================================================
   COMMISSION PER TASK
================================================= */

.commission{
background:#fff;
padding:0 3.5% 65px
}

.commission-title{
font-size:28px;
font-weight:bold;
color:#176f43;
display:flex;
align-items:center;
gap:12px;
margin:0 0 30px 5px
}

.commission-title:before{
content:"";
width:7px;
height:48px;
background:#176f43;
border-radius:5px;
display:block
}

.commission-box{
width:100%;
height:330px;
background:#fff;
border-radius:35px;
box-shadow:0 3px 20px rgba(0,0,0,.08);
overflow:hidden;
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:25px
}

.commission-marquee{
width:100%;
height:150px;
overflow:hidden;
position:relative
}

.commission-message{
position:absolute;
left:0;
width:100%;
height:150px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:0 35px;
font-size:27px;
line-height:1.45;
color:#6d4b25;
transform:translateY(0);
transition:transform .65s ease-in-out
}

.commission-message.exit{
transform:translateY(-110%)
}

.commission-message.next{
transform:translateY(110%)
}

.commission-message.active{
transform:translateY(0)
}


/* =================================================
   RESTRICTION POPUP
================================================= */

#taskRestrictionPopup{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.48);
z-index:99999;
backdrop-filter:blur(2px)
}

.restriction-box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:300px;
background:#fff;
border-radius:16px;
padding:25px 20px;
text-align:center;
box-shadow:0 10px 35px rgba(0,0,0,.25);
animation:restrictionIn .2s ease
}

@keyframes restrictionIn{

from{
opacity:0;
transform:translate(-50%,-50%) scale(.9)
}

to{
opacity:1;
transform:translate(-50%,-50%) scale(1)
}

}

.restriction-icon{
width:55px;
height:55px;
margin:0 auto 14px;
border-radius:50%;
background:#fff2df;
color:#e58b13;
display:flex;
align-items:center;
justify-content:center;
font-size:27px;
font-weight:bold
}

.restriction-title{
font-size:19px;
font-weight:bold;
color:#222;
margin-bottom:10px
}

.restriction-message{
font-size:13px;
line-height:1.6;
color:#777;
margin-bottom:20px
}

.restriction-buttons{
display:flex;
gap:10px
}

.restriction-buttons button{
flex:1;
height:40px;
border:0;
border-radius:8px;
font-size:12px;
font-weight:bold;
cursor:pointer
}

.restriction-close{
background:#e8e8e8;
color:#333
}

.upgrade-now{
background:#087c48;
color:#fff
}


/* =================================================
   MOBILE
================================================= */

@media(max-width:600px){

.header{
height:78px;
padding:0 16px
}

.logo{
font-size:30px
}

.header h1{
font-size:22px
}

.head-icons{
font-size:25px;
gap:14px
}

.banner{
width:94%;
margin:20px auto 25px;
padding:15px;
border-radius:20px
}

.banner-top{
font-size:15px;
margin:0 0 15px 5px
}

.banner img{
border-radius:14px
}

.grid{
gap:28px 7px;
padding:25px 4% 40px
}

.icon{
width:72px;
height:72px;
border-radius:19px
}

.name{
font-size:13px;
margin-top:9px
}


/* TEAM REWARDS */

.extra{
padding:0 2.5% 30px
}

.section-title{
font-size:16px;
gap:8px;
margin-bottom:17px
}

.section-title:before{
width:5px;
height:35px
}

.team-rewards{
border-radius:0 0 15px 15px
}


/* DAILY TASK */

.daily-title{
margin-top:4px
}

.daily-card{
height:210px;
border-radius:25px
}

.daily-content{
padding:27px 22px
}

.daily-heading{
font-size:18px;
margin-bottom:10px
}

.task-count{
font-size:15px;
padding:10px 22px;
margin-bottom:10px
}

.task-text{
font-size:14px;
max-width:64%
}

.all-tasks{
left:22px;
bottom:18px;
font-size:14px;
padding:13px 25px;
border-radius:15px
}

.shield{
width:145px;
height:145px;
border-width:6px;
right:5%;
top:12%
}

.shield-icon{
font-size:52px
}


/* POPULAR */

.popular{
padding:0 4% 40px
}

.popular-head{
margin-bottom:22px
}

.popular-title{
font-size:16px;
gap:8px
}

.popular-title:before{
width:5px;
height:35px
}

.view-more{
font-size:15px
}

.popular-grid{
gap:25px 6%
}

.popular-item{
aspect-ratio:1/1.30
}


/* COMMISSION */

.commission{
padding:0 3% 45px
}

.commission-title{
font-size:20px;
gap:8px;
margin-bottom:20px
}

.commission-title:before{
width:5px;
height:35px
}

.commission-box{
height:150px;
border-radius:25px;
padding:15px
}

.commission-marquee{
height:120px
}

.commission-message{
height:120px;
font-size:17px;
line-height:1.5;
padding:0 18px
}


/* POPUP */

.restriction-box{
width:280px;
padding:22px 18px
}

}


/* =================================================
   SMALL PHONES
================================================= */

@media(max-width:380px){

.grid{
gap:25px 4px;
padding-left:3%;
padding-right:3%
}

.icon{
width:65px;
height:65px
}

.name{
font-size:12px
}

.section-title{
font-size:20px
}

.daily-card{
height:285px;
border-radius:30px
}

.daily-content{
padding:23px 18px
}

.daily-heading{
font-size:20px
}

.task-count{
font-size:19px
}

.task-text{
font-size:13px
}

.all-tasks{
left:18px;
bottom:15px;
font-size:14px;
padding:11px 22px
}

.shield{
width:125px;
height:125px
}

.shield-icon{
font-size:45px
}

.popular-title{
font-size:15px
}

.view-more{
font-size:14px
}

.commission-title{
font-size:16px
}

.commission-box{
height:130px
}

.commission-marquee{
height:65px
}

.commission-message{
height:65px;
font-size:15px;
padding:0 12px
}

}


/* =================================================
   BOTTOM NAV
================================================= */

.bottom-nav{
position:fixed;
left:0;
right:0;
bottom:0;
height:64px;
background:#fff;
border-top:1px solid #eee;
display:grid;
grid-template-columns:repeat(5,1fr);
z-index:100
}

.nav{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
font-size:14px;
color:#333;
text-decoration:none;
position:relative
}

.nav svg{
width:30px;
height:30px
}

.nav.active{
color:#258fc5
}

.vip{
position:relative
}

.vip-circle{
position:absolute;
top:-40px;
width:68px;
height:68px;
border-radius:50%;
background:#087b63;
border:5px solid #fff;
display:flex;
align-items:center;
justify-content:center
}

.vip-diamond{
width:35px;
height:28px;
border:3px solid #fff;
clip-path:polygon(
15% 0,
85% 0,
100% 35%,
50% 100%,
0 35%
);
background:transparent
}

.vip span{
margin-top:30px
}

</style>

</head>


<body>


<!-- =================================================
     HEADER
================================================= -->

<header class="header">

<div class="logo">📷</div>

<h1>Snapshot</h1>

<div class="head-icons">

<span onclick="location.href='download.php'">♧</span>

<span onclick="location.href='settings.php'">◉</span>

</div>

</header>


<!-- =================================================
     MAIN
================================================= -->

<main class="main">


<!-- =================================================
     BANNER
================================================= -->

<div class="banner">

<div class="banner-top">
🔊 &nbsp;Complete as many tasks as you can!
</div>

<img
src="bannerg.jpeg"
alt="Banner">

</div>


<!-- =================================================
     MAIN GRID
================================================= -->

<div class="grid">


<div
class="item"
onclick="location.href='recharge.html'">

<img
class="icon"
src="rechn.png"
alt="Recharge">

<div class="name">
Recharge
</div>

</div>


<div
class="item"
onclick="location.href='withdraw.php'">

<img
class="icon"
src="withn.png"
alt="Withdrawal">

<div class="name">
Withdrawal
</div>

</div>


<div
class="item"
onclick="location.href='invite.php'">

<img
class="icon"
src="sharen.png"
alt="Share">

<div class="name">
Share<br>
friends
</div>

</div>


<div
class="item"
onclick="location.href='tutorial.php'">

<img
class="icon"
src="tutn.png"
alt="Tutorial">

<div class="name">
Tutorial
</div>

</div>


<div
class="item"
onclick="location.href='wealth.php'">

<img
class="icon"
src="grown.png"
alt="Growth">

<div class="name">
Growth
</div>

</div>


<div
class="item"
onclick="location.href='lucky.php'">

<img
class="icon"
src="luckyn.png"
alt="Lucky Box">

<div class="name">
Lucky Box
</div>

</div>


<div
class="item"
onclick="location.href='https://www.snapshot.top/about-us.html'">

<img
class="icon"
src="compn.png"
alt="Company Profile">

<div class="name">
Company<br>
Profile
</div>

</div>


<div
class="item"
onclick="location.href='bonus.php'">

<img
class="icon"
src="accumn.png"
alt="Accumulated Bonus">

<div class="name">
Accumulated<br>
Bonus
</div>

</div>


<div
class="item"
onclick="location.href='dynamics.php'">

<img
class="icon"
src="dailyn.png"
alt="News">

<div class="name">
Daily<br>
Dynamics
</div>

</div>


<div
class="item"
onclick="location.href='moments.php'">

<img
class="icon"
src="ourn.png"
alt="Invite">

<div class="name">
Our<br>
Moments
</div>

</div>


<div
class="item"
onclick="location.href='welfare.php'">

<img
class="icon"
src="weln.png"
alt="Savings">

<div class="name">
Welfare<br>
Subsides
</div>

</div>


</div>


<!-- =================================================
     TEAM REWARDS + DAILY TASK
================================================= -->

<section class="extra">


<div class="section-title">
TEAM REWARDS
</div>


<div
class="team-rewards"
onclick="location.href='promotion.php'">

<img
src="bannn.jpeg"
alt="Team Rewards">

</div>


<!-- =================================================
     DAILY TASK TITLE
================================================= -->

<div class="section-title daily-title">
Daily Task
</div>


<!-- =================================================
     DAILY TASK CARD
================================================= -->

<div
class="daily-card"
onclick="<?php openDailyTask(); ?>"
>


<div class="daily-content">


<div class="daily-heading">
Daily Task
</div>


<!-- =================================================
     TASK COUNT
================================================= -->

<div class="task-count">

<?php

echo $completedToday . "/" . $dailyTaskLimit;

?>

</div>


<!-- =================================================
     TASK TEXT
================================================= -->

<div class="task-text">

<?php if($completedToday >= $dailyTaskLimit): ?>

You've accomplished
<?php echo $completedToday; ?>/<?php echo $dailyTaskLimit; ?>
tasks,<br>
congratulations! 🎉

<?php else: ?>

You've accomplished
<?php echo $completedToday; ?>/<?php echo $dailyTaskLimit; ?>
tasks.

<?php endif; ?>

</div>


</div>


<div class="shield">
<div class="shield-icon">🛡️</div>
</div>


<button
class="all-tasks"
onclick="event.stopPropagation();<?php openDailyTask(); ?>">

ALL TASKS

</button>


</div>

</section>


<!-- =================================================
     POPULAR IMAGES
================================================= -->

<section class="popular">


<div class="popular-head">

<div class="popular-title">
Popular images
</div>


<div
class="view-more"
onclick="location.href='task.php'">

View More &gt;

</div>

</div>


<div
class="popular-grid"
id="popularGrid">


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


<div
class="popular-item"
onclick="location.href='task.php'">

<img alt="Popular image">

</div>


</div>

</section>


<!-- =================================================
     COMMISSION PER TASK
================================================= -->

<section class="commission">


<div class="commission-title">
Commission per task
</div>


<div class="commission-box">


<div
class="commission-marquee"
id="commissionMarquee">


<div class="commission-message active">

799****2360, you have completed today’s
task and earned TSH4500.

</div>


<div class="commission-message next">

728****1842, you have completed today’s
task and earned TSH3800.

</div>


<div class="commission-message next">

906****5217, you have completed today’s
task and earned TSH5200.

</div>


<div class="commission-message next">

813****4076, you have completed today’s
task and earned TSH3000.

</div>


<div class="commission-message next">

755****9631, you have completed today’s
task and earned TSH4500.

</div>


<div class="commission-message next">

901****2754, you have completed today’s
task and earned TSH6100.

</div>


<div class="commission-message next">

809****3421, you have completed today’s
task and earned TSH2700.

</div>


<div class="commission-message next">

703****8165, you have completed today’s
task and earned TSH4000.

</div>


</div>

</div>

</section>


</main>


<!-- =================================================
     BOTTOM NAVIGATION
================================================= -->

<nav class="bottom-nav">


<a
href="#"
class="nav active">

<svg
viewBox="0 0 40 40"
fill="none">

<path
d="M5 19L20 5l15 14"
stroke="currentColor"
stroke-width="2.5"
/>

<path
d="M9 18v15h8V23h6v10h8V18"
stroke="currentColor"
stroke-width="2.5"
/>

</svg>

<span>
Home
</span>

</a>


<a
href="promotion.php"
class="nav">

<svg
viewBox="0 0 40 40"
fill="none">

<circle
cx="20"
cy="20"
r="14"
stroke="currentColor"
stroke-width="2.5"
/>

<path
d="M20 17v9M20 12h.01"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
/>

</svg>

<span>
Promotion
</span>

</a>


<a
href="vip.php"
class="nav vip">

<div class="vip-circle">

<div class="vip-diamond"></div>

</div>

<span>
VIP
</span>

</a>


<a
href="invite.php"
class="nav">

<svg
viewBox="0 0 40 40"
fill="none">

<circle
cx="20"
cy="11"
r="4"
stroke="currentColor"
stroke-width="2"
/>

<circle
cx="10"
cy="25"
r="4"
stroke="currentColor"
stroke-width="2"
/>

<circle
cx="30"
cy="25"
r="4"
stroke="currentColor"
stroke-width="2"
/>

<path
d="M17 13l-5 8M23 13l5 8M14 25h12"
stroke="currentColor"
stroke-width="2"
/>

</svg>

<span>
Invite
</span>

</a>


<a
href="me.php"
class="nav">

<svg
viewBox="0 0 40 40"
fill="none">

<circle
cx="20"
cy="11"
r="5"
stroke="currentColor"
stroke-width="2.5"
/>

<path
d="M9 34c1-7 5-11 11-11s10 4 11 11"
stroke="currentColor"
stroke-width="2.5"
/>

</svg>

<span>
My
</span>

</a>


</nav>


<!-- =================================================
     TASK RESTRICTION POPUP
================================================= -->

<div id="taskRestrictionPopup">


<div class="restriction-box">


<div class="restriction-icon">
!
</div>


<div class="restriction-title">
Daily Task Unavailable
</div>


<div
class="restriction-message"
id="restrictionMessage">

</div>


<div class="restriction-buttons">


<button
type="button"
class="restriction-close"
onclick="closeTaskRestriction()">

Close

</button>


<button
type="button"
class="upgrade-now"
onclick="location.href='vip.php'">

Upgrade Now

</button>


</div>


</div>

</div>


<script>

/* =================================================
   POPUP DATA FROM PHP
================================================= */

const dailyTaskAllowed =
<?php echo $dailyTaskAllowed ? 'true' : 'false'; ?>;


const dailyTaskMessage =
<?php
echo json_encode($dailyTaskMessage);
?>;


/* =================================================
   DAILY TASK RESTRICTION POPUP
================================================= */

function showTaskRestriction(){

    const popup =
        document.getElementById(
            "taskRestrictionPopup"
        );

    const message =
        document.getElementById(
            "restrictionMessage"
        );

    if(message){

        message.innerHTML =
            dailyTaskMessage;
    }

    if(popup){

        popup.style.display =
            "block";
    }

}


function closeTaskRestriction(){

    const popup =
        document.getElementById(
            "taskRestrictionPopup"
        );

    if(popup){

        popup.style.display =
            "none";
    }

}


/* =================================================
   RANDOM POPULAR IMAGES
================================================= */

const popularImages = [

"https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1493770348161-369560ae357d?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=900&q=85",

"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=900&q=85"

];


function shuffle(array){

for(
let i=array.length-1;
i>0;
i--
){

const j =
Math.floor(
Math.random()*(i+1)
);

[
array[i],
array[j]
] = [
array[j],
array[i]
];

}

return array;

}


const shuffledImages =
shuffle([...popularImages]);


document
.querySelectorAll(
".popular-item img"
)
.forEach(
(img,index)=>{

img.src =
shuffledImages[index];

});


/* =================================================
   COMMISSION ENDLESS VERTICAL MARQUEE
================================================= */

const commissionMessages =
document.querySelectorAll(
".commission-message"
);

let currentMessage = 0;


/* Initial positions */

commissionMessages.forEach(
(message,index)=>{

if(index === 0){

message.classList.remove("next");
message.classList.add("active");

}else{

message.classList.remove("active");
message.classList.add("next");

}

});


function showNextCommission(){

const current =
commissionMessages[currentMessage];

const nextIndex =
(currentMessage + 1) %
commissionMessages.length;

const next =
commissionMessages[nextIndex];


/* Next inaanza chini */

next.classList.remove("exit");
next.classList.remove("active");
next.classList.add("next");


/* Force browser kusoma position */

void next.offsetHeight;


/* Current inapanda juu */

current.classList.remove("active");
current.classList.remove("next");
current.classList.add("exit");


/* Next inapanda kutoka chini */

setTimeout(
()=>{

next.classList.remove("next");
next.classList.add("active");

},
50
);


/* Next becomes current */

currentMessage =
nextIndex;


/* Rudisha iliyotoka juu chini */

setTimeout(
()=>{

current.classList.remove("exit");
current.classList.add("next");

},
700
);

}


/*
   Kila message inakaa approximately
   1 second.
*/

setInterval(
showNextCommission,
1650
);

</script>


</body>
</html>