<?php
$inviteCode = isset($_GET['inviteCode']) ? htmlspecialchars($_GET['inviteCode']) : '';
?>
<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IQOO | Register</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">

  <style>
    :root {
      --accent-black: #1a1a1a;
      --btn-gradient: linear-gradient(90deg, #3a3a3a, #1a1a1a);
      --bg-gray: #f4f6f8;
      --text-main: #334155;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Roboto', sans-serif;
      background-color: #ffffff;
      margin: 0;
      padding: 0;
      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.95); }
      to { opacity: 1; transform: scale(1); }
    }

    /* 🔹 Top Banner Image (Same as Login) */
    .banner-container {
      width: 100%;
      height: 200px;
      background: url("https://cdn-media.sforum.vn/storage/app/media/haianh/iqoo-15-mini-ro-ri-thumb.jpg") center/cover no-repeat;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
      box-sizing: border-box;
      animation: popIn 0.5s ease both;
    }

    .banner-container::after {
        content: "";
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 50%;
        background: linear-gradient(transparent, rgba(0,0,0,0.6));
    }

    .banner-text {
      position: relative;
      z-index: 2;
      color: white;
    }

    .banner-text h1 {
      font-size: 24px;
      font-weight: 700;
      margin: 0;
      font-style: italic;
    }

    /* 🔹 Auth Tabs (Same as Login) */
    .auth-tabs {
      padding: 25px 25px 10px;
      font-size: 24px;
      color: #94a3b8;
      animation: fadeInUp 0.4s ease 0.1s both;
    }

    .tab-inactive {
      font-size: 20px;
      margin-right: 15px;
      cursor: pointer;
      text-decoration: none;
      color: #94a3b8;
      transition: color 0.25s ease;
    }
    .tab-inactive:hover { color: var(--accent-black); }

    .tab-active {
      color: var(--text-main);
      font-weight: 500;
      margin-left: 15px;
    }

    /* 🔹 Form Inputs */
    .form-warp {
      padding: 0 25px;
      margin-top: 15px;
    }

    .input-box {
      background: var(--bg-gray);
      border-radius: 12px;
      display: flex;
      align-items: center;
      padding: 15px 20px;
      margin-bottom: 12px;
      position: relative;
      animation: fadeInUp 0.4s ease both;
      transition: box-shadow 0.25s ease, background 0.25s ease;
    }

    .input-box:nth-of-type(1) { animation-delay: 0.15s; }
    .input-box:nth-of-type(2) { animation-delay: 0.2s; }
    .input-box:nth-of-type(3) { animation-delay: 0.25s; }
    .input-box:nth-of-type(4) { animation-delay: 0.3s; }
    .input-box:nth-of-type(5) { animation-delay: 0.35s; }

    .input-box:focus-within {
      background: #eef0f2;
      box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
    }

    .input-box span.areaCode {
      color: #16a34a; /* Keeping prefix green as per image */
      font-weight: 600;
      font-size: 17px;
      margin-right: 10px;
    }

    .input-box input {
      background: transparent;
      border: none;
      outline: none;
      width: 100%;
      font-size: 15px;
      color: var(--text-main);
    }

    .input-box input[readonly] {
      color: #94a3b8;
    }

    /* 🔹 OTP Button (Inside Input) */
    .otpBtn {
      background: var(--accent-black);
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .otpBtn:hover:not([disabled]) { opacity: 0.85; }
    .otpBtn:active:not([disabled]) { transform: scale(0.95); }

    .otpBtn[disabled] {
      opacity: 0.6;
      background: #94a3b8;
    }

    /* 🔹 Register Button */
    .register-btn {
      width: 100%;
      background: var(--btn-gradient);
      color: white;
      border: none;
      padding: 16px;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 700;
      margin-top: 20px;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      animation: fadeInUp 0.4s ease 0.4s both;
      transition: transform 0.2s ease, box-shadow 0.25s ease;
    }
    .register-btn:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
    .register-btn:active { transform: scale(0.98); }

    .login-link {
      text-align: center;
      margin-top: 25px;
      font-size: 14px;
      color: #64748b;
      animation: fadeInUp 0.4s ease 0.45s both;
    }

    .login-link a {
      color: var(--accent-black);
      font-weight: 700;
      text-decoration: none;
      transition: opacity 0.2s ease;
    }
    .login-link a:hover { opacity: 0.7; }

    /* Loading Overlay */
    .loadingClass {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6);
      justify-content: center; align-items: center;
      flex-direction: column; z-index: 9999;
      animation: fadeInBody 0.25s ease;
    }
    .spinner {
      border: 4px solid rgba(255,255,255,0.3);
      border-top: 4px solid #fff;
      border-radius: 50%;
      width: 35px; height: 35px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }
  </style>
