@extends('layouts.guest')

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

@section('content')
    <div class="flex min-h-full flex-col justify-center px-4 py-12 sm:px-6 lg:px-8">
        <div class="sm:mx-auto sm:w-full sm:max-w-md">
            <div class="mb-8 text-center">
                <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-madar-950 text-2xl font-bold text-teal-400 shadow-lg ring-1 ring-teal-500/30">
                    م
                </div>
                <h1 class="text-2xl font-bold text-zinc-900">لوحة تحكم مدار</h1>
                <p class="mt-2 text-sm text-zinc-500">أدخل بيانات المسؤول للمتابعة</p>
            </div>

            <div class="rounded-2xl border border-zinc-200 bg-white p-8 shadow-xl shadow-zinc-200/50">
                @if (session('success'))
                    <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800">
                        {{ session('success') }}
                    </div>
                @endif

                <form method="post" action="{{ route('admin.login.attempt') }}" class="space-y-5">
                    @csrf
                    <div>
                        <label for="login" class="mb-1.5 block text-sm font-medium text-zinc-700">اسم المستخدم أو البريد أو الجوال</label>
                        <input id="login" name="login" type="text" value="{{ old('login') }}" required autocomplete="username"
                               class="block w-full rounded-xl border border-zinc-300 bg-zinc-50 px-4 py-2.5 text-zinc-900 shadow-inner focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20">
                        @error('login')
                            <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="password" class="mb-1.5 block text-sm font-medium text-zinc-700">كلمة المرور</label>
                        <input id="password" name="password" type="password" required autocomplete="current-password"
                               class="block w-full rounded-xl border border-zinc-300 bg-zinc-50 px-4 py-2.5 text-zinc-900 shadow-inner focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20">
                        @error('password')
                            <p class="mt-1.5 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="flex items-center gap-2">
                        <input id="remember" name="remember" type="checkbox" value="1" class="size-4 rounded border-zinc-300 text-teal-600 focus:ring-teal-500">
                        <label for="remember" class="text-sm text-zinc-600">تذكرني على هذا الجهاز</label>
                    </div>
                    <button type="submit"
                            class="flex w-full justify-center rounded-xl bg-madar-950 px-4 py-3 text-sm font-bold text-white shadow-lg shadow-teal-900/20 transition hover:bg-madar-900 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2">
                        دخول
                    </button>
                </form>
            </div>
            <p class="mt-8 text-center text-xs text-zinc-400">واجهة REST متاحة على <code class="rounded bg-zinc-200 px-1 py-0.5 text-zinc-700">/api/*</code></p>

            @if (app()->environment('local'))
                <div class="mx-auto mt-6 max-w-md rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-4 text-xs leading-relaxed text-zinc-600">
                    <p class="font-semibold text-zinc-800">وضع التطوير المحلي</p>
                    <p class="mt-2">حساب تجريبي بصلاحية لوحة: <code class="rounded bg-white px-1">madar_demo</code> أو <code class="rounded bg-white px-1">demo@madar.app</code> — المرور <code class="rounded bg-white px-1">password</code> (بعد <code class="rounded bg-white px-1">php artisan db:seed --class=MadarDemoSeeder</code>).</p>
                    <p class="mt-2">لمنح حسابك صلاحية المسؤول: <code class="block mt-1 break-all rounded bg-white px-2 py-1">php artisan madar:promote-admin YOUR_LOGIN</code></p>
                </div>
            @endif
        </div>
    </div>
@endsection