@extends($activeTemplate . 'layouts.frontend')

@section('content')

<style>
/* =============== 100% SAME UI LOOK =============== */
.auth-page{
  min-height: calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 14px;
}

.auth-wrap{
  width: min(980px, 100%);
}

.auth-row{
  display:flex;
  /*gap: 26px;*/
  align-items: stretch;
}

@media (max-width: 991.98px){
  .auth-row{ flex-direction: column; }
}

/* LEFT PANEL */
.left-card{
  flex: 1;
  height: 560px;
 border-radius: 20px 0px 0px 20px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(120% 120% at 15% 0%, #0f1aa0 0%, #0b0f66 35%, #04074a 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

/* small crown icon */
.crown{
  position:absolute;
  top:16px; left:16px;
  width:28px; height:28px;
  border-radius:10px;
  background: rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.crown::before{
  content:"";
  width:12px; height:12px;
  background:#f5c04f;
  border-radius:2px;
  clip-path: polygon(0 70%, 15% 40%, 35% 70%, 50% 30%, 65% 70%, 85% 40%, 100% 70%, 100% 100%, 0 100%);
}

/* subtle vertical shine lines */
.left-card::after{
  content:"";
  position:absolute;
  inset:-50px -90px -50px -90px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 120px);
  opacity:.55;
  pointer-events:none;
}

/* glass blocks like image */
.left-shapes{
  position:absolute; inset:0;
  pointer-events:none;
}
.left-shapes .blk{
  position:absolute;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
  transform: skewY(-12deg);
}
.left-shapes .b1{ top:55px; right:140px; width:84px; height:160px; opacity:.60; }
.left-shapes .b2{ top:85px; right:80px;  width:64px; height:190px; opacity:.45; }
.left-shapes .b3{ top:135px; right:25px; width:54px; height:240px; opacity:.35; }
.left-shapes .b4{ bottom:55px; right:110px; width:90px; height:220px; opacity:.22; }
.left-shapes .b5{ bottom:20px; right:28px;  width:60px; height:290px; opacity:.18; }

/* center text */
.left-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:left;
  color:#fff;
  line-height:1.05;
  padding: 24px;
}
.left-text .t1{
  font-size: 44px;
  font-weight: 800;
  margin:0;
}
.left-text .t2{
  font-size: 44px;
  font-weight: 800;
  margin:0;
}
.left-text .t0{
  font-size: 34px;
  font-weight: 500;
  margin-bottom: 6px;
  opacity:.95;
}

/* RIGHT PANEL */
.right-card{
  flex: 1;
  height: 560px;
    border-radius: 0 20px 20px 0;
  background:#fff;
  position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  overflow:hidden;
}

.right-deco{
  position:absolute;
  top:-10px; right:-10px;
  width: 230px; height: 170px;
  pointer-events:none;
}
.right-deco::before,
.right-deco::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width: 120px; height: 140px;
  background: rgba(120,130,160,.22);
  transform: skewX(-18deg);
  border-radius: 6px;
}
.right-deco::after{
  right: 62px;
  width: 92px;
  height: 120px;
  opacity:.55;
}
.right-deco .thin{
  position:absolute;
  right: 145px;
  top: 40px;
  width: 4px;
  height: 90px;
  background: rgba(120,130,160,.18);
  border-radius: 999px;
  transform: rotate(2deg);
}

.right-inner{
  height:100%;
  padding: 88px 92px 40px;
  position:relative;
}

.right-title{
  font-size: 40px;
  font-weight: 700;
  color:#2f2a6f;
  margin-bottom: 34px;
}

.lbl{
  font-size: 12px;
  color:#a2a9b8;
  margin-bottom: 8px;
}

.inp{
  width:100%;
  height: 46px;
  border-radius: 6px;
  border: 1px solid #e6e9f0;
  padding: 10px 12px;
  outline:none;
}
.inp:focus{
  border-color: rgba(11,15,102,.35);
}

.forgot{
  font-size: 12px;
  color:#2f2a6f !important;
  text-decoration:none;
}
.forgot:hover{ text-decoration: underline; }

.login-btn{
  height: 44px;
  min-width: 210px;
  border-radius: 8px;
  background: linear-gradient(180deg, #111a88 0%, #0b0f66 100%);
  border: 0;
  color:#fff;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(11,15,102,.22);
}

.bottom-text{
  position:absolute;
  left:0; right:0;
  bottom: 34px;
  text-align:center;
  font-size: 12px;
  color:#a2a9b8;
}
.bottom-text a{
  color:#2f2a6f;
  text-decoration:none;
  font-weight:600;
}
.bottom-text a:hover{ text-decoration: underline; }

.captcha-wrap{
  margin-top: 14px;
  margin-bottom: 18px;
}

/* responsive */
@media (max-width: 991.98px){
  .left-card, .right-card{ height:auto; }
  .right-inner{ padding: 70px 26px 90px; }
  .bottom-text{ position:relative; bottom:auto; margin-top: 24px; padding-bottom: 24px; }
}
</style>

<section class="auth-page">
  <div class="auth-wrap">
    <div class="auth-row">

      <!-- LEFT -->
      <div class="left-card">
        <!--<div class="crown"></div>-->

        <div class="left-shapes">
          <div class="blk b1"></div>
          <div class="blk b2"></div>
          <div class="blk b3"></div>
          <div class="blk b4"></div>
          <div class="blk b5"></div>
        </div>

        <div class="left-text">
          <div>
            <p class="t0">Hello!</p>
            <p class="t1">Have a</p>
            <p class="t2">GOOD DAY</p>
          </div>
        </div>
      </div>

      <!-- RIGHT -->
      <div class="right-card">
        <div class="right-deco"><span class="thin"></span></div>

        <div class="right-inner">
          <div class="right-title">@lang('Login')</div>

          <form class="verify-gcaptcha" method="POST" action="{{ route('user.login') }}">
            @csrf

            <div style="margin-bottom:18px;">
              <div class="lbl">@lang('Username')</div>
              <input class="inp" type="text" name="username" value="{{ old('username') }}" required>
            </div>

            <div style="margin-bottom:8px;">
              <div class="lbl">@lang('Password')</div>
              <input class="inp" type="password" name="password" required>
            </div>

            <div style="display:flex; justify-content:flex-end; margin: 8px 0 14px;">
              <a class="forgot" href="{{ route('user.password.request') }}">@lang('forgot password?')</a>
            </div>

            <div class="captcha-wrap">
              <x-captcha path="{{ $activeTemplate . 'partials' }}" />
            </div>

            <div style="display:flex; justify-content:center; margin-top:6px;">
              <button type="submit" class="login-btn" id="recaptcha">@lang('Login')</button>
            </div>
          </form>

          <div class="bottom-text">
            @lang("Don't have any account?")
            <a href="{{ route('user.register') }}">@lang('Create an account')</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

@endsection