</head>
<body> 

  <div class="banner-container">
    <div class="banner-text">
        <h1>Register To Get ₱30</h1>
    </div>
  </div>

  <div class="auth-tabs">
      <a href="/login" class="tab-inactive">LOG IN</a>
      <span style="color: #e2e8f0;">|</span>
      <span class="tab-active">Register</span>
  </div>

  <form class="layui-form" id="register_form" method="post" action="{{ url('register') }}">
    @csrf
    <div class="form-warp"> 
      
      <div class="input-box"> 
        <span class="areaCode">+63</span> 
        <input type="tel" name="phone" placeholder="Phone number" autocomplete="off" lay-verify="required">
      </div> 

      <div class="input-box"> 
        <input type="password" name="password" id="password" placeholder="Set password" autocomplete="off" lay-verify="required">
      </div> 

      <div class="input-box"> 
        <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm password" autocomplete="off">
      </div>

      <div class="input-box"> 
    <input type="text" name="ref_by" class="input-field" placeholder="Invite Code" required value="<?php echo $inviteCode; ?>" readonly>
      </div> 

      <div class="input-box"> 
        <input type="text" name="code" id="code" placeholder="OTP code" lay-verify="required"> 
        <button type="button" id="getCode" class="otpBtn">Send</button> 
      </div> 

      <button type="submit" class="register-btn" lay-submit lay-filter="register">Sign Up</button> 

      <div class="login-link">
          Already have an account? <a href="/login">Log In</a>
      </div>
    </div> 
  </form>

  <div class="loadingClass" id="loadingBox">
    <div class="spinner"></div>
    <p style="color:white;margin-top:10px;">Processing...</p>
  </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>
  layui.use(['form', 'layer'], function(){
    var form = layui.form;
    var layer = layui.layer;

    form.verify({
      confirmPassword: function(value){
        if(value !== $('#password').val()){
          return 'Passwords do not match';
        }
      }
    });

    $('#confirm_password').attr('lay-verify', 'required|confirmPassword');

    // Virtual OTP Sender logic (preserved from your original)
    $('#getCode').on('click', function(){
      const phone = $('input[name="phone"]').val();
      if (!phone) {
        layer.msg('Please enter your phone number');
        return;
      }
      $('#loadingBox').css('display', 'flex');
      setTimeout(() => {
        $('#loadingBox').hide();
        const otp = Math.floor(100000 + Math.random() * 900000);
        $('#code').val(otp);
        layer.msg('OTP sent successfully');

        let timeLeft = 120;
        $('#getCode').text(timeLeft + 's').attr('disabled', true);
        let timer = setInterval(() => {
          timeLeft--;
          $('#getCode').text(timeLeft + 's');
          if (timeLeft <= 0) {
            clearInterval(timer);
            $('#getCode').text('Send').removeAttr('disabled');
          }
        }, 1000);
      }, 1000);
    });

    form.on('submit(register)', function(){
      $('#loadingBox').css('display', 'flex');
      return true;
    });
  });
  </script>
</body>
</html>
