@extends('front.layouts.app')

@section('title', 'بروفايل الدكتور - د. ' . $doctor->name)

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/doctor-profile.css') }}">
    <style>
        .doctor-avatar-large img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .doctor-status-badge.online .status-dot { background: #4caf50; }
        .doctor-status-badge.offline .status-dot { background: #9e9e9e; }
        .btn-start-now {
            width: 100%;
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            margin-top: 20px;
            text-decoration: none;
            transition: 0.3s;
        }
        .btn-start-now:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(52, 73, 152, 0.3); }
    </style>
@endsection

@section('content')
    <main class="main-content" style="padding: 40px 0;">
        <div class="container">
            <!-- Breadcrumb -->
            <div class="breadcrumb" style="margin-bottom: 30px; font-size: 0.9rem; color: #777;">
                <a href="{{ route('chat.doctors') }}" style="color: var(--primary-color); text-decoration: none;">الأطباء</a>
                <span>/</span>
                <span id="breadcrumbName">بروفايل الدكتور</span>
            </div>

            <div class="profile-layout" style="display: grid; grid-template-columns: 1fr 350px; gap: 30px;">
                <!-- Right Side: Info & Bio -->
                <div class="profile-main">
                    <!-- Basic Info Card -->
                    <div class="profile-card info-card" style="background: white; padding: 30px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 30px;">
                        <div class="doctor-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 25px;">
                            <div class="doctor-avatar-large" id="docAvatar">
                                <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="object-fit: cover;">
                            </div>
                            <div class="doctor-title" style="flex: 1;">
                                <h1 id="docName" style="font-size: 1.8rem; color: #333; margin-bottom: 5px;">د. {{ $doctor->name }}</h1>
                                <p id="docSpec" style="color: #777; font-size: 1.1rem;">{{ $doctor->specialization ?? 'تخصص عام' }}</p>
                            </div>
                            <div class="doctor-status-badge {{ $doctor->is_online ? 'online' : 'offline' }}" style="display: flex; align-items: center; gap: 8px; background: #f0f2f5; padding: 5px 15px; border-radius: 20px; font-size: 0.85rem;">
                                <span class="status-dot" style="width: 10px; height: 10px; border-radius: 50%;"></span>
                                <span class="status-text">{{ $doctor->is_online ? 'متصل الآن' : 'غير متصل' }}</span>
                            </div>
                        </div>

                        <div class="stats-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; border-top: 1px solid #eee; pt: 25px; margin-top: 25px; padding-top: 25px;">
                            <div class="stat-box" style="text-align: center;">
                                <i class="fas fa-briefcase" style="color: var(--primary-color); font-size: 1.2rem; margin-bottom: 10px; display: block;"></i>
                                <span class="stat-val" style="display: block; font-size: 1.3rem; font-weight: 800; color: #333;">{{ $doctor->experience_years }}</span>
                                <span class="stat-lbl" style="color: #888; font-size: 0.85rem;">سنوات الخبرة</span>
                            </div>
                            <div class="stat-box" style="text-align: center;">
                                <i class="fas fa-clock" style="color: var(--primary-color); font-size: 1.2rem; margin-bottom: 10px; display: block;"></i>
                                <span class="stat-val" style="display: block; font-size: 1.3rem; font-weight: 800; color: #333;">{{ $doctor->response_time ?? 30 }}</span>
                                <span class="stat-lbl" style="color: #888; font-size: 0.85rem;">وقت الرد (دقيقة)</span>
                            </div>
                        </div>
                    </div>

                    <!-- About Doctor -->
                    <div class="profile-card about-card" style="background: white; padding: 30px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 30px;">
                        <h3 style="font-size: 1.3rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;"><i class="fas fa-info-circle" style="color: var(--primary-color);"></i> نبذة عن الدكتور</h3>
                        <p id="docAbout" style="color: #555; line-height: 1.8; margin-bottom: 20px;">
                            {{ $doctor->bio ?? 'لا توجد نبذة تعريفية متاحة حالياً.' }}
                        </p>
                    </div>

                </div>

                <!-- Left Side: Booking & Fees -->
                <aside class="profile-sidebar">
                    <div class="sidebar-card booking-card" style="background: white; padding: 30px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border: 2px solid var(--primary-color);">
                        <h3 style="font-size: 1.3rem; margin-bottom: 20px; text-align: center;"><i class="fas fa-calendar-alt"></i> حجز استشارة</h3>
                        
                        <div class="consultation-types">
                            <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                                <i class="fas fa-comment-dots" style="font-size: 1.5rem; color: var(--primary-color);"></i>
                                <div style="flex: 1;">
                                    <span style="display: block; font-weight: 700; color: #333;">استشارة كتابية</span>
                                    <small style="color: #777;">شات سريع ومباشر</small>
                                </div>
                            </div>
                        </div>

                        <a href="{{ route('chat.show', $doctor->id) }}" class="btn-start-now">
                            <i class="fas fa-bolt"></i>
                            ابدأ الاستشارة الآن
                        </a>
                        
                    </div>

                </aside>
            </div>
        </div>
    </main>
@endsection