<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @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>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, sans-serif;
            display: flex;
            direction: rtl;
        }

        /* ══ النصف الأيمن — تسويق ══ */
        .left-panel {
            display: none;
            width: 45%;
            background: linear-gradient(160deg, #5b21b6 0%, #7c3aed 50%, #a855f7 100%);
            padding: 3rem 2.5rem;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .left-panel::before {
            content: '';
            position: absolute;
            width: 400px; height: 400px;
            border-radius: 50%;
            background: rgba(255,255,255,.06);
            top: -100px; left: -100px;
        }
        .left-panel::after {
            content: '';
            position: absolute;
            width: 300px; height: 300px;
            border-radius: 50%;
            background: rgba(255,255,255,.05);
            bottom: -80px; right: -80px;
        }
        @media(min-width: 900px) { .left-panel { display: flex; } }

        .brand-logo {
            width: 56px; height: 56px;
            background: rgba(255,255,255,.2);
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 2rem;
            overflow: hidden;
        }
        .brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
        .brand-logo--img { background: rgba(255,255,255,.35); }
        .brand-title {
            color: #fff;
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: .5rem;
            line-height: 1.2;
        }
        .brand-sub {
            color: rgba(255,255,255,.75);
            font-size: .95rem;
            margin-bottom: 2.5rem;
            line-height: 1.6;
        }
        .feature-list { list-style: none; }
        .feature-list li {
            display: flex; align-items: center; gap: 12px;
            color: rgba(255,255,255,.9);
            font-size: .9rem;
            margin-bottom: 1rem;
        }
        .feat-icon {
            width: 36px; height: 36px;
            background: rgba(255,255,255,.15);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .stats-row {
            display: flex; gap: 1.5rem;
            margin-top: 2.5rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,.2);
        }
        .stat-item { text-align: center; }
        .stat-item .sv { font-size: 1.4rem; font-weight: 800; color: #fff; }
        .stat-item .sl { font-size: .72rem; color: rgba(255,255,255,.65); }

        /* ══ النصف الأيسر — الفورم ══ */
        .right-panel {
            flex: 1;
            background: #f8faff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1.5rem;
            overflow-y: auto;
        }
        .auth-box {
            width: 100%;
            max-width: 460px;
        }

        /* ── تبويبات ── */
        .auth-tabs {
            display: flex;
            background: #f1f0ff;
            border-radius: 14px;
            padding: 4px;
            margin-bottom: 1.8rem;
        }
        .auth-tab {
            flex: 1;
            padding: .7rem;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            font-size: .9rem;
            cursor: pointer;
            transition: all .2s;
            background: transparent;
            color: #7c3aed;
        }
        .auth-tab.active {
            background: #7c3aed;
            color: #fff;
            box-shadow: 0 3px 10px rgba(124,58,237,.35);
        }

        /* ── inputs ── */
        .field-group { margin-bottom: 1.1rem; }
        .field-label {
            display: block;
            font-size: .8rem;
            font-weight: 700;
            color: #374151;
            margin-bottom: .4rem;
        }
        .field-wrap {
            position: relative;
        }
        .field-icon {
            position: absolute;
            right: 13px; top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 1rem;
            pointer-events: none;
        }
        .field-input {
            width: 100%;
            padding: .72rem 2.6rem .72rem 1rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 12px;
            font-size: .9rem;
            transition: border-color .15s, box-shadow .15s;
            background: #fff;
            color: #1e293b;
        }
        .field-input:focus {
            outline: none;
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124,58,237,.12);
        }
        .field-input.is-invalid { border-color: #ef4444; }
        .err-msg { font-size: .75rem; color: #ef4444; margin-top: 4px; }

        /* ── زر ── */
        .submit-btn {
            width: 100%;
            padding: .85rem;
            background: #7c3aed;
            color: #fff;
            border: none;
            border-radius: 13px;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: all .2s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            margin-top: 1.5rem;
        }
        .submit-btn:hover   { background: #5b21b6; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,.4); }
        .submit-btn:active  { transform: scale(.98); }
        .submit-btn:disabled{ opacity: .65; cursor: not-allowed; transform: none; }

        /* ── separator ── */
        .sep {
            display: flex; align-items: center; gap: 10px;
            margin: 1.2rem 0;
            color: #94a3b8; font-size: .78rem;
        }
        .sep::before, .sep::after {
            content: ''; flex: 1;
            height: 1px; background: #e5e7eb;
        }

        /* ── alert ── */
        .auth-alert {
            border-radius: 10px;
            padding: .7rem 1rem;
            font-size: .84rem;
            margin-bottom: 1rem;
            display: flex; align-items: center; gap: .5rem;
        }
        .alert-err { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
        .alert-ok  { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

        /* ── mini logo (mobile) ── */
        .mobile-logo {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .mobile-logo .ml-icon {
            width: 56px; height: 56px;
            background: #7c3aed;
            border-radius: 16px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.6rem; color: #fff;
            margin-bottom: .6rem;
            overflow: hidden;
        }
        .mobile-logo .ml-icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
        .mobile-logo .ml-icon--img { background: #fff; }
        .mobile-logo h1 { font-size: 1.2rem; font-weight: 800; color: #1e293b; margin: 0; }
        .mobile-logo p  { font-size: .78rem; color: #64748b; margin: 0; }
        @media(min-width: 900px) { .mobile-logo { display: none; } }

        /* ── gender/blood chips ── */
        .chip-group { display: flex; gap: .5rem; flex-wrap: wrap; }
        .chip {
            padding: .45rem .9rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 20px;
            font-size: .8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .15s;
            background: #fff;
            color: #374151;
        }
        .chip.sel-male   { border-color: #3b82f6; background: #eff6ff; color: #1e40af; }
        .chip.sel-female { border-color: #ec4899; background: #fdf2f8; color: #9d174d; }
        .chip.sel-blood  { border-color: #ef4444; background: #fee2e2; color: #991b1b; }

        /* ── password strength ── */
        .pwd-strength { height: 4px; border-radius: 2px; margin-top: 6px; background: #e5e7eb; overflow: hidden; }
        .pwd-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }
        .pwd-label { font-size: .68rem; color: #94a3b8; margin-top: 3px; }

        /* ── back link ── */
        .back-link { text-align: center; margin-top: 1.2rem; font-size: .78rem; color: #94a3b8; }
        .back-link a { color: #7c3aed; text-decoration: none; font-weight: 600; }
    </style>
</head>
<body>

<!-- ══ اللوحة اليسرى (ديسكتوب) ══ -->
<div class="left-panel">
    <div style="position:relative;z-index:1">
        @if($siteBrand->hasLogo())
            <div class="brand-logo brand-logo--img"><img src="{{ $siteBrand->logoUrl() }}" alt="{{ $siteBrand->name() }}"></div>
        @else
            <div class="brand-logo">🏥</div>
        @endif
        <div class="brand-title">بوابتك الصحية<br>الذكية</div>
        <div class="brand-sub">
            سجّل وتابع صحتك، احجز مواعيدك، واطّلع على
            وصفاتك وتحاليلك من مكان واحد.
        </div>

        <ul class="feature-list">
            <li>
                <div class="feat-icon">📅</div>
                <div><strong>حجز مواعيد فوري</strong><br><span style="font-size:.78rem;opacity:.75">اختر طبيبك والوقت المناسب</span></div>
            </li>
            <li>
                <div class="feat-icon">🔢</div>
                <div><strong>تتبع الطابور لحظة بلحظة</strong><br><span style="font-size:.78rem;opacity:.75">اعرف دورك قبل وصولك</span></div>
            </li>
            <li>
                <div class="feat-icon">📁</div>
                <div><strong>سجلاتك الطبية دائماً معك</strong><br><span style="font-size:.78rem;opacity:.75">وصفات، تحاليل، تشخيصات</span></div>
            </li>
            <li>
                <div class="feat-icon">🔔</div>
                <div><strong>إشعارات فورية</strong><br><span style="font-size:.78rem;opacity:.75">تذكير بالمواعيد والطابور</span></div>
            </li>
        </ul>

        <div class="stats-row">
            <div class="stat-item"><div class="sv">+500</div><div class="sl">طبيب</div></div>
            <div class="stat-item"><div class="sv">+10K</div><div class="sl">مريض</div></div>
            <div class="stat-item"><div class="sv">4.9★</div><div class="sl">تقييم</div></div>
        </div>
    </div>
</div>

<!-- ══ اللوحة اليمنى (الفورم) ══ -->
<div class="right-panel">
    <div class="auth-box">

        <!-- logo للموبايل -->
        <div class="mobile-logo">
            @if($siteBrand->hasLogo())
                <div class="ml-icon ml-icon--img"><img src="{{ $siteBrand->logoUrl() }}" alt=""></div>
            @else
                <div class="ml-icon">🏥</div>
            @endif
            <h1>{{ $siteBrand->name() }}</h1>
            <p>بوابة المريض الذكية</p>
        </div>

        <!-- تبويبات -->
        <div class="auth-tabs">
            <button class="auth-tab active" id="tab-login"    onclick="showTab('login')">
                <i class="bi bi-box-arrow-in-right me-1"></i>تسجيل الدخول
            </button>
            <button class="auth-tab"         id="tab-register" onclick="showTab('register')">
                <i class="bi bi-person-plus me-1"></i>حساب جديد
            </button>
        </div>

        <!-- alerts -->
        @if(session('error'))
        <div class="auth-alert alert-err">
            <i class="bi bi-exclamation-circle-fill"></i>{{ session('error') }}
        </div>
        @endif
        @if(session('success'))
        <div class="auth-alert alert-ok">
            <i class="bi bi-check-circle-fill"></i>{{ session('success') }}
        </div>
        @endif

        <!-- ══ فورم الدخول ══ -->
        <div id="form-login">
            <div style="margin-bottom:1.5rem">
                <div style="font-size:1.3rem;font-weight:800;color:#1e293b;margin-bottom:.2rem">مرحباً بعودتك 👋</div>
                <div style="font-size:.85rem;color:#64748b">سجّل دخولك للمتابعة</div>
            </div>

            <form method="POST" action="{{ route('patient.login.post') }}" onsubmit="setLoading('login-btn')">
                @csrf
                <div class="field-group">
                    <label class="field-label">رقم الهاتف</label>
                    <div class="field-wrap">
                        <i class="bi bi-phone field-icon"></i>
                        <input type="text" name="phone" value="{{ old('phone') }}"
                               class="field-input" placeholder="07xxxxxxxxx" required autofocus inputmode="tel" autocomplete="tel">
                    </div>
                </div>
                <p style="font-size:.78rem;color:#64748b;margin:-0.25rem 0 0.5rem;line-height:1.4">
                    بعد موافقة الإدارة على تسجيلك يمكنك الدخول بهذا الرقم فقط.
                </p>
                <button type="submit" class="submit-btn" id="login-btn">
                    <i class="bi bi-box-arrow-in-right"></i>
                    <span>تسجيل الدخول</span>
                </button>
            </form>

            <div class="sep">أو</div>
            <div style="text-align:center;font-size:.85rem;color:#64748b">
                لا تملك حساباً؟
                <button onclick="showTab('register')" style="background:none;border:none;color:#7c3aed;font-weight:700;cursor:pointer;font-size:.85rem">
                    سجّل الآن مجاناً ←
                </button>
            </div>
        </div>

        <!-- ══ فورم التسجيل ══ -->
        <div id="form-register" style="display:none">
            <div style="margin-bottom:1.5rem">
                <div style="font-size:1.3rem;font-weight:800;color:#1e293b;margin-bottom:.2rem">إنشاء حساب جديد ✨</div>
                <div style="font-size:.85rem;color:#64748b">مجاني — يُفعَّل حسابك لاحقاً من الإدارة</div>
            </div>

            <form method="POST" action="{{ route('patient.register.post') }}" onsubmit="setLoading('reg-btn')">
                @csrf

                <!-- الاسم والهاتف -->
                <div class="row g-2 mb-0">
                    <div class="col-12 field-group">
                        <label class="field-label">الاسم الكامل <span style="color:#ef4444">*</span></label>
                        <div class="field-wrap">
                            <i class="bi bi-person field-icon"></i>
                            <input type="text" name="name" value="{{ old('name') }}"
                                   class="field-input @error('name') is-invalid @enderror"
                                   placeholder="محمد أحمد علي" required>
                        </div>
                        @error('name')<div class="err-msg">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-7 field-group">
                        <label class="field-label">رقم الهاتف <span style="color:#ef4444">*</span></label>
                        <div class="field-wrap">
                            <i class="bi bi-phone field-icon"></i>
                            <input type="text" name="phone" value="{{ old('phone') }}"
                                   class="field-input @error('phone') is-invalid @enderror"
                                   placeholder="07xxxxxxxxx" required>
                        </div>
                        @error('phone')<div class="err-msg">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-5 field-group">
                        <label class="field-label">تاريخ الميلاد</label>
                        <input type="date" name="date_of_birth"
                               value="{{ old('date_of_birth') }}"
                               class="field-input" style="padding-right:1rem">
                    </div>

                    <div class="col-12 field-group">
                        <label class="field-label">البريد الإلكتروني <span style="color:#64748b;font-weight:500">(اختياري)</span></label>
                        <div class="field-wrap">
                            <i class="bi bi-envelope field-icon"></i>
                            <input type="email" name="email" value="{{ old('email') }}"
                                   class="field-input @error('email') is-invalid @enderror"
                                   placeholder="إن وُجد">
                        </div>
                        @error('email')<div class="err-msg">{{ $message }}</div>@enderror
                    </div>
                </div>

                <!-- الجنس -->
                <div class="field-group">
                    <label class="field-label">الجنس</label>
                    <div class="chip-group" id="gender-chips">
                        <div class="chip {{ old('gender')==='male' ? 'sel-male':'' }}"
                             onclick="selectGender('male')" id="chip-male">
                            👨 ذكر
                        </div>
                        <div class="chip {{ old('gender')==='female' ? 'sel-female':'' }}"
                             onclick="selectGender('female')" id="chip-female">
                            👩 أنثى
                        </div>
                    </div>
                    <input type="hidden" name="gender" id="gender-input" value="{{ old('gender') }}">
                </div>

                <!-- فصيلة الدم -->
                <div class="field-group">
                    <label class="field-label">فصيلة الدم</label>
                    <div class="chip-group" id="blood-chips">
                        @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bt)
                        <div class="chip {{ old('blood_type')===$bt ? 'sel-blood':'' }}"
                             onclick="selectBlood('{{ $bt }}')" id="chip-{{ str_replace('+','p',str_replace('-','m',$bt)) }}">
                            {{ $bt }}
                        </div>
                        @endforeach
                    </div>
                    <input type="hidden" name="blood_type" id="blood-input" value="{{ old('blood_type') }}">
                </div>

                <!-- الموافقة -->
                <div style="display:flex;align-items:flex-start;gap:10px;margin-bottom:.5rem">
                    <input type="checkbox" id="terms" required
                           style="margin-top:3px;width:16px;height:16px;accent-color:#7c3aed;cursor:pointer;flex-shrink:0">
                    <label for="terms" style="font-size:.8rem;color:#475569;cursor:pointer;line-height:1.5">
                        أوافق على
                        <a href="#" style="color:#7c3aed;text-decoration:none;font-weight:600">شروط الاستخدام</a>
                        و
                        <a href="#" style="color:#7c3aed;text-decoration:none;font-weight:600">سياسة الخصوصية</a>
                    </label>
                </div>

                <button type="submit" class="submit-btn" id="reg-btn">
                    <i class="bi bi-person-check-fill"></i>
                    <span>إنشاء الحساب مجاناً</span>
                </button>
            </form>

            <div class="sep">أو</div>
            <div style="text-align:center;font-size:.85rem;color:#64748b">
                لديك حساب بالفعل؟
                <button onclick="showTab('login')" style="background:none;border:none;color:#7c3aed;font-weight:700;cursor:pointer;font-size:.85rem">
                    سجّل دخولك ←
                </button>
            </div>
        </div>

        <!-- رابط الرجوع -->
        <div class="back-link">
            <a href="{{ route('login') }}"><i class="bi bi-arrow-right me-1"></i>الصفحة الرئيسية</a>
        </div>

    </div>
</div>

<script>
// ══ تبديل التبويب ══
function showTab(tab) {
    const isLogin = tab === 'login';
    document.getElementById('form-login').style.display    = isLogin ? 'block' : 'none';
    document.getElementById('form-register').style.display = isLogin ? 'none'  : 'block';
    document.getElementById('tab-login').className    = 'auth-tab' + (isLogin ? ' active' : '');
    document.getElementById('tab-register').className = 'auth-tab' + (!isLogin ? ' active' : '');
}

// إظهار تبويب التسجيل إن كان فيه أخطاء تسجيل
@if($errors->has('name') || $errors->has('phone') || $errors->has('email'))
    showTab('register');
@endif

// ══ اختيار الجنس ══
function selectGender(val) {
    document.getElementById('chip-male').className   = 'chip' + (val==='male'   ? ' sel-male'   : '');
    document.getElementById('chip-female').className = 'chip' + (val==='female' ? ' sel-female' : '');
    document.getElementById('gender-input').value    = val;
}

// ══ اختيار فصيلة الدم ══
function selectBlood(val) {
    document.querySelectorAll('#blood-chips .chip').forEach(c => c.className = 'chip');
    const id = 'chip-' + val.replace('+','p').replace('-','m');
    const el = document.getElementById(id);
    if (el) el.className = 'chip sel-blood';
    document.getElementById('blood-input').value = val;
}

// ══ loading state ══
function setLoading(btnId) {
    const btn  = document.getElementById(btnId);
    const span = btn.querySelector('span');
    btn.disabled   = true;
    span.textContent = 'جارٍ المعالجة...';
    btn.insertAdjacentHTML('afterbegin','<span class="spinner-border spinner-border-sm me-2"></span>');
}
</script>
</body>
</html>
