@extends('front.layouts.app')

@section('title', 'تعديل الملف الشخصي - د. ' . $user->name)

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/profile-doctor.css') }}">
    <style>
        .edit-form-card {
            background: #fff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #444;
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: 'Cairo', sans-serif;
            font-size: 0.95rem;
        }
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 73, 152, 0.1);
        }
        .btn-save {
            background: var(--primary-color);
            color: white;
            padding: 12px 40px;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
            font-size: 1rem;
        }
        .btn-save:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        .alert {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
        }
        .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;
        }
    </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 -->
                <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="{{ $user->image ? asset($user->image) : 'https://ui-avatars.com/api/?name='.urlencode($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;">{{ $user->name }}</h3>
                        <span class="specialty" style="color: #777; font-size: 0.9rem;">{{ $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"><i class="fas fa-comments"></i> الاستشارات</a>
                        <a href="{{ route('doctor.profile.edit') }}" class="nav-item active"><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">
                    <div class="edit-form-card">
                        <div class="card-header" style="margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 15px;">
                            <h2 style="color: var(--primary-color); font-size: 1.4rem;"><i class="fas fa-user-cog"></i> إعدادات الملف الشخصي</h2>
                            <p style="color: #666; font-size: 0.9rem;">أكمل بياناتك ليتمكن المرضى من معرفة خبراتك وحجز استشارات معك</p>
                        </div>

                        @if(session('success'))
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle"></i> {{ session('success') }}
                            </div>
                        @endif

                        <form action="{{ route('doctor.profile.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-grid">
                                <div class="form-group">
                                    <label>الاسم بالكامل</label>
                                    <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>التخصص</label>
                                    <input type="text" name="specialization" value="{{ old('specialization', $user->specialization) }}" class="form-control" placeholder="مثلاً: استشاري باطني">
                                </div>
                                <div class="form-group">
                                    <label>سنوات الخبرة</label>
                                    <input type="number" name="experience_years" value="{{ old('experience_years', $user->experience_years) }}" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>تغيير صورة البروفايل</label>
                                    <input type="file" name="image" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>رقم الهاتف</label>
                                    <input type="text" name="phone" value="{{ old('phone', $user->phone) }}" class="form-control">
                                </div>
                            </div>


                            <div class="form-group">
                                <label>نبذة تعريفية شاملة</label>
                                <textarea name="bio" class="form-control" rows="5">{{ old('bio', $user->bio) }}</textarea>
                            </div>

                            <div style="background: #f8fafc; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
                                <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                                    <input type="checkbox" name="is_online" value="1" {{ $user->is_online ? 'checked' : '' }} style="width: 20px; height: 20px;">
                                    <span style="font-weight: 700; color: #333;">أنا متاح الآن كـ Online (تظهر في نتائج البحث)</span>
                                </label>
                            </div>

                            <div style="text-align: left;">
                                <button type="submit" class="btn-save">حفظ جميع البيانات</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection