<!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, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> 
  <title>{{env('APP_NAME')}} | Bonus</title> 

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.17/dist/css/layui.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <style>
    :root {
      --accent-black: #1a1a1a;
      --accent-gradient: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
      --bg-light: #f8fafc;
      --text-dark: #1e293b;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Roboto', sans-serif;
      background-color: var(--bg-light);
      margin: 0; padding: 0;
      color: var(--text-dark);
      animation: fadeInBody 0.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(0.94); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 🔹 Header */
    .top-header {
      padding: 15px 20px;
      background: #fff;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e2e8f0;
      animation: slideDown 0.4s ease both;
    }
    .top-header h2 { flex: 1; text-align: center; font-size: 18px; font-weight: 700; margin: 0; }
    .back-btn {
      color: var(--text-dark); font-size: 20px; text-decoration: none; width: 40px;
      transition: transform 0.2s ease;
      display: inline-block;
    }
    .back-btn:hover { transform: translateX(-3px); }

    /* 🔹 Balance Display */
    .bonus-hero {
      margin: 15px;
      padding: 30px 20px;
      background: var(--accent-gradient);
      border-radius: 20px;
      color: white;
      text-align: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
      position: relative;
      overflow: hidden;
      animation: popIn 0.5s ease 0.05s both;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .bonus-hero:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
    }
    .bonus-hero::after {
        content: "\f06b";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: -10px;
        bottom: -10px;
        font-size: 80px;
        opacity: 0.15;
        animation: floatGift 3s ease-in-out infinite;
    }

    @keyframes floatGift {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-6px) rotate(-4deg); }
    }

    .bonus-hero p { font-size: 14px; opacity: 0.9; margin-bottom: 8px; }
    .bonus-hero h3 { font-size: 34px; font-weight: 800; margin: 0; }

    /* 🔹 Redemption Box */
    .redeem-box {
      background: #fff;
      margin: 0 15px;
      padding: 25px 20px;
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      animation: fadeInUp 0.4s ease 0.15s both;
    }
    .redeem-box h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #334155;
        text-align: center;
    }

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .input-wrapper i {
      position: absolute;
      left: 15px;
      color: var(--accent-black);
      font-size: 18px;
      transition: transform 0.25s ease;
    }
    .input-wrapper input {
      width: 100%;
      padding: 16px 16px 16px 45px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      font-size: 15px;
      outline: none;
      background: #fcfdfe;
      transition: 0.3s;
    }
    .input-wrapper input:focus {
      border-color: var(--accent-black);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
    }
    .input-wrapper input:focus ~ i { transform: scale(1.1) rotate(-8deg); }

    .btn-obtain {
      width: 100%;
      padding: 16px;
      background: var(--accent-gradient);
      color: white;
      border: none;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
      transition: 0.3s;
    }
    .btn-obtain:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); }
    .btn-obtain:active { transform: scale(0.98); }

    /* 🔹 Result Messages */
    .msg-box {
      margin-top: 15px;
      padding: 12px;
      border-radius: 10px;
      font-size: 13px;
      text-align: center;
      display: none;
    }
    .msg-success { background: #f5f5f5; color: #1a1a1a; border: 1px solid #d4d4d4; display: block; animation: fadeInUp 0.3s ease both; }
    .msg-error { background: #fef2f2; color: #991b1b; border: 1px solid #fee2e2; display: block; animation: fadeInUp 0.3s ease both; }

    /* 🔹 Tips Section */
    .bonus-tips {
        margin: 20px 15px;
        padding: 15px;
        animation: fadeInUp 0.4s ease 0.25s both;
    }
    .bonus-tips h5 { color: #64748b; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
    .bonus-tips ul { padding: 0; margin: 0; list-style: none; }
    .bonus-tips li {
      font-size: 12px; color: #94a3b8; margin-bottom: 5px; display: flex; align-items: center; gap: 8px;
      animation: fadeInUp 0.35s ease both;
    }
    .bonus-tips li:nth-child(1) { animation-delay: 0.3s; }
    .bonus-tips li:nth-child(2) { animation-delay: 0.35s; }
    .bonus-tips li:nth-child(3) { animation-delay: 0.4s; }
    .bonus-tips li i { font-size: 6px; color: var(--accent-black); }

  </style>
</head> 

<body>

  <div class="top-header"> 
    <a href="{{ route('dashboard') }}" class="back-btn"> 
      <i class="fa-solid fa-chevron-left"></i> 
    </a> 
    <h2>Redeem Bonus</h2> 
  </div> 

  <div class="bonus-hero"> 
      <p>Available Balance</p>
      <h3>{{ price(auth()->user()->balance ?? 0) }}</h3> 
  </div> 

  <div class="redeem-box"> 
    <h4>Enter Bonus Code</h4>
    <form id="bonusForm">
      <div class="input-wrapper"> 
        <i class="fa-solid fa-ticket"></i>
        <input type="text" name="bonus_code" placeholder="Example: GIFT2024" required> 
      </div> 
      <button type="submit" class="btn-obtain">Obtain Reward</button> 
    </form>

    <div id="messageBox" class="msg-box"></div>
  </div> 

  <div class="bonus-tips">
      <h5><i class="fa-solid fa-circle-info"></i> How it works</h5>
      <ul>
          <li><i class="fa-solid fa-circle"></i> Enter the code shared by your agent or official group.</li>
          <li><i class="fa-solid fa-circle"></i> Each code can only be used once per account.</li>
          <li><i class="fa-solid fa-circle"></i> Rewards are added instantly to your balance.</li>
      </ul>
  </div>

  <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(['layer'], function(){
      var layer = layui.layer;

      $('#bonusForm').on('submit', function(e){
        e.preventDefault();
        var code = $('input[name="bonus_code"]').val();
        
        layer.load(2, {shade: [0.1,'#fff']});
        $('#messageBox').hide().removeClass('msg-success msg-error');

        $.ajax({
          url: "{{ route('user.submit-bonus') }}",
          method: "POST",
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          data: { bonus_code: code },
          success: function(res){
            layer.closeAll('loading');
            if(res.status === 1){
              $('#messageBox').text(res.message).addClass('msg-success').fadeIn();
              showConfetti();
            } else {
              $('#messageBox').text(res.message).addClass('msg-error').fadeIn();
            }
          },
          error: function(){
            layer.closeAll('loading');
            $('#messageBox').text("Server error. Please try again.").addClass('msg-error').fadeIn();
          }
        });
      });
    });

    function showConfetti() {
      const duration = 3 * 1000;
      const end = Date.now() + duration;

      (function frame() {
        confetti({ particleCount: 3, angle: 60, spread: 55, origin: { x: 0 }, colors: ['#1a1a1a', '#ffffff'] });
        confetti({ particleCount: 3, angle: 120, spread: 55, origin: { x: 1 }, colors: ['#1a1a1a', '#ffffff'] });

        if (Date.now() < end) {
          requestAnimationFrame(frame);
        }
      }());
    }
  </script>

</body>
</html>
