@extends('user.layouts.auth', ['title' => 'Merchant Login'])

@push('head')

    <style>
        .auth-shell{
          min-height:100vh;
          width:100%;
          padding:24px;
          display:flex;
          align-items:center;
          justify-content:center;
          background:
            radial-gradient(circle at 15% 18%, rgba(99, 232, 185, .34), transparent 18%),
            radial-gradient(circle at 84% 20%, rgba(39, 193, 142, .32), transparent 22%),
            radial-gradient(circle at 78% 82%, rgba(135, 244, 205, .18), transparent 18%),
            linear-gradient(135deg, #085540 0%, #074936 26%, #0a6b51 58%, #054131 100%);
          position:relative;
          overflow:hidden;
        }

        .auth-shell::before,
        .auth-shell::after{
          content:"";
          position:absolute;
          inset:auto;
          border-radius:999px;
          pointer-events:none;
          filter: blur(2px);
          opacity:.85;
        }

        .auth-shell::before{
          width:380px;
          height:120px;
          left:-50px;
          bottom:60px;
          background:linear-gradient(135deg, rgba(189, 255, 231, .34), rgba(108, 229, 184, .08));
          box-shadow: inset -20px -12px 40px rgba(255,255,255,.08), inset 16px 14px 24px rgba(255,255,255,.18);
        }

        .auth-shell::after{
          width:320px;
          height:110px;
          right:-10px;
          bottom:36px;
          background:linear-gradient(135deg, rgba(191, 255, 233, .36), rgba(108, 215, 176, .12));
          box-shadow: inset -16px -12px 34px rgba(255,255,255,.06), inset 16px 14px 24px rgba(255,255,255,.16);
        }

        .auth-bg{
          position:absolute;
          inset:0;
          pointer-events:none;
        }

        .auth-shape{
          position:absolute;
          border-radius:999px;
          background:linear-gradient(180deg, rgba(188, 255, 229, .45), rgba(188, 255, 229, .08));
          box-shadow:
            inset 10px 10px 24px rgba(255,255,255,.14),
            inset -18px -18px 32px rgba(0,0,0,.12),
            0 18px 35px rgba(0,0,0,.18);
          opacity:.8;
        }

        .auth-shape.s1{ width:86px; height:28px; left:17%; top:32%; transform:rotate(-42deg); }
        .auth-shape.s2{ width:56px; height:20px; left:14%; top:41%; transform:rotate(-42deg); }
        .auth-shape.s3{ width:130px; height:40px; left:26%; top:56%; transform:rotate(-24deg); }
        .auth-shape.s4{ width:160px; height:48px; right:16%; top:24%; transform:rotate(34deg); opacity:.35; }
        .auth-shape.s5{ width:90px; height:26px; right:23%; top:52%; transform:rotate(26deg); }
        .auth-shape.s6{ width:62px; height:18px; right:19%; top:59%; transform:rotate(26deg); }
        .auth-shape.s7{ width:120px; height:34px; left:6%; bottom:18%; transform:rotate(42deg); opacity:.22; }
        .auth-shape.s8{ width:120px; height:34px; right:31%; bottom:19%; transform:rotate(118deg); opacity:.22; }

        .auth-ring{
          position:absolute;
          width:76px;
          height:76px;
          left:25%;
          top:6%;
          border-radius:50%;
          border:10px solid rgba(116, 255, 198, .18);
          border-top-color: rgba(116, 255, 198, .9);
          border-right-color: rgba(116, 255, 198, .56);
          box-shadow:0 0 18px rgba(116, 255, 198, .25);
        }

        .auth-grid{
          width:min(1180px, 100%);
          min-height:min(760px, calc(100vh - 48px));
          margin:0 auto;
          position:relative;
          display:grid;
          place-items:center;
          padding:44px;
          border-radius:28px;
          background:linear-gradient(180deg, rgba(6, 75, 56, .44), rgba(6, 75, 56, .28));
          border:1px solid rgba(255,255,255,.08);
          box-shadow:0 40px 100px rgba(2, 13, 32, .32), inset 0 1px 0 rgba(255,255,255,.08);
          overflow:hidden;
        }

        .auth-grid::before{
          content:"";
          position:absolute;
          inset:22px;
          border-radius:22px;
          border:1px solid rgba(255,255,255,.04);
        }

        .auth-card-wrap{
          grid-column:1 / -1;
          position:relative;
          z-index:2;
          display:flex;
          align-items:center;
          justify-content:center;
          width:100%;
        }

        .auth-card{
          width:min(430px, 100%);
          background:linear-gradient(180deg, rgba(108, 228, 184, .26), rgba(27, 141, 104, .28));
          border:1px solid rgba(255,255,255,.12);
          box-shadow:
            0 22px 60px rgba(2, 13, 32, .35),
            inset 0 1px 0 rgba(255,255,255,.16);
          backdrop-filter: blur(18px);
          border-radius:24px;
          color:#f7fbff;
        }

        .auth-card .card-body{
          padding:34px 30px !important;
        }

        .auth-brand{
          text-align:center;
          margin-bottom:18px;
        }

        .auth-brand-mark{
          width:58px;
          height:58px;
          margin:0 auto 10px;
          border-radius:18px;
          display:grid;
          place-items:center;
          font-size:1.35rem;
          font-weight:800;
          color:#064a38;
          background:linear-gradient(135deg, #e4fff5, #7ee7be);
          box-shadow:0 14px 30px rgba(74, 222, 128, .28);
        }

        .auth-brand-title{
          font-weight:700;
          font-size:1.15rem;
          letter-spacing:.01em;
        }

        .auth-brand-sub{
          color:rgba(233, 244, 255, .68);
          font-size:.9rem;
          margin-top:4px;
        }

        .auth-title{
          font-weight:700;
          letter-spacing:-.02em;
          font-size:1.45rem;
          margin-bottom:4px;
        }

        .auth-subtitle{
          color:rgba(233, 244, 255, .72);
          font-size:.92rem;
        }

        .auth-form{
          margin-top:22px;
        }

        .auth-form .form-label{
          font-size:.82rem;
          font-weight:600;
          color:rgba(247, 251, 255, .85);
          margin-bottom:7px;
        }

        .auth-form .form-control{
          min-height:44px;
          border-radius:9px;
          background:rgba(255,255,255,.92);
          border:1px solid rgba(255,255,255,.12);
          box-shadow:none;
          font-size:.92rem;
        }

        .auth-form .form-control:focus{
          border-color:rgba(255,255,255,.4);
          box-shadow:0 0 0 .2rem rgba(146, 208, 255, .22);
        }

        .auth-meta{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:12px;
          margin:12px 0 18px;
          color:rgba(233, 244, 255, .78);
          font-size:.84rem;
        }

        .auth-meta a{
          color:#dff2ff;
          text-decoration:none;
        }

        .auth-submit{
          min-height:46px;
          border:0;
          border-radius:10px;
          background:linear-gradient(180deg, #0b6e52, #08563f);
          color:#fff;
          font-weight:700;
          box-shadow:0 14px 28px rgba(2, 13, 32, .25);
        }

        .auth-submit:hover{
          background:linear-gradient(180deg, #0d7f5d, #0a6549);
        }

        .auth-divider{
          display:flex;
          align-items:center;
          gap:12px;
          margin:20px 0 14px;
          color:rgba(233, 244, 255, .62);
          font-size:.8rem;
        }

        .auth-divider::before,
        .auth-divider::after{
          content:"";
          flex:1;
          height:1px;
          background:rgba(255,255,255,.14);
        }

        .auth-social{
          display:flex;
          justify-content:center;
          gap:10px;
        }

        .auth-social-btn{
          width:42px;
          height:34px;
          border-radius:8px;
          display:grid;
          place-items:center;
          text-decoration:none;
          border:1px solid rgba(255,255,255,.12);
          background:rgba(255,255,255,.92);
          color:#0a5b43;
          font-weight:700;
        }

        .auth-footer-note{
          text-align:center;
          margin-top:14px;
          color:rgba(233, 244, 255, .62);
          font-size:.74rem;
        }

        .auth-footer-note a{
          color:#fff;
          text-decoration:none;
          font-weight:700;
        }

        .auth-theme-toggle{
          position:absolute;
          top:18px;
          right:18px;
          z-index:3;
          border-radius:999px;
          width:40px;
          height:40px;
          display:grid;
          place-items:center;
          color:#fff;
          background:rgba(255,255,255,.08);
          border:1px solid rgba(255,255,255,.1);
        }

        .auth-page-note{
          position:absolute;
          left:28px;
          bottom:20px;
          z-index:2;
          color:rgba(227, 255, 243, .62);
          font-size:.82rem;
        }

        .form-check-input:checked{
          background-color:#0b6e52;
          border-color:#0b6e52;
        }

        html[data-theme="dark"] .auth-card{
          background:linear-gradient(180deg, rgba(47, 162, 120, .26), rgba(16, 105, 74, .36));
        }

        @media (max-width: 991.98px){
          .auth-shell{ padding:14px; }
          .auth-grid{
            min-height:calc(100vh - 28px);
            padding:18px;
          }
          .auth-page-note{
            display:none;
          }
          .auth-ring{ left:12%; top:5%; }
        }

        @media (max-width: 575.98px){
          .auth-card .card-body{
            padding:28px 20px !important;
          }
          .auth-grid{
            padding:12px;
            border-radius:22px;
          }
          .auth-shape.s4,
          .auth-shape.s7,
          .auth-shape.s8{
            display:none;
          }
        }
    </style>
    
    {{-- <link href="{{ asset('admin/auth.css') }}" rel="stylesheet"> --}}
@endpush

@section('content')
    <div class="auth-shell">
        <div class="auth-grid">
            <div class="auth-bg" aria-hidden="true">
                <div class="auth-ring"></div>
                <div class="auth-shape s1"></div>
                <div class="auth-shape s2"></div>
                <div class="auth-shape s3"></div>
                <div class="auth-shape s4"></div>
                <div class="auth-shape s5"></div>
                <div class="auth-shape s6"></div>
                <div class="auth-shape s7"></div>
                <div class="auth-shape s8"></div>
            </div>

            <div class="auth-card-wrap">
                <div class="card auth-card">
                    <div class="card-body">
                        <div class="auth-brand">
                            <div class="auth-brand-mark">U</div>
                            {{-- <div class="auth-brand-title">DB Manager</div>
                            <div class="auth-brand-sub">User access portal</div> --}}
                        </div>

                        <div class="text-center mb-3">
                            <div class="auth-title">Merchant Login</div>
                            {{-- <div class="auth-subtitle">Enter your username and password to access your dashboard.</div> --}}
                        </div>

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

                            <div class="mb-3">
                                <label class="form-label" for="login">Email / Username</label>
                                <input
                                    id="login"
                                    type="text"
                                    name="login"
                                    value="{{ old('login') }}"
                                    class="form-control @error('login') is-invalid @enderror"
                                    placeholder="user@example.com or username"
                                    required
                                    autofocus
                                >
                                @error('login')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="password">Password</label>
                                <input
                                    id="password"
                                    type="password"
                                    name="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="Enter your password"
                                    required
                                >
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="auth-meta">
                                {{-- <span>Private account access</span> --}}
                                <a href="javascript:void(0)">Forgot Password?</a>
                            </div>

                            <button type="submit" class="btn auth-submit w-100">Sign in</button>

                            {{-- <div class="auth-footer-note">
                                Secure login for your personal dashboard
                            </div> --}}
                        </form>
                    </div>
                </div>
            </div>

            {{-- <div class="auth-page-note">
                Login with your own credentials. User and admin access stay completely separate.
            </div> --}}
        </div>
    </div>
@endsection