<?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>Cro| Register</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.17/dist/css/layui.css">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  background: #ffffff;
  padding: 20px;
}


/* TOP BAR */
.banner{
  width:100%;
  font-size:20px;
  font-weight:700;
  color:#03316C;
  padding:10px 5px;
}

/* CONTAINER */
.card{
  width:100%;
  max-width:420px;
  margin:0 auto;
  text-align:center;
}

/* LOGO */
.logo{
  width:160px;
  margin:10px auto 20px;
}

/* SUBTEXT */
.card p{
  font-size:14px;
  color:#03316C;
  margin-bottom:15px;
}


/* TABS */
.auth-tabs {
  display: flex;
  background: #e6f0ff;
  padding: 4px;
  border-radius: 25px;
  margin: 20px auto;
  width: 80%;
}

.auth-tabs a {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  color: #5f5f5f;
  text-decoration: none;
}

.auth-tabs a.active {
  background: #03316C;
  color: #fff;
}

/* *********** NEW INPUT DESIGN *********** */
.input-group label{
  text-align:left;
  display:block;
  font-size:13px;
  font-weight:600;
  color:#333;
  margin-bottom:6px;
  margin-left:2px;
}

/* wrapper */
.phone-wrapper{
  display:flex;
  align-items:center;
  background:#fff;
  border:1.8px solid #e6f0ff;
  border-radius:14px;
  padding:12px;
  box-shadow:0px 3px 9px rgba(0,0,0,0.06);
  transition:0.3s ease;
}

/* +60 Code */
.phone-code{
  font-weight:700;
  color:#03316C;
  margin-right:10px;
  font-size:14px;
}

/* Input */
.input-field{
  width:100%;
  border:none;
  outline:none;
  font-size:15px;
  color:#222;
  background:transparent;
}

.input-field::placeholder{
  color:#9c9c9c;
}

/* FOCUS EFFECT */
.phone-wrapper:focus-within{
  border:2px solid #03316C;
  box-shadow:0px 4px 12px rgba(10,139,46,0.18);
}

/* Password input */
.input-field.single{
  width:100%;
  padding:15px;
  border:1.8px solid #e6f0ff;

  border-radius:14px;
  background:#fff;
  box-shadow:0px 3px 9px rgba(0,0,0,0.06);
  transition:0.3s;
}

.input-field.single:focus{
  border:2px solid #03316C;
  box-shadow:0px 4px 12px rgba(10,139,46,0.18);
}

/* BUTTON */
.register-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #03316C, #03316C);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

/* LOGIN LINK */
.login-link {
  margin-top: 15px;
  font-size: 14px;
  color: #333;
}

.login-link a {
  color: #03316C;
  text-decoration: none;
  font-weight: 700;
}

/* LOADING OVERLAY */
.loadingClass {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.spinner {
  width: 45px;
  height: 45px;
  border: 4px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

</head>
<body>

<!-- TOP BAR -->
<div class="banner">Cro Coin Register</div>

<!-- FORM CARD -->
<div class="card">
  <img src="victory/67f63c57c6b84c00013d4354_cryptocom-logo-png-transparent-background-1536x1536.png" class="logo">

  <p>Welcome, please register to continue.</p>

  <!-- TABS -->
  <div class="auth-tabs">
    <a href="/login">Login</a>
    <a href="/register" class="active">Register</a>
  </div>

  <!-- REGISTER FORM -->
  <form class="layui-form" id="registerForm" action="<?php echo e(url('register')); ?>" method="post">
    <?php echo csrf_field(); ?>

   <!-- PHONE -->
<div class="input-group">
  <label>Phone Number</label>
  <div class="phone-wrapper">
    <span class="phone-code">+60</span>
    <input type="tel" name="phone" class="input-field" placeholder="Enter your mobile number" required>
  </div>
</div>

<!-- PASSWORD -->
<div class="input-group">
  <label>Password</label>
  <div class="phone-wrapper">
    <input type="password" name="password" id="password" class="input-field" placeholder="Enter password" required>
  </div>
</div>

<!-- CONFIRM PASSWORD -->
<div class="input-group">
  <label>Confirm Password</label>
  <div class="phone-wrapper">
    <input type="password" id="confirm_password" name="confirm_password" class="input-field" placeholder="Confirm password" required>
  </div>
</div>

<!-- INVITATION CODE -->
<div class="input-group">
  <label>Invitation Code</label>
  <div class="phone-wrapper">
    <input type="text" name="ref_by" class="input-field" placeholder="Invite Code" required value="<?php echo $inviteCode; ?>" readonly>
  </div>
</div>
<br>
    <button type="submit" class="register-btn" lay-submit lay-filter="register">Register</button>

    <div class="login-link">
      Already have an account? <a href="/login">Login Now</a>
    </div>

  </form>
</div>

<!-- LOADING -->
<div class="loadingClass" id="loadingBox">
  <div class="spinner"></div>
  <p style="color:white;margin-top:10px;">Processing...</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui@2.8.17/dist/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

  form.verify({
    required: val => !val.trim() ? 'This field is required' : null,
    confirmPassword: val => val !== $('#password').val() ? 'Passwords do not match' : null
  });

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

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

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