@extends('front.layouts.app')

@section('title', 'حساب الطبيب - لوحة التحكم')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/profile-doctor.css') }}">
    <style>
        .chat-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 15px;
            transition: 0.3s;
        }
        .chat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .patient-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .patient-avatar {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f0f2f5;
        }
        .patient-details h3 {
            margin: 0;
            font-size: 1rem;
            color: var(--primary-color);
            font-weight: 700;
        }
        .patient-details p {
            margin: 3px 0 0;
            color: #777;
            font-size: 0.85rem;
        }
        .btn-reply {
            background: var(--primary-color);
            color: white;
            padding: 8px 18px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: 0.3s;
        }
        .btn-reply:hover {
            opacity: 0.9;
        }
        .sidebar-nav .nav-item.active {
            background: var(--primary-color);
            color: white;
        }
        .sidebar-nav .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            text-decoration: none;
            color: #555;
            border-radius: 10px;
            margin-bottom: 5px;
            transition: 0.3s;
            font-weight: 600;
        }
        .sidebar-nav .nav-item:hover:not(.active) {
            background: #f0f2f5;
        }
        .sidebar-nav .nav-item i {
            width: 20px;
            text-align: center;
        }
    </style>
@endsection

@section('content')
    <main class="profile-main" style="padding: 40px 0;">
        <div class="container">
            <div class="profile-layout" style="display: grid; grid-template-columns: 280px 1fr; gap: 30px;">
                <!-- Sidebar (Matched to profile-doctor.html) -->
                <aside class="profile-sidebar">
                    <div class="sidebar-user" style="background: white; padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 20px;">
                        <img src="{{ Auth::user()->image ? asset(Auth::user()->image) : 'https://ui-avatars.com/api/?name='.urlencode(Auth::user()->name).'&background=2c3e50&color=fff&bold=true' }}"
                            alt="Doctor" style="width: 100px; height: 100px; border-radius: 50%; margin-bottom: 15px; border: 4px solid #f0f2f5; object-fit: cover;">
                        <h3 style="font-size: 1.2rem; color: #333; margin-bottom: 5px;">{{ Auth::user()->name }}</h3>
                        <span class="specialty" style="color: #777; font-size: 0.9rem;">{{ Auth::user()->specialization ?? 'طبيب معتمد' }}</span>
                    </div>
                    
                    <nav class="sidebar-nav" style="background: white; padding: 20px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);">
                        <a href="{{ route('doctor.dashboard') }}" class="nav-item active"><i class="fas fa-comments"></i> الاستشارات</a>
                        <a href="{{ route('jobs.my-ads') }}" class="nav-item"><i class="fas fa-briefcase"></i> إعلانات الوظائف</a>
                        <a href="{{ route('doctor.profile.edit') }}" class="nav-item"><i class="fas fa-user-edit"></i> تعديل البروفايل</a>
                        <hr style="border: 0; border-top: 1px solid #eee; margin: 15px 0;">
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="nav-item logout" style="width: 100%; border: none; background: none; color: #ef4444; cursor: pointer; text-align: right; font-family: inherit;">
                                <i class="fas fa-sign-out-alt"></i> تسجيل الخروج
                            </button>
                        </form>
                    </nav>
                </aside>

                <!-- Content Area -->
                <div class="profile-content">
                    <section id="consultations" class="content-section active">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
                            <h2 style="font-size: 1.5rem; color: var(--primary-color);">الاستشارات الجارية</h2>
                            <span style="background: #e1f5fe; color: #0288d1; padding: 5px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: bold;">
                                إجمالي الحالات: {{ $clients->count() }}
                            </span>
                        </div>

                        <div class="consultation-list">
                            @forelse($clients as $client)
                            <div class="chat-card">
                                <div class="patient-info">
                                    <img src="{{ $client->image ? asset($client->image) : 'https://ui-avatars.com/api/?name='.urlencode($client->name).'&background=random&color=fff' }}" alt="{{ $client->name }}" class="patient-avatar">
                                    <div class="patient-details">
                                        <h3>{{ $client->name }}</h3>
                                        <p><i class="far fa-clock"></i> بدأ الاستشارة: {{ $client->created_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                                <div class="chat-actions">
                                    <a href="{{ route('chat.show', $client->id) }}" class="btn-reply">
                                        <i class="fas fa-reply"></i>
                                        الرد على الرسائل
                                    </a>
                                </div>
                            </div>
                            @empty
                            <div class="no-data" style="text-align: center; padding: 80px 20px; background: white; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);">
                                <i class="fas fa-comment-slash" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
                                <p style="color: #999; font-size: 1.1rem;">لا توجد استشارات نشطة حالياً</p>
                                <p style="color: #bbb; font-size: 0.9rem; margin-top: 10px;">بمجرد أن يبدأ المرضى بمراسلتك ستظهر المحادثات هنا</p>
                            </div>
                            @endforelse
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>
@endsection