@extends('layouts.app')

@section('title', 'Restaurant Login | AI Menu')

@push('styles')
<style>
    :root {
        --al-ink: #0d130f;
        --al-ink-soft: #18211a;
        --al-green: #789267;
        --al-green-dark: #40543b;
        --al-cream: #f5f1e8;
        --al-paper: #fffdf8;
        --al-gold: #dda854;
        --al-muted: #6f796e;
        --al-line: rgba(15, 24, 17, .11);
        --al-danger: #b42318;
    }

    .al-page,
    .al-page * { box-sizing: border-box; }

    .al-page {
        position: relative;
        min-height: calc(100vh - 74px);
        display: grid;
        place-items: center;
        overflow: hidden;
        margin-top: -38px;
        padding: 76px 0;
        color: var(--al-ink);
        background:
            radial-gradient(circle at 8% 10%, rgba(120,146,103,.2), transparent 28%),
            radial-gradient(circle at 92% 88%, rgba(221,168,84,.12), transparent 25%),
            var(--al-cream);
    }

    .al-page::before,
    .al-page::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(4px);
    }

    .al-page::before { width: 240px; height: 240px; top: -110px; right: 10%; border: 1px solid rgba(64,84,59,.12); }
    .al-page::after { width: 180px; height: 180px; bottom: -90px; left: 8%; background: rgba(120,146,103,.08); }

    .al-shell {
        position: relative;
        z-index: 2;
        width: min(1120px, calc(100% - 30px));
        display: grid;
        grid-template-columns: .94fr 1.06fr;
        overflow: hidden;
        border: 1px solid var(--al-line);
        border-radius: 38px;
        background: var(--al-paper);
        box-shadow: 0 42px 110px rgba(12,20,14,.18);
        animation: alEnter .55s ease both;
    }

    .al-story {
        position: relative;
        min-height: 700px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        padding: 42px;
        color: #fff;
        background:
            linear-gradient(180deg, rgba(5,10,6,.13), rgba(5,10,6,.92)),
            url('https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=1500&q=88') center/cover;
    }

    .al-story::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 75% 20%, rgba(255,255,255,.14), transparent 28%);
        pointer-events: none;
    }

    .al-story > * { position: relative; z-index: 2; }

    .al-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .13em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .al-brand-mark {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 14px;
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(15px);
    }

    .al-story-copy { margin-top: auto; padding: 80px 0 35px; }

    .al-story-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(255,255,255,.72);
        font-size: 11px;
        font-weight: 850;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .al-story-label::before { content: ''; width: 27px; height: 2px; border-radius: 99px; background: var(--al-gold); }

    .al-story h2 {
        max-width: 470px;
        margin: 18px 0 15px;
        font-size: clamp(43px, 5vw, 63px);
        line-height: .97;
        letter-spacing: -.06em;
    }

    .al-story-copy > p { max-width: 460px; margin: 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.75; }

    .al-benefits { display: grid; gap: 11px; margin-top: 32px; }
    .al-benefit { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 750; }
    .al-check { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; border-radius: 50%; color: var(--al-ink); background: var(--al-gold); font-size: 11px; font-weight: 950; }

    .al-security { display: flex; align-items: center; gap: 8px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.55); font-size: 11px; }

    .al-panel { display: flex; align-items: center; padding: 52px 58px; }
    .al-content { width: 100%; max-width: 480px; margin: auto; }

    .al-mobile-brand { display: none; margin-bottom: 25px; color: var(--al-green-dark); }

    .al-kicker { color: var(--al-green-dark); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

    .al-content h1 {
        margin: 10px 0 9px;
        font-size: clamp(40px, 5vw, 56px);
        line-height: 1;
        letter-spacing: -.06em;
    }

    .al-intro { margin: 0 0 25px; color: var(--al-muted); line-height: 1.7; }

    .al-alert {
        margin-bottom: 19px;
        padding: 13px 15px;
        border: 1px solid rgba(180,35,24,.15);
        border-radius: 14px;
        color: var(--al-danger);
        background: rgba(180,35,24,.055);
        font-size: 13px;
        line-height: 1.55;
    }

    .al-alert ul { margin: 0; padding-left: 18px; }

    .al-demo {
        position: relative;
        margin-bottom: 24px;
        padding: 18px;
        overflow: hidden;
        border: 1px solid rgba(120,146,103,.22);
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(120,146,103,.11), rgba(221,168,84,.08));
    }

    .al-demo::after { content: 'DEMO'; position: absolute; right: -7px; bottom: -19px; color: rgba(64,84,59,.055); font-size: 69px; font-weight: 950; line-height: 1; }
    .al-demo > * { position: relative; z-index: 2; }

    .al-demo-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
    .al-demo-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--al-green-dark); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
    .al-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #4b9b54; box-shadow: 0 0 0 5px rgba(75,155,84,.12); }
    .al-demo h3 { margin: 6px 0 0; font-size: 18px; }

    .al-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
    .al-credential { padding: 11px 12px; border: 1px solid var(--al-line); border-radius: 13px; background: rgba(255,255,255,.75); }
    .al-credential span { display: block; margin-bottom: 4px; color: var(--al-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .al-credential code { color: var(--al-ink); font-family: inherit; font-size: 12px; font-weight: 850; word-break: break-all; }

    .al-demo-button {
        width: 100%;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 0;
        border-radius: 14px;
        color: #fff;
        background: var(--al-ink);
        font-weight: 900;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .al-demo-button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(13,19,15,.18); }
    .al-demo-button:disabled { opacity: .72; cursor: wait; }

    .al-divider { display: flex; align-items: center; gap: 13px; margin: 22px 0; color: #9aa19a; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
    .al-divider::before, .al-divider::after { content: ''; height: 1px; flex: 1; background: var(--al-line); }

    .al-field { margin-bottom: 17px; }
    .al-field-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 7px; }
    .al-field label { color: var(--al-ink-soft); font-size: 13px; font-weight: 850; }
    .al-field-error { margin: 7px 0 0; color: var(--al-danger); font-size: 12px; }

    .al-input-wrap { position: relative; }
    .al-input {
        width: 100%;
        height: 55px;
        padding: 0 48px 0 16px;
        border: 1px solid var(--al-line);
        border-radius: 15px;
        outline: 0;
        color: var(--al-ink);
        background: #fbfaf6;
        font: inherit;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .al-input:hover { background: #fff; }
    .al-input:focus { border-color: var(--al-green); background: #fff; box-shadow: 0 0 0 4px rgba(120,146,103,.12); }
    .al-input.is-invalid { border-color: rgba(180,35,24,.45); }

    .al-field-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #899287; pointer-events: none; }
    .al-toggle { position: absolute; right: 9px; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); border: 0; border-radius: 10px; color: #687267; background: transparent; cursor: pointer; }
    .al-toggle:hover { background: rgba(120,146,103,.1); }

    .al-options { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 4px 0 21px; }
    .al-remember { display: flex; align-items: center; gap: 8px; color: #657063; font-size: 13px; font-weight: 750; }
    .al-remember input { width: 17px; height: 17px; accent-color: var(--al-green-dark); }

    .al-submit {
        width: 100%;
        min-height: 54px;
        border: 0;
        border-radius: 15px;
        color: #fff;
        background: linear-gradient(145deg, var(--al-green), var(--al-green-dark));
        box-shadow: 0 15px 32px rgba(64,84,59,.24);
        font-weight: 900;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .al-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(64,84,59,.28); }

    .al-bottom { margin-top: 22px; text-align: center; color: var(--al-muted); font-size: 13px; }
    .al-bottom a { color: var(--al-green-dark); font-weight: 900; }
    .al-back { display: block; margin-top: 14px; color: #8a9389; text-align: center; font-size: 11px; font-weight: 800; text-decoration: none; }
    .al-back:hover { color: var(--al-ink); }

    @keyframes alEnter { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }

    @media (max-width: 900px) {
        .al-shell { grid-template-columns: 1fr; max-width: 670px; }
        .al-story { min-height: 330px; padding: 30px; }
        .al-story-copy { padding: 60px 0 0; }
        .al-story h2 { font-size: 43px; }
        .al-benefits, .al-security { display: none; }
        .al-panel { padding: 42px 30px; }
    }

    @media (max-width: 560px) {
        .al-page { margin-top: -28px; padding: 35px 0; }
        .al-shell { width: calc(100% - 20px); border-radius: 27px; }
        .al-story { display: none; }
        .al-mobile-brand { display: inline-flex; }
        .al-panel { padding: 31px 20px; }
        .al-content h1 { font-size: 43px; }
        .al-demo-grid { grid-template-columns: 1fr; }
        .al-options { align-items: flex-start; }
    }

    @media (prefers-reduced-motion: reduce) {
        .al-shell { animation: none; }
        .al-demo-button, .al-submit { transition: none; }
    }
</style>
@endpush

@section('content')
<section class="al-page">
    <div class="al-shell">
        <aside class="al-story">
            <a class="al-brand" href="{{ url('/') }}">
                <span class="al-brand-mark">AI</span>
                <span>SmartDevelop · AI Menu</span>
            </a>

            <div class="al-story-copy">
                <span class="al-story-label">Restaurant control centre</span>
                <h2>Run your digital menu from one intelligent dashboard.</h2>
                <p>Manage dishes, categories, ingredients, nutrition, restaurant branding and the complete customer QR experience.</p>

                <div class="al-benefits">
                    <div class="al-benefit"><span class="al-check">✓</span><span>Professional QR menu for every table</span></div>
                    <div class="al-benefit"><span class="al-check">✓</span><span>AI-powered customer menu discovery</span></div>
                    <div class="al-benefit"><span class="al-check">✓</span><span>English and French customer experience</span></div>
                </div>
            </div>

            <div class="al-security">● Secure restaurant access · SmartDevelop</div>
        </aside>

        <div class="al-panel">
            <div class="al-content">
                <a class="al-brand al-mobile-brand" href="{{ url('/') }}">
                    <span class="al-brand-mark">AI</span>
                    <span>SmartDevelop · AI Menu</span>
                </a>

                <span class="al-kicker">Restaurant portal</span>
                <h1>Welcome back.</h1>
                <p class="al-intro">Sign in to manage your restaurant or open the prepared demo account.</p>

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

                @if ($errors->any())
                    <div class="al-alert" role="alert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="al-demo">
                    <div class="al-demo-head">
                        <div>
                            <span class="al-demo-label"><span class="al-demo-dot"></span>Live demo ready</span>
                            <h3>Explore the restaurant dashboard</h3>
                        </div>
                    </div>

                    <div class="al-demo-grid">
                        <div class="al-credential">
                            <span>Demo email</span>
                            <code>owner@example.com</code>
                        </div>
                        <div class="al-credential">
                            <span>Demo password</span>
                            <code>123456789</code>
                        </div>
                    </div>

                    <button class="al-demo-button" id="demoLoginButton" type="button">
                        <span>▶</span>
                        <span>Open Demo Dashboard</span>
                    </button>
                </div>

                <div class="al-divider">Or sign in with your account</div>

                <form id="restaurantLoginForm" method="POST" action="{{ route('login.store') }}">
                    @csrf

                    <div class="al-field">
                        <div class="al-field-row">
                            <label for="email">Email address</label>
                        </div>
                        <div class="al-input-wrap">
                            <input
                                id="email"
                                class="al-input @error('email') is-invalid @enderror"
                                type="email"
                                name="email"
                                value="{{ old('email') }}"
                                autocomplete="email"
                                inputmode="email"
                                placeholder="owner@restaurant.com"
                                required
                                autofocus
                            >
                            <span class="al-field-icon">@</span>
                        </div>
                        @error('email')
                            <p class="al-field-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="al-field">
                        <div class="al-field-row">
                            <label for="password">Password</label>
                        </div>
                        <div class="al-input-wrap">
                            <input
                                id="password"
                                class="al-input @error('password') is-invalid @enderror"
                                type="password"
                                name="password"
                                autocomplete="current-password"
                                placeholder="Enter your password"
                                required
                            >
                            <button id="togglePassword" class="al-toggle" type="button" aria-label="Show password" aria-pressed="false">◉</button>
                        </div>
                        @error('password')
                            <p class="al-field-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="al-options">
                        <label class="al-remember">
                            <input type="checkbox" name="remember" value="1" {{ old('remember') ? 'checked' : '' }}>
                            <span>Remember me</span>
                        </label>
                    </div>

                    <button class="al-submit" type="submit">Sign In to Dashboard</button>
                </form>

                <div class="al-bottom">
                    New restaurant? <a href="{{ route('register') }}">Create an account</a>
                </div>

                <a class="al-back" href="{{ url('/') }}">← Return to AI Menu</a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const loginForm = document.getElementById('restaurantLoginForm');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const passwordToggle = document.getElementById('togglePassword');
    const demoLoginButton = document.getElementById('demoLoginButton');

    if (passwordInput && passwordToggle) {
        passwordToggle.addEventListener('click', function () {
            const showingPassword = passwordInput.type === 'text';
            passwordInput.type = showingPassword ? 'password' : 'text';
            passwordToggle.textContent = showingPassword ? '◉' : '×';
            passwordToggle.setAttribute('aria-label', showingPassword ? 'Show password' : 'Hide password');
            passwordToggle.setAttribute('aria-pressed', showingPassword ? 'false' : 'true');
        });
    }

    if (loginForm && emailInput && passwordInput && demoLoginButton) {
        demoLoginButton.addEventListener('click', function () {
            emailInput.value = 'owner@example.com';
            passwordInput.value = '123456789';
            emailInput.dispatchEvent(new Event('input', { bubbles: true }));
            passwordInput.dispatchEvent(new Event('input', { bubbles: true }));

            demoLoginButton.disabled = true;
            demoLoginButton.innerHTML = '<span>●</span><span>Opening Demo Dashboard...</span>';

            window.setTimeout(function () {
                if (typeof loginForm.requestSubmit === 'function') {
                    loginForm.requestSubmit();
                } else {
                    loginForm.submit();
                }
            }, 350);
        });
    }
});
</script>
@endpush