<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IQOO | Login</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; /* Light black to replace lime green / red */
      --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 */
    .banner-container {
      width: 100%;
      height: 240px;
      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: 26px;
      font-weight: 700;
      margin: 0;
      font-style: italic;
    }

    .banner-text p {
      font-size: 12px;
      margin-top: 5px;
      opacity: 0.9;
      line-height: 1.4;
    }

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

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

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

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

    .input-box {
      background: var(--bg-gray);
      border-radius: 12px;
      display: flex;
      align-items: center;
      padding: 18px 20px;
      margin-bottom: 15px;
      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:focus-within {
      background: #eef0f2;
      box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
    }

    .input-box span {
      color: #22c55e; /* Keeping the country code green as requested or change to red */
      font-weight: 600;
      font-size: 18px;
      margin-right: 15px;
    }

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

    .input-box input::placeholder {
      color: #94a3b8;
    }

    .password-toggle {
        color: #94a3b8;
        cursor: pointer;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .password-toggle:hover { color: var(--accent-black); transform: scale(1.1); }

    /* 🔹 Footer Actions */
    .bottom-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      animation: fadeInUp 0.4s ease 0.3s both;
    }

    .forgot-pass {
      color: #ff0000;
      font-weight: 600;
      text-decoration: none;
      font-size: 15px;
      transition: opacity 0.2s ease;
    }
    .forgot-pass:hover { opacity: 0.75; }

    .sign-in-btn {
      background: var(--btn-gradient);
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 10px;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.25s ease;
    }

    .sign-in-btn:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }

    .sign-in-btn i {
      margin-left: 10px;
      font-size: 14px;
    }

    .sign-in-btn:active {
        transform: scale(0.96);
    }

  </style>
</head>
<body> 

  <div class="banner-container">
    <div class="banner-text">
        <h1>IQOO </h1>
        <p>Be part of IQOO, a global Invest Company</p>
    </div>
  </div>

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

  <form class="layui-form" id="loginForm">
    <?php echo csrf_field(); ?>
    <div class="form-warp"> 
      
      <div class="input-box"> 
        <span style="color: #16a34a;">+63</span> 
        <input type="tel" name="phone" placeholder="Please enter phone number" autocomplete="off">
      </div> 
      
      <div class="input-box"> 
        <input type="password" name="password" id="passInput" placeholder="Please enter your password" autocomplete="off">
        <i class="layui-icon layui-icon-eye-invisible password-toggle"></i>
      </div> 

      <div class="bottom-actions"> 
        <a href="https://t.me/IQOO_rohan" class="forgot-pass">Forgot password?</a> 
        <button type="submit" class="sign-in-btn login-btn" lay-submit lay-filter="login">
            SIGN IN <i class="layui-icon layui-icon-right"></i>
        </button> 
      </div> 
      
    </div> 
  </form>

  <script src="https://cdn.jsdelivr.net/npm/layui@2.8.17/dist/layui.js"></script>
  <script>
  // YOUR ORIGINAL JS LOGIC - NO CHANGES
  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 = 'SIGN IN <i class="layui-icon layui-icon-right"></i>';

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

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

          if (!phone) {
              btn.attr("disabled", false).html(originalText);
              delayedMsg('Please enter mobile number...');
              return false;
          }
          if (!password) {
              btn.attr("disabled", false).html(originalText);
              delayedMsg('Please enter password...');
              return false;
          }

          $.ajax({
              url: "<?php echo e(route('login')); ?>",
              type: "POST",
              data: {
                  phone: phone,
                  password: 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 ?? "/";
                      }, 1700);
                  } 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)', function(data){
          return doLogin(data);
      });

      // Simple password toggle logic
      $('.password-toggle').on('click', function(){
          const input = $('#passInput');
          if(input.attr('type') === 'password'){
              input.attr('type', 'text');
              $(this).removeClass('layui-icon-eye-invisible').addClass('layui-icon-eye');
          } else {
              input.attr('type', 'password');
              $(this).removeClass('layui-icon-eye').addClass('layui-icon-eye-invisible');
          }
      });
  });
  </script>
</body>
</html>
<?php /**PATH /home/pocomito/tz.gocycles.xyz/resources/views/app/auth/login.blade.php ENDPATH**/ ?>