<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CRO | Login</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;
}

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

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

.auth-tabs a.active{
  background:#03316C;
  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* *********** 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);
}

/* Forgot Password */
.actions{
  text-align:right;
  margin-top:5px;
}

.actions a{
  font-size:13px;
  color:#03316C;
  text-decoration:none;
}

/* Login Button */
.login-btn{
  width:100%;
  margin-top:10px;
  padding:14px;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
background-image: linear-gradient(to right top, #03316C, #03316C, #03316C, #03316C, #03316C);  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* Register text */
.register{
  margin-top:15px;
  font-size:14px;
  color:#444;
}

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

</style>
</head>

<body>

<div class="banner">Cro Coin Login</div>

<div class="card">

  <img src="victory/67f63c57c6b84c00013d4354_cryptocom-logo-png-transparent-background-1536x1536.png" class="logo">


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

    <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 phone number">
      </div>
    </div>

    <div class="input-group">
      <label>Password</label>
      <input type="password" name="password" class="input-field single" placeholder="Enter password">
    </div>

    <div class="actions">
      <a href="/recover">Forgot Password?</a>
    </div>

    <button type="submit" class="login-btn" lay-submit lay-filter="login">Login</button>

    <div class="register">
      Don't have an account? <a href="/register">Register now</a>
    </div>

  </form>
</div>



<script src="https://cdn.jsdelivr.net/npm/layui@2.8.17/dist/layui.js"></script>
<script>
  layui.use(['form','layer'], function(){
    const $ = layui.jquery;
    const form = layui.form;
    const layer = layui.layer;

    function delayedMsg(msg, icon=5, anim=6, time=1500, delay=600){
      setTimeout(() => {
        layer.msg(msg, {icon: icon, anim: anim, time: time});
      }, delay);
    }

    function doLogin(data){
      const btn = $(".login-btn");
      const originalText = btn.html();

      btn.attr("disabled", true)
        .html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> Logging in...');

      const phone = $.trim(data.field.phone);
      const password = data.field.password;

      if (!phone || !password) {
        btn.attr("disabled", false).html(originalText);
        delayedMsg('Please fill in all fields.');
        return false;
      }

      $.ajax({
        url: "<?php echo e(route('login')); ?>",
        type: "POST",
        data: { phone, password, _token: "<?php echo e(csrf_token()); ?>" },
        dataType: "json",
        success: function(res){
          btn.attr("disabled", false).html(originalText);
          if (res.success) {
            delayedMsg(res.message, 1, 0, 1200, 500);
            setTimeout(() => window.location.href = res.redirect ?? "/", 1500);
          } else {
            delayedMsg(res.message, 2, 6, 2000, 500);
          }
        },
        error: function(){
          btn.attr("disabled", false).html(originalText);
          delayedMsg('Server error, please try again later.', 2, 6, 2000, 500);
        }
      });

      return false;
    }

    form.on('submit(login)', doLogin);
  });
</script>
</body>
</html><?php /**PATH /home/tamim/m84.srtlabbd.top/resources/views/app/auth/login.blade.php ENDPATH**/ ?>