<!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 { min-height:100vh; background:linear-gradient(135deg,#134e4a,#0f766e); 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,.25); }
        .logo-box { width:64px; height:64px; background:#0f766e; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; margin:0 auto 1.2rem; overflow:hidden; }
        .logo-box img { width:100%; height:100%; object-fit:contain; padding:6px; }
        .logo-box--img { background:#f0fdfa; }
        .form-control { border-radius:10px; padding:.7rem 1rem; }
        .btn-login { border-radius:10px; padding:.75rem; font-weight:600; background:#0f766e; border:none; }
        .btn-login:hover { background:#0d5e57; }
    </style>
</head>
<body>
<div class="login-card">
    @if($siteBrand->hasLogo())
        <div class="logo-box logo-box--img"><img src="{{ $siteBrand->logoUrl() }}" alt="{{ $siteBrand->name() }}"></div>
    @else
        <div class="logo-box"><i class="bi bi-headset"></i></div>
    @endif
    <a href="{{ route('login') }}" class="d-flex align-items-center justify-content-center gap-1 text-muted small mb-3 text-decoration-none" style="color:rgba(255,255,255,.4)!important">
        <i class="bi bi-arrow-right"></i> الصفحة الرئيسية
    </a>
    <h5 class="text-center fw-bold mb-1">لوحة الاستقبال</h5>
    <p class="text-center text-muted mb-4" style="font-size:.85rem">سكرتيرة / موظف الاستقبال</p>

    @if(session('error'))
    <div class="alert alert-danger py-2 small">{{ session('error') }}</div>
    @endif

    <form method="POST" action="{{ route('secretary.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" placeholder="07xxxxxxxxx" required autofocus inputmode="tel" autocomplete="tel">
            </div>
            <div class="form-text small mt-1">رقم هاتف حساب السكرتير كما سجّله الطبيب.</div>
        </div>
        <button type="submit" class="btn btn-login text-white w-100">
            <i class="bi bi-box-arrow-in-right me-1"></i> دخول
        </button>
    </form>

    <div class="text-center mt-3">
        <a href="{{ route('doctor.login') }}" class="text-muted small">
            <i class="bi bi-arrow-left me-1"></i> دخول الطبيب
        </a>
    </div>
</div>
</body>
</html>
