@extends('layouts.auth')

@php
    $ar = app()->getLocale() === 'ar';
    $companyName = $ar ? ($company?->company_name_ar ?: 'مطلق صالح ساطي') : ($company?->company_name_en ?: 'MUTLAQ SALEH SATI');
@endphp

@section('title', $ar ? 'تسجيل الدخول' : 'Sign in')

@section('content')
<main class="auth-shell">
    <section class="brand-panel" aria-label="ERP overview">
        <header>
            <div class="brand-name">{{ $companyName }}</div>
            <div class="brand-subtitle">{{ $ar ? 'نظام المحاسبة وإدارة المخزون' : 'ACCOUNTING & INVENTORY ERP' }}</div>
        </header>

        <div class="brand-copy">
            <div class="brand-kicker">{{ $ar ? 'مساحة عمل موحدة' : 'One connected workspace' }}</div>
            <h1>{{ $ar ? 'إدارة أعمالك بوضوح وثقة.' : 'Run your business with clarity and control.' }}</h1>
            <p>{{ $ar ? 'المبيعات والمشتريات والمخزون وحسابات العملاء في نظام واحد آمن وسهل الاستخدام.' : 'Sales, purchasing, inventory and customer accounts—all working together in one secure system.' }}</p>

            <div class="capability-grid" aria-label="System capabilities">
                <div class="capability"><strong>{{ $ar ? 'المبيعات والفواتير' : 'Sales & invoicing' }}</strong><span>{{ $ar ? 'فواتير ضريبية وغير ضريبية' : 'Tax and non-tax billing' }}</span></div>
                <div class="capability"><strong>{{ $ar ? 'المخزون' : 'Live inventory' }}</strong><span>{{ $ar ? 'حركة مخزون دقيقة ومباشرة' : 'Accurate stock movements' }}</span></div>
                <div class="capability"><strong>{{ $ar ? 'حسابات العملاء' : 'Customer accounts' }}</strong><span>{{ $ar ? 'المبيعات والمدفوعات والأرصدة' : 'Sales, payments and balances' }}</span></div>
                <div class="capability"><strong>{{ $ar ? 'التقارير' : 'Business reports' }}</strong><span>{{ $ar ? 'رؤية مالية واضحة' : 'Clear financial visibility' }}</span></div>
            </div>
        </div>

        <footer class="brand-footer"><span class="status-dot"></span>{{ $ar ? 'نظام آمن مع سجل تدقيق كامل' : 'Secure access with complete audit history' }}</footer>
    </section>

    <section class="signin-panel">
        <div class="auth-tools">
            <nav class="language-switch" aria-label="Language">
                <a href="{{ route('language.switch', 'en') }}" class="{{ !$ar ? 'active' : '' }}" lang="en">EN</a>
                <a href="{{ route('language.switch', 'ar') }}" class="{{ $ar ? 'active' : '' }}" lang="ar">العربية</a>
            </nav>
        </div>

        <div class="signin-wrap">
            <div class="mobile-brand">
                <strong>{{ $companyName }}</strong>
                <span>{{ $ar ? 'نظام المحاسبة وإدارة المخزون' : 'Accounting & Inventory ERP' }}</span>
            </div>

            <header class="signin-heading">
                <div class="eyebrow">{{ $ar ? 'بوابة النظام' : 'ERP portal' }}</div>
                <h2>{{ $ar ? 'مرحباً بعودتك' : 'Welcome back' }}</h2>
                <p>{{ $ar ? 'أدخل بياناتك للوصول إلى لوحة التحكم.' : 'Enter your credentials to access your business dashboard.' }}</p>
            </header>

            @if(session('status'))
                <div class="auth-alert success" role="status"><i class="bi bi-check-circle"></i><span>{{ session('status') }}</span></div>
            @endif

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

            <form id="loginForm" method="POST" action="{{ route('login') }}">
                @csrf
                <div class="form-group">
                    <label for="login" class="form-label">{{ $ar ? 'اسم المستخدم أو البريد الإلكتروني' : 'Username or email' }}</label>
                    <div class="field-shell @error('login') invalid @enderror">
                        <i class="bi bi-person"></i>
                        <input type="text" class="form-control" id="login" name="login" value="{{ old('login') }}" required autofocus autocomplete="username" placeholder="{{ $ar ? 'أدخل اسم المستخدم' : 'Enter your username' }}">
                    </div>
                </div>

                <div class="form-group">
                    <label for="password" class="form-label">{{ $ar ? 'كلمة المرور' : 'Password' }}</label>
                    <div class="field-shell has-action @error('password') invalid @enderror">
                        <i class="bi bi-lock"></i>
                        <input type="password" class="form-control" id="password" name="password" required autocomplete="current-password" placeholder="{{ $ar ? 'أدخل كلمة المرور' : 'Enter your password' }}">
                        <button class="password-toggle" type="button" id="togglePassword" aria-label="{{ $ar ? 'إظهار كلمة المرور' : 'Show password' }}" aria-pressed="false"><i class="bi bi-eye" id="togglePasswordIcon"></i></button>
                    </div>
                </div>

                <div class="form-options">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                        <label class="form-check-label" for="remember">{{ $ar ? 'تذكرني' : 'Remember me' }}</label>
                    </div>
                    <a href="{{ route('password.request') }}" class="forgot-link">{{ $ar ? 'نسيت كلمة المرور؟' : 'Forgot password?' }}</a>
                </div>

                <button type="submit" class="sign-in-button" id="loginButton"><span>{{ $ar ? 'تسجيل الدخول' : 'Sign in securely' }}</span><i class="bi bi-arrow-right"></i></button>
                <div class="signin-foot"><i class="bi bi-shield-check"></i>{{ $ar ? 'الدخول للمستخدمين المصرح لهم فقط' : 'Authorized users only · Activity is securely logged' }}</div>
            </form>
        </div>
    </section>
</main>
@endsection

@section('scripts')
<script>
const passwordInput=document.getElementById('password'),toggleButton=document.getElementById('togglePassword'),toggleIcon=document.getElementById('togglePasswordIcon');
toggleButton?.addEventListener('click',()=>{const visible=passwordInput.type==='text';passwordInput.type=visible?'password':'text';toggleIcon.className=visible?'bi bi-eye':'bi bi-eye-slash';toggleButton.setAttribute('aria-pressed',visible?'false':'true');toggleButton.setAttribute('aria-label',visible?@json($ar?'إظهار كلمة المرور':'Show password'):@json($ar?'إخفاء كلمة المرور':'Hide password'))});
document.getElementById('loginForm')?.addEventListener('submit',()=>{const button=document.getElementById('loginButton');button.disabled=true;button.querySelector('span').textContent=@json($ar?'جاري تسجيل الدخول...':'Signing in...');button.querySelector('i').className='spinner-border spinner-border-sm'});
</script>
@endsection