<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
<title><?php echo e(env('APP_NAME')); ?> | Bonus</title> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
<style>
  *{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
  body{background:#f4f7ff;color:#333;padding-bottom:50px;}

  /* Header */
  .top{
    display:flex;
    align-items:center;
    padding:12px 15px;
    background:#03316C;
    color:#fff;
    font-weight:600;
    font-size:16px;
    position:sticky;
    top:0;
    z-index:100;
    gap:10px;
  }
  .top .topLeft{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    background:#fff;
    border-radius:50%;
    color:#03316C;
    text-decoration:none;
    font-size:18px;
  }
  .topTit{flex:1;text-align:center;font-weight:700;}

  /* Main card */
  .bonus-main{
    margin:20px 15px;
  }
  .bonus-top{
    list-style:none;
    margin-bottom:16px;
  }
  .bonus-top li{
    background:#fff;
    border-radius:16px;
    padding:16px;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
  }
  .bonus-top li h3{font-size:22px;font-weight:700;margin-bottom:6px;}
  .bonus-top li p{font-size:14px;color:#666;}

  /* Form Card */
  .bonus-bg{
    background:#fff;
    border-radius:16px;
    padding:16px;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
  }
  .bouns-input{
    margin-bottom:16px;
  }
  .bouns-input input{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:14px;
  }
  .bouns-input button{
    width:100%;
    padding:12px 0;
    background:linear-gradient(90deg,#03316C,#0057D9);
    color:#fff;
    border:none;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s;
    font-size:16px;
  }
  .bouns-input button:hover{
    background:linear-gradient(90deg,#0057D9,#03316C);
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(0,0,0,0.2);
  }

  /* Message Box */
  #messageBox{
    margin-top:10px;
    text-align:center;
    font-size:14px;
    font-weight:600;
  }
  #messageBox.success{color:#28a745;}
  #messageBox.error{color:#dc3545;}
  /* Fake Claims */
.claim-box{
  margin-top:25px;
  background:#fff;
  padding:16px;
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
}

.claim-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
  color:#03316C;
}

.claim-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:240px;
  overflow:hidden;
}

.claim-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:#f7f9ff;
  padding:10px;
  border-radius:12px;
  animation: slideUp 0.7s ease;
}

.claim-item img{
  width:42px;
  height:42px;
  border-radius:50%;
}

.claim-item p{
  margin:0;
  font-size:14px;
}

.claim-item span{
  font-size:12px;
  color:#666;
}

.claim-item .amount{
  margin-left:auto;
  font-weight:700;
  color:#1A8F02;
  font-size:15px;
}

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

</style>
</head> 

<body> 

  <!-- HEADER -->
  <div class="top"> 
    <a href="<?php echo e(route('dashboard')); ?>" class="topLeft"> 
      <i class="layui-icon layui-icon-left"></i> 
    </a> 
    <div class="topTit">Bonus</div> 
  </div> 

  <!-- MAIN CARD BODY -->
  <div class="bonus-main"> 
    <ul class="bonus-top"> 
      <li> 
        <h3><?php echo e(price(auth()->user()->balance ?? 0)); ?></h3> 
        <p>Current Balance</p> 
      </li> 
    </ul> 

    <div class="bonus-bg"> 
      <form class="layui-form" id="bonusForm">
        <div class="bouns-input"> 
          <input type="text" name="bonus_code" placeholder="Please enter bonus code" required class="layui-input"> 
        </div> 
        <div class="bouns-input"> 
          <button type="submit" class="btn" lay-submit lay-filter="submitBonus">Obtain</button> 
        </div>
      </form>
<div class="claim-box">
  <h3 class="claim-title">🎉 Recent Bonus Claims</h3>

  <div class="claim-list" id="claimList">
    <!-- Dummy Claim Items -->
    <div class="claim-item">
      <img src="https://i.pravatar.cc/50?img=11">
      <div>
        <p><strong> Johnson •</strong> Claimed Bonus</p>
        <span>5 mins ago</span>
      </div>
      <b class="amount">+ R50</b>
    </div>

    <div class="claim-item">
      <img src="https://i.pravatar.cc/50?img=17">
      <div>
        <p><strong> Maria •</strong> Claimed Bonus</p>
        <span>12 mins ago</span>
      </div>
      <b class="amount">+ R100</b>
    </div>

    <div class="claim-item">
      <img src="https://i.pravatar.cc/50?img=25">
      <div>
        <p><strong> Daniel •</strong> Claimed Bonus</p>
        <span>28 mins ago</span>
      </div>
      <b class="amount">+ R80</b>
    </div>

    <div class="claim-item">
      <img src="https://i.pravatar.cc/50?img=33">
      <div>
        <p><strong> Henry •</strong> Claimed Bonus</p>
        <span>1 hour ago</span>
      </div>
      <b class="amount">+ R60</b>
    </div>
  </div>
</div>

      <!-- Message Box -->
      <div id="messageBox"></div>
    </div> 
  </div> 

  <!-- SCRIPTS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/layui.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

  <script>
    layui.use(['form', 'layer'], function(){
      var form = layui.form;
      var layer = layui.layer;

      form.on('submit(submitBonus)', function(data){
        layer.load(1, {shade: [0.1,'#fff']});
        $('#messageBox').text('').removeClass('success error');

        $.ajax({
          url: "<?php echo e(route('user.submit-bonus')); ?>",
          method: "POST",
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data: data.field,
          success: function(res){
            layer.closeAll('loading');
            if(res.status === 1){
              $('#messageBox').text(res.message).addClass('success');
              layer.msg(res.message, {icon: 1});
              showConfetti();
            } else {
              $('#messageBox').text(res.message).addClass('error');
              layer.msg(res.message, {icon: 2});
            }
          },
          error: function(){
            layer.closeAll('loading');
            $('#messageBox').text("An error occurred.").addClass('error');
          }
        });

        return false;
      });
    });

    function showConfetti() {
      const duration = 2 * 1000;
      const animationEnd = Date.now() + duration;
      const confettiSettings = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1000 };

      const interval = setInterval(function() {
        if (Date.now() > animationEnd) {
          return clearInterval(interval);
        }
        confetti(Object.assign({}, confettiSettings, {
          particleCount: 50,
          origin: { x: Math.random(), y: Math.random() - 0.2 }
        }));
      }, 200);
    }
  </script>
<script>
setInterval(() => {
    let list = document.getElementById("claimList");
    let first = list.children[0];

    first.style.marginTop = "-60px";

    setTimeout(() => {
      list.appendChild(first);
      first.style.marginTop = "0px";
    }, 600);

}, 3000);
</script>

</body>
</html>
<?php /**PATH /home/tamim/m84.srtlabbd.top/resources/views/app/main/bonus/index.blade.php ENDPATH**/ ?>