@extends('dealer.layouts.auth', ['title' => 'Dealer 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(141, 170, 242, .32), transparent 18%),
            radial-gradient(circle at 84% 20%, rgba(103, 140, 230, .30), transparent 22%),
            radial-gradient(circle at 78% 82%, rgba(157, 188, 255, .16), transparent 18%),
            linear-gradient(135deg, #132a54 0%, #102447 26%, #0d1d39 58%, #081328 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(203, 220, 255, .30), rgba(146, 174, 232, .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(206, 223, 255, .32), rgba(134, 164, 226, .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(204, 223, 255, .38), rgba(204, 223, 255, .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(121, 203, 255, .18);
          border-top-color: rgba(121, 203, 255, .9);
          border-right-color: rgba(121, 203, 255, .55);
          box-shadow:0 0 18px rgba(121, 203, 255, .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(8, 18, 42, .58), rgba(8, 18, 42, .36));
          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(82, 111, 174, .24), rgba(24, 47, 95, .36));
          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:#102e62;
          background:linear-gradient(135deg, #e7eeff, #a8c1f5);
          box-shadow:0 14px 30px rgba(73, 107, 188, .30);
        }

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

        .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(136, 168, 234, .24);
        }

        .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:#dfe9ff;
          text-decoration:none;
        }

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

        .auth-submit:hover{
          background:linear-gradient(180deg, #235090, #173b70);
        }

        html[data-theme="dark"] .auth-card{
          background:linear-gradient(180deg, rgba(63, 89, 150, .30), rgba(14, 25, 54, .46));
        }

        @media (max-width: 991.98px){
          .auth-shell{ padding:14px; }
          .auth-grid{
            min-height:calc(100vh - 28px);
            padding:18px;
          }
          .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>
@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">D</div>
                        </div>

                        <div class="text-center mb-3">
                            <div class="auth-title">Dealer Login</div>
                        </div>

                        <form method="POST" action="{{ route('dealer.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="dealer@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">
                                <a href="javascript:void(0)">Forgot Password?</a>
                            </div>

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