<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invitation Rewards</title>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
    background:#f4f4f5;
    padding:15px;
    animation:fadeInBody .5s ease;
}

@keyframes fadeInBody{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes fadeInUp{
    from{opacity:0; transform:translateY(15px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes popIn{
    from{opacity:0; transform:scale(.94);}
    to{opacity:1; transform:scale(1);}
}

@keyframes fillBar{
    from{width:0%;}
}

@keyframes shimmer{
    0%{ background-position:-200px 0; }
    100%{ background-position:200px 0; }
}

/* Header */

.header{
    background:#1c1c1e;
    border-radius:22px;
    padding:26px 22px;
    color:#fff;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
    animation:popIn .5s ease both;
    transition:transform .3s ease, box-shadow .3s ease;
}

.header:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.header::before{
    content:'';
    position:absolute;
    width:160px;
    height:160px;
    background:rgba(255,255,255,.04);
    border-radius:50%;
    top:-70px;
    right:-50px;
}

.header::after{
    content:none;
}

.header-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.08);
    padding:5px 14px;
    border-radius:30px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:12px;
    position:relative;
    z-index:1;
}

.header h2{
    font-size:14px;
    font-weight:600;
    opacity:.7;
    position:relative;
    z-index:1;
}

.total{
    font-size:40px;
    font-weight:800;
    margin-top:6px;
    position:relative;
    z-index:1;
}

.subtitle{
    margin-top:4px;
    opacity:.6;
    font-size:13px;
    position:relative;
    z-index:1;
}

/* Stats */

.stats{
    display:flex;
    gap:12px;
    margin-bottom:20px;
}

.stat-box{
    flex:1;
    background:#fff;
    border-radius:14px;
    padding:14px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.06);
    animation:fadeInUp .4s ease both;
    transition:transform .25s ease, box-shadow .25s ease;
}

.stat-box:nth-child(1){animation-delay:.1s;}
.stat-box:nth-child(2){animation-delay:.15s;}

.stat-box:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.07);
}

.stat-box h4{
    color:#8e8e93;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    margin-bottom:6px;
}

.stat-box p{
    font-size:19px;
    font-weight:800;
    color:#1c1c1e;
}

/* Cards */

.card{
    background:#fff;
    border-radius:16px;
    padding:14px 16px;
    margin-bottom:10px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
    border:1px solid rgba(0,0,0,.07);
    position:relative;
    animation:fadeInUp .4s ease both;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.card.is-claimable{
    border:1px solid rgba(28,28,30,.18);
}

.card.is-claimed{
    background:#fafafa;
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.task-title{
    font-size:14.5px;
    font-weight:700;
    color:#1c1c1e;
}

.task-desc{
    color:#8e8e93;
    font-size:12px;
    margin-top:3px;
    line-height:1.35;
}

.reward{
    flex-shrink:0;
    background:#f2f2f3;
    color:#1c1c1e;
    border:1px solid rgba(0,0,0,.08);
    padding:5px 11px;
    border-radius:30px;
    font-weight:800;
    font-size:12px;
    white-space:nowrap;
    animation:popIn .3s ease .1s both;
}

.card.is-claimable .reward{
    background:#1c1c1e;
    color:#fff;
    border-color:#1c1c1e;
}

/* Progress */

.progress{
    width:100%;
    height:7px;
    background:#ececec;
    border-radius:30px;
    overflow:hidden;
    margin-top:12px;
    position:relative;
}

.progress-fill{
    height:100%;
    border-radius:30px;
    background:#1c1c1e;
    transition:width 1s ease;
    animation:fillBar 1s ease;
    position:relative;
}

.progress-fill.is-complete{
    background:#34c759;
}

.progress-text{
    display:flex;
    justify-content:space-between;
    margin-top:7px;
    font-size:11px;
    color:#aeaeb2;
    font-weight:600;
}

.progress-text span:last-child{
    color:#1c1c1e;
    font-weight:800;
}

/* Buttons */

.btn{
    width:100%;
    height:42px;
    border:none;
    border-radius:12px;
    margin-top:12px;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn-claim{
    background:#1c1c1e;
    color:#fff;
}
.btn-claim:hover{ box-shadow:0 4px 12px rgba(0,0,0,.25); }
.btn-claim:active{ transform:scale(.97); }

.btn-claimed{
    background:#f2f2f3;
    color:#aeaeb2;
    border:1px solid rgba(0,0,0,.05);
}

.btn-pending{
    background:#fafafa;
    color:#c7c7cc;
    border:1px solid rgba(0,0,0,.04);
}

</style>
</head>

<body>

<div class="header">

    <div class="header-eyebrow">Referral Rewards</div>

    <h2>Total Referral Purchase Volume</h2>

    <div class="total">
        ₱<?php echo e(number_format($totalPurchase,2)); ?>

    </div>

    <div class="subtitle">
        Keep inviting to unlock more rewards
    </div>

</div>

<div class="stats">

    <div class="stat-box">
        <h4>Total Volume</h4>
        <p>₱<?php echo e(number_format($totalPurchase,0)); ?></p>
    </div>

    <div class="stat-box">
        <h4>Tasks</h4>
        <p><?php echo e(count($tasks)); ?></p>
    </div>

</div>

<?php $__currentLoopData = $tasks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $task): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

<?php
    $claimed = in_array($task->id, $claimedTasks);

    $progress = min(
        100,
        ($totalPurchase / $task->target_amount) * 100
    );

    $isClaimable = !$claimed && $totalPurchase >= $task->target_amount;
?>

<div class="card <?php if($isClaimable): ?> is-claimable <?php elseif($claimed): ?> is-claimed <?php endif; ?>">

    <div class="card-top">

        <div>

            <div class="task-title">
                <?php echo e($task->title); ?>

            </div>

            <div class="task-desc">
                <?php echo e($task->description); ?>

            </div>

        </div>

        <div class="reward">
            +₱<?php echo e(number_format($task->reward_amount,2)); ?>

        </div>

    </div>

    <div class="progress">
        <div
            class="progress-fill <?php if($progress >= 100): ?> is-complete <?php endif; ?>"
            style="width:<?php echo e($progress); ?>%;">
        </div>
    </div>

    <div class="progress-text">

        <span>
            ₱<?php echo e(number_format(min($totalPurchase,$task->target_amount),2)); ?>

            / ₱<?php echo e(number_format($task->target_amount,2)); ?>

        </span>

        <span>
            <?php echo e(number_format($progress,0)); ?>%
        </span>

    </div>

    <?php if($claimed): ?>

        <button class="btn btn-claimed">
            ✓ Claimed
        </button>

    <?php elseif($isClaimable): ?>

        <form action="<?php echo e(route('invitation.task.claim')); ?>"
              method="POST">

            <?php echo csrf_field(); ?>

            <input
                type="hidden"
                name="task_id"
                value="<?php echo e($task->id); ?>">

            <button
                type="submit"
                class="btn btn-claim">
                🎁 Claim Reward
            </button>

        </form>

    <?php else: ?>

        <button class="btn btn-pending">
            ⏳ In Progress
        </button>

    <?php endif; ?>

</div>

<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

</body>
</html>
<?php /**PATH /home/pocomito/tz.gocycles.xyz/resources/views/app/main/invitation_task.blade.php ENDPATH**/ ?>