<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @if($siteBrand->hasFavicon())
        <link rel="icon" href="{{ $siteBrand->faviconUrl() }}">
    @endif
    <title>تسجيل الدخول — {{ $siteBrand->name() }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <style>
        body {
            background: linear-gradient(135deg, #1a2035 0%, #2d3a5c 100%);
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
        }
        .login-card {
            background: #fff;
            border-radius: 20px;
            padding: 2.5rem;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 20px 60px rgba(0,0,0,.3);
        }
        .login-logo {
            width: 64px; height: 64px;
            background: #0d6efd;
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 2rem; color: #fff;
            margin: 0 auto 1.2rem;
            overflow: hidden;
        }
        .login-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
        .login-logo--img { background: #f0f4ff; }
        .form-control { border-radius: 10px; padding: .7rem 1rem; }
        .btn-login {
            border-radius: 10px;
            padding: .75rem;
            font-weight: 600;
            font-size: 1rem;
        }
    </style>
</head>
<body>
<div class="login-card">
    @if($siteBrand->hasLogo())
        <div class="login-logo login-logo--img"><img src="{{ $siteBrand->logoUrl() }}" alt="{{ $siteBrand->name() }}"></div>
    @else
        <div class="login-logo"><i class="bi bi-hospital-fill"></i></div>
    @endif
    <a href="{{ route('login') }}" class="d-flex align-items-center gap-1 text-muted small mb-3 text-decoration-none">
        <i class="bi bi-arrow-right"></i> الصفحة الرئيسية
    </a>
    <h4 class="text-center fw-bold mb-1">{{ $siteBrand->name() }}</h4>
    <p class="text-center text-muted mb-4" style="font-size:.875rem">لوحة إدارة النظام</p>

    @if(session('error'))
        <div class="alert alert-danger py-2 d-flex align-items-center gap-2">
            <i class="bi bi-exclamation-circle-fill"></i>
            {{ session('error') }}
        </div>
    @endif
    @if(session('success'))
        <div class="alert alert-success py-2 d-flex align-items-center gap-2">
            <i class="bi bi-check-circle-fill"></i>
            {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.login.post') }}">
        @csrf
        <div class="mb-4">
            <label class="form-label fw-semibold">رقم هاتف المدير</label>
            <div class="input-group">
                <span class="input-group-text bg-light border-end-0">
                    <i class="bi bi-phone text-muted"></i>
                </span>
                <input type="text" name="phone" value="{{ old('phone') }}"
                       class="form-control border-start-0 @error('phone') is-invalid @enderror"
                       placeholder="07xxxxxxxxx" required autofocus inputmode="tel" autocomplete="tel">
            </div>
            @error('phone') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            <div class="form-text small">نفس رقم الهاتف المسجّل في حساب المدير — بدون كلمة مرور.</div>
        </div>

        <button type="submit" class="btn btn-primary w-100 btn-login">
            <i class="bi bi-box-arrow-in-right me-1"></i> دخول
        </button>
    </form>
</div>
</body>
</html>
