@extends('admin.layout')

@section('title', 'تسجيل الدخول | CyberNas Leads')

@section('body')
    <div class="letterbox top"></div>
    <div class="letterbox bottom"></div>
    <div class="hud-frame">
        <span class="hud-corner tl"></span>
        <span class="hud-corner tr"></span>
        <span class="hud-corner bl"></span>
        <span class="hud-corner br"></span>
    </div>
    @include('admin.partials.cinema-bg')

    <div class="login-shell">
        <section class="login-visual">
            <div>
                <div class="hud flex items-center gap-3 text-[11px] mb-6" style="color:var(--cinema-cyan);">
                    <span class="live-dot"></span>
                    Live encrypted channel
                </div>
                <img src="{{ asset('images/main-logo.png') }}" alt="CyberNas" class="login-logo">
                <p class="hud text-[11px] mt-2" style="color:rgba(255,255,255,.45);">Command center · Odoo pipeline</p>
            </div>
            <div>
                <div class="hero-kicker hud">Now screening</div>
                <h1 class="cinema-title text-5xl sm:text-6xl font-extrabold leading-[.95] mb-5">
                    غرفة القيادة<br>
                    <span style="color:var(--cinema-cyan);">لكل ليد.</span>
                </h1>
                <p class="text-base max-w-md leading-8" style="color:rgba(255,255,255,.72);">من هنا تدخل الطلبات لحظة بلحظة، تتابع وصولها إلى أودو، وتفتح تفاصيلها كأنها مشهد حي داخل الفيلم.</p>
                <div class="ticker hud mt-8">
                    <span>Secure access</span>
                    <span>·</span>
                    <span>Arabic Excel</span>
                    <span>·</span>
                    <span>Odoo sync</span>
                    <span>·</span>
                    <span>CyberNas ops</span>
                </div>
            </div>
        </section>

        <section class="login-panel">
            <div class="cinema-card">
                <div class="mb-8">
                    <div class="hud text-[11px] mb-3" style="color:var(--cinema-gold);">Restricted entry</div>
                    <h2 class="display text-3xl font-bold mb-2">تسجيل الدخول</h2>
                    <p class="text-sm" style="color:rgba(255,255,255,.6);">ادخل إلى المشهد لمراجعة الليدز وحالة أودو.</p>
                </div>
                <form method="POST" action="{{ route('admin.login.store') }}" novalidate>
                    @csrf
                    <div class="mb-4">
                        <label class="text-sm font-bold block mb-2">البريد الإلكتروني</label>
                        <input type="email" name="email" value="{{ old('email') }}" class="form-input admin-input" autocomplete="username" required placeholder="you@company.com" />
                        @error('email')
                            <p class="text-sm mt-2" style="color:#fca5a5;">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="mb-7">
                        <label class="text-sm font-bold block mb-2">كلمة المرور</label>
                        <input type="password" name="password" class="form-input admin-input" autocomplete="current-password" required placeholder="••••••••••••" />
                        @error('password')
                            <p class="text-sm mt-2" style="color:#fca5a5;">{{ $message }}</p>
                        @enderror
                    </div>
                    <button type="submit" class="cinema-submit">دخول إلى اللوحة</button>
                </form>
            </div>
        </section>
    </div>
@endsection