@extends('front.layouts.app')

@section('title', 'قائمة الأطباء - الاستشارات الطبية')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/doctors.css') }}">
@endsection

@section('content')
    <main class="main-content" style="padding-top: 20px;">
        <div class="container">
            <!-- Page header -->
            <div class="page-header">
                <div class="breadcrumb">
                    <a href="{{ route('home') }}"><i class="fas fa-home"></i> الرئيسية</a>
                    <span>/</span>
                    <span>الأطباء</span>
                </div>
            </div>

            <!-- Hero / Stats -->
            <section class="hero-section">
                <div class="hero-content">
                    <h1>استشارات طبية مع أطباء معتمدين</h1>
                    <p>اختر من بين أفضل الأطباء واستشرهم أونلاين عبر الشات في أي وقت.</p>
                </div>
                <div class="hero-stats">
                    <div class="hero-stat">
                        <div class="stat-number">{{ $doctors->count() }}</div>
                        <div class="stat-text">دكتور متاح</div>
                    </div>
                    <div class="hero-stat">
                        <div class="stat-number">{{ $doctors->where('is_online', true)->count() }}</div>
                        <div class="stat-text">أونلاين الآن</div>
                    </div>
                </div>
            </section>

            <div class="doctors-layout">
                <!-- Filters Sidebar (Static UI to match doctors.html) -->
                <aside class="filters-sidebar" id="filtersSidebar">
                    <div class="filters-header">
                        <h3><i class="fas fa-filter"></i> الفلاتر</h3>
                        <button class="clear-filters"><i class="fas fa-redo"></i> إعادة تعيين</button>
                    </div>

                    <div class="filter-section">
                        <h4 class="filter-title"><i class="fas fa-user-md"></i> التخصص</h4>
                        <div class="filter-options">
                            <label class="filter-option"><input type="checkbox" checked> <span>كل التخصصات</span></label>
                            <label class="filter-option"><input type="checkbox"> <span>قلب</span></label>
                            <label class="filter-option"><input type="checkbox"> <span>باطنة</span></label>
                            <label class="filter-option"><input type="checkbox"> <span>أطفال</span></label>
                        </div>
                    </div>

                    <div class="filter-section">
                        <h4 class="filter-title"><i class="fas fa-signal"></i> التوفر</h4>
                        <div class="filter-options">
                            <label class="filter-option small"><input type="checkbox"> <span>أونلاين الآن فقط</span></label>
                        </div>
                    </div>

                </aside>

                <!-- Doctors list -->
                <section class="doctors-main">
                    <div class="results-bar">
                        <div class="results-info">
                            <span class="results-count">عرض <strong>{{ $doctors->count() }}</strong> دكتور</span>
                        </div>
                    </div>

                    <div id="doctorsGrid" class="doctors-grid">
                        @forelse($doctors as $doctor)
                        <div class="doctor-card" style="padding: 0; position: relative;">
                            <div class="doctor-card-content" style="padding: 20px; display: flex; gap: 15px; align-items: flex-start;">
                                <div class="doctor-info" style="flex: 1;">
                                    <h3 class="doctor-name" style="margin-bottom: 5px;">د. {{ $doctor->name }}</h3>
                                    <p class="doctor-speciality" style="margin-bottom: 12px; color: #777;">{{ $doctor->specialization ?? 'تخصص عام' }}</p>
                                    
                                    <div class="doctor-stats-mini" style="display: flex; flex-direction: column; gap: 8px;">
                                        <div class="stat" style="display: flex; align-items: center; gap: 10px; color: #444;">
                                            <i class="fas fa-briefcase" style="color: #64748b;"></i>
                                            <span style="font-weight: 600;">{{ $doctor->experience_years ?? 0 }} سنة خبرة</span>
                                        </div>
                                        <div class="stat" style="display: flex; align-items: center; gap: 10px; color: #444;">
                                            <i class="fas fa-clock" style="color: #64748b;"></i>
                                            <span>رد خلال {{ $doctor->response_time ?? 30 }} دقيقة</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="doctor-avatar-box" style="width: 100px; height: 100px; border-radius: 15px; overflow: hidden; flex-shrink: 0; background: var(--primary-color);">
                                    <img src="{{ $doctor->image ? asset($doctor->image) : 'https://ui-avatars.com/api/?name=' . urlencode($doctor->name) . '&background=344998&color=fff&bold=true' }}" 
                                         alt="{{ $doctor->name }}" 
                                         style="width: 100%; height: 100%; object-fit: cover;">
                                    @if($doctor->is_online)
                                        <div style="position: absolute; top: 15px; right: 15px; width: 12px; height: 12px; background: #4caf50; border: 2px solid #fff; border-radius: 50%;"></div>
                                    @endif
                                </div>
                            </div>

                            <div class="doctor-actions" style="display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #eee;">
                                <a href="{{ route('chat.show', $doctor->id) }}" class="btn-chat" style="padding: 15px; text-align: center; background: var(--primary-color); color: white; text-decoration: none; font-weight: bold; font-size: 0.95rem;">
                                    استشارة فورية
                                </a>
                                <a href="{{ route('doctor.profile.view', $doctor->id) }}" class="btn-profile" style="padding: 15px; text-align: center; background: #f8fafc; color: #333; text-decoration: none; font-weight: bold; font-size: 0.95rem;">
                                    عرض الملف
                                </a>
                            </div>
                        </div>
                        @empty
                        <div class="empty-state" style="grid-column: 1 / -1; text-align: center; padding: 50px;">
                            <div class="empty-icon" style="font-size: 4rem; color: #ddd; margin-bottom: 20px;">
                                <i class="fas fa-user-md"></i>
                            </div>
                            <h3>لا يوجد أطباء متاحون حالياً</h3>
                        </div>
                        @endforelse
                    </div>
                </section>
            </div>
        </div>
    </main>
@endsection