<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @php
        $title = $title ?? 'Login - Lakhsman Wellness';
        $heading = $heading ?? 'Login';
        $subheading = $subheading ?? 'Access your dashboard securely.';
        $formAction = $formAction ?? route('auth.login.submit');
        $registerLink = $registerLink ?? route('register.user');
        $expectedRole = $expectedRole ?? null;
        $role = $expectedRole ?: 'user';
        $isFranchise = $role === 'franchise';
        $isAdmin = $role === 'admin';
        $brandMain = $isFranchise ? '#7c3aed' : ($isAdmin ? '#0f172a' : '#4f46e5');
        $brandAccent = $isFranchise ? '#db2777' : ($isAdmin ? '#1d4ed8' : '#06b6d4');
        $roleLabel = $isFranchise ? 'Franchise' : ($isAdmin ? 'Admin' : 'Member');
        $companyName = (string) setting('company_name', 'Lakhsman Wellness Private Limited');
        $companyPhone = (string) setting('company_phone', '8234673299');
        $companyEmail = (string) setting('company_email', 'hy@lakhsmanwelleness.in');
        $benefits = $isFranchise
            ? ['Track stock, sales, and commission in one dashboard.', 'Manage customers, invoices, and payout requests.', 'Receive real-time franchise operations support.']
            : ($isAdmin
                ? ['Monitor ledger, payouts, and cron health centrally.', 'Control member, franchise, and compliance modules.', 'Run repair tools and performance snapshots safely.']
                : ['View wallet, team tree, and daily income updates.', 'Manage orders, withdrawals, and KYC status securely.', 'Access member training, support, and legal resources.']);
    @endphp
    <title>{{ $title }}</title>
    <style>
        :root { --brand: {{ $brandMain }}; --accent: {{ $brandAccent }}; --line: #dbe4f0; --ink: #0f172a; --muted: #64748b; }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            font-family: "Manrope", "Segoe UI", sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at 12% 14%, rgba(79,70,229,.15), transparent 38%),
                radial-gradient(circle at 84% 12%, rgba(6,182,212,.14), transparent 35%),
                radial-gradient(circle at 70% 88%, rgba(16,185,129,.11), transparent 40%),
                #f8fafc;
            display: grid;
            place-items: center;
            padding: 18px;
        }
        .layout {
            width: min(1080px, 100%);
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 30px 70px rgba(15,23,42,.16);
            border: 1px solid #e2e8f0;
            background: #fff;
        }
        .branding {
            position: relative;
            padding: 34px;
            color: #f8fafc;
            background: linear-gradient(135deg, var(--brand), var(--accent));
        }
        .branding::before, .branding::after {
            content: "";
            position: absolute;
            border-radius: 999px;
            background: rgba(255,255,255,.12);
        }
        .branding::before { width: 280px; height: 280px; top: -120px; right: -90px; }
        .branding::after { width: 220px; height: 220px; bottom: -110px; left: -70px; }
        .branding > * { position: relative; z-index: 1; }
        .pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.28);
            background: rgba(15,23,42,.2);
            padding: 7px 12px;
            font-size: 12px;
            letter-spacing: .1em;
            text-transform: uppercase;
            font-weight: 700;
        }
        .branding h1 { margin: 16px 0 8px; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; }
        .branding p { margin: 0 0 18px; color: rgba(241,245,249,.9); }
        .benefits { display: grid; gap: 10px; margin-top: 16px; }
        .benefit {
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.25);
            background: rgba(2,6,23,.2);
            padding: 10px 12px;
            font-size: 14px;
        }
        .contact {
            margin-top: 14px;
            border-top: 1px solid rgba(255,255,255,.28);
            padding-top: 12px;
            font-size: 13px;
            color: rgba(241,245,249,.94);
            line-height: 1.7;
        }
        .form-wrap { padding: 30px; background: #fff; }
        .title { margin: 0; font-size: 1.7rem; font-weight: 800; color: #0f172a; }
        .subtitle { margin: 8px 0 18px; color: var(--muted); }
        .status {
            margin-bottom: 12px;
            border: 1px solid #86efac;
            background: #ecfdf5;
            color: #166534;
            border-radius: 12px;
            padding: 11px 12px;
            font-size: 13px;
        }
        .field { margin-bottom: 12px; }
        .field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #334155; }
        .field input {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 11px 12px;
            font-size: 14px;
            outline: none;
            transition: .2s ease;
        }
        .field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.13); }
        .error { margin-top: 4px; font-size: 12px; color: #b91c1c; }
        .submit {
            width: 100%;
            border: 0;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--brand), var(--accent));
            color: #fff;
            font-size: 15px;
            font-weight: 800;
            padding: 12px;
            cursor: pointer;
            margin-top: 6px;
        }
        .links {
            margin-top: 14px;
            display: grid;
            gap: 8px;
            font-size: 13px;
            color: var(--muted);
        }
        .links a { color: var(--brand); font-weight: 700; text-decoration: none; }
        .links a:hover { text-decoration: underline; }
        .made-by { margin-top: 14px; font-size: 12px; color: #64748b; }
        .made-by a { color: #0f172a; font-weight: 700; text-decoration: none; }
        .made-by a:hover { text-decoration: underline; }
        @media (max-width: 920px) {
            .layout { grid-template-columns: 1fr; }
            .branding { padding: 20px; }
            .form-wrap { padding: 20px; }
        }
    </style>
</head>
<body>
    <section class="layout">
        <aside class="branding">
            <span class="pill">{{ $roleLabel }} Portal</span>
            <h1>Welcome to {{ $companyName }}</h1>
            <p>{{ $subheading }}</p>
            <div class="benefits">
                @foreach($benefits as $benefit)
                    <div class="benefit">{{ $benefit }}</div>
                @endforeach
            </div>
            <div class="contact">
                <div>Support: {{ $companyPhone }}</div>
                <div>{{ $companyEmail }}</div>
            </div>
        </aside>

        <div class="form-wrap">
            <h2 class="title">{{ $heading }}</h2>
            <div class="subtitle">Sign in using email, mobile, or member/franchise ID.</div>

            @if(session('status'))
                <div class="status">{{ session('status') }}</div>
            @endif

            <form method="post" action="{{ $formAction }}">
                @csrf
                @if($expectedRole)
                    <input type="hidden" name="expected_role" value="{{ $expectedRole }}">
                @endif

                <div class="field">
                    <label for="login">Login ID</label>
                    <input id="login" name="login" value="{{ old('login') }}" placeholder="Email / Mobile / Member ID" required>
                    @error('login')<div class="error">{{ $message }}</div>@enderror
                </div>

                <div class="field">
                    <label for="password">Password</label>
                    <input id="password" name="password" type="password" placeholder="Enter password" required>
                    @error('password')<div class="error">{{ $message }}</div>@enderror
                </div>

                <div class="field">
                    <label for="otp">OTP (if prompted)</label>
                    <input id="otp" name="otp" value="{{ old('otp') }}" placeholder="Enter OTP when requested">
                    @error('otp')<div class="error">{{ $message }}</div>@enderror
                </div>

                <button type="submit" class="submit">Login as {{ $roleLabel }}</button>
            </form>

            <div class="links">
                @if($registerLink)
                    <div>New user? <a href="{{ $registerLink }}">Register now</a></div>
                @endif
                @if($role !== 'user')
                    <div>Member portal: <a href="{{ route('login.user') }}">Member Login</a></div>
                @endif
                @if($role !== 'franchise')
                    <div>Franchise portal: <a href="{{ route('login.franchise') }}">Franchise Login</a></div>
                @endif
                <div>Back to site: <a href="{{ route('home') }}">Homepage</a></div>
            </div>

            <div class="made-by">
                Made By:
                <a href="https://akrsworld.in" target="_blank" rel="noopener noreferrer">AKRS WORLD (https://akrsworld.in)</a>
            </div>
        </div>
    </section>
</body>
</html>
