@extends('layouts.admin')

@section('title', 'تفاصيل المدرب - منصة ابدأ')

@section('page-title', 'تفاصيل المدرب')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

    {{-- ===== Header — نفس نمط صفحة الكورس ===== --}}
    <div class="bg-blue-50 rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 relative overflow-hidden">
        <div class="relative z-10">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <x-back-button href="{{ route('admin.instructors.index') }}" label="العودة لإدارة المدربين" />
                        <h1 class="text-2xl font-bold text-[#1e3a8a]">تفاصيل المدرب</h1>
                    </div>
                    <p class="text-gray-600 text-sm">عرض تفاصيل ومعلومات المدرب</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== Layout: 2/3 + 1/3 — نفس صفحة الكورس ===== --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

        {{-- ─────────── Main Content ─────────── --}}
        <div class="lg:col-span-2 space-y-4">

            {{-- بطاقة: معلومات المدرب الأساسية --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-bold text-gray-800">معلومات المدرب</h3>
                </div>

                {{-- Profile Header --}}
                <div class="flex items-start justify-between mb-3">
                    <div class="flex items-center flex-1">
                        <x-user-avatar :user="$instructor" size="w-14 h-14" class="ml-4" />
                        <div class="flex-1 mr-4">
                            <h2 class="text-lg font-bold text-gray-800 mb-2">{{ $instructor->name }}</h2>
                            <div class="flex items-center gap-2">
                                @if($instructor->specialization)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-[#1e3a8a]">
                                        {{ $instructor->specialization }}
                                    </span>
                                @endif
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
                                    مدرب نشط
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Info Grid — نفس grid صفحة الكورس --}}
                <div class="grid grid-cols-2 gap-3 mb-3">
                    <div>
                        <p class="text-xs font-medium text-gray-500 mb-1">البريد الإلكتروني</p>
                        <p class="text-sm font-medium text-gray-800">{{ $instructor->email }}</p>
                    </div>
                    @if($instructor->phone)
                    <div>
                        <p class="text-xs font-medium text-gray-500 mb-1">رقم الهاتف</p>
                        <p class="text-sm font-medium text-gray-800">{{ $instructor->phone }}</p>
                    </div>
                    @endif
                    <div>
                        <p class="text-xs font-medium text-gray-500 mb-1">إجمالي الكورسات</p>
                        <p class="text-sm font-medium text-gray-800">{{ $instructor->coursesAsInstructor->count() }} كورس</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 mb-1">المتدربون المسجلون</p>
                        <p class="text-sm font-medium text-gray-800">{{ $totalTraineesCount ?? 0 }} متدرب</p>
                    </div>
                </div>
            </div>

            {{-- بطاقة: النبذة التعريفية --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-bold text-gray-800">النبذة التعريفية</h3>
                </div>
                @if($instructor->bio)
                    <p class="text-sm font-medium text-gray-800 leading-relaxed">{{ $instructor->bio }}</p>
                @else
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <p class="text-sm text-gray-400 font-medium">لا توجد نبذة تعريفية متاحة</p>
                        <p class="text-xs text-gray-400 mt-1">يمكن إضافتها عبر تعديل بيانات المدرب</p>
                    </div>
                @endif
            </div>

            {{-- بطاقة: السيرة الذاتية --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-bold text-gray-800">السيرة الذاتية (CV)</h3>
                </div>
                @if($instructor->cv_path)
                    <a href="{{ asset('storage/' . $instructor->cv_path) }}" target="_blank"
                       class="inline-flex items-center px-4 py-2 bg-blue-50 hover:bg-blue-100 text-[#1e3a8a] rounded-lg transition-colors text-sm font-medium">
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        عرض السيرة الذاتية
                    </a>
                @else
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <p class="text-sm text-gray-400 font-medium">لا توجد سيرة ذاتية متاحة</p>
                        <p class="text-xs text-gray-400 mt-1">يمكن إضافتها عبر تعديل بيانات المدرب</p>
                    </div>
                @endif
            </div>

            {{-- بطاقة: الكورسات المسندة — نفس بطاقة جدول المتدربين في صفحة الكورس --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-bold text-gray-800">الكورسات المسندة</h3>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-50 text-[#1e3a8a]">
                        {{ $instructor->coursesAsInstructor->count() }} كورس
                    </span>
                </div>

                @forelse($instructor->coursesAsInstructor as $course)
                    <div class="border border-gray-100 rounded-lg p-4 mb-3 hover:shadow-sm transition-shadow">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <h4 class="text-sm font-bold text-gray-800 mb-2">{{ $course->title }}</h4>
                                <div class="flex items-center gap-3 text-xs text-gray-500">
                                    <span class="flex items-center gap-1">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                                        </svg>
                                        {{ $course->category->name }}
                                    </span>
                                    @if($course->location)
                                    <span class="flex items-center gap-1">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                        {{ $course->location }}
                                    </span>
                                    @endif
                                    <span class="flex items-center gap-1">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg>
                                        {{ \Carbon\Carbon::parse($course->start_date)->format('d/m/Y') }}
                                    </span>
                                </div>
                            </div>
                            <div>
                                @if($course->type === 'free')
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">مجاني</span>
                                @elseif($course->type === 'sponsored')
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">مدعوم</span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-50 text-yellow-700">{{ number_format($course->price) }} ل.س</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                        </svg>
                        <p class="text-sm text-gray-500 font-medium">لا يوجد كورسات مسندة لهذا المدرب</p>
                    </div>
                @endforelse
            </div>

        </div>{{-- end main --}}

        {{-- ─────────── Sidebar ─────────── --}}
        <div class="space-y-4">

            {{-- بطاقة: الإجراءات — نفس نمط صفحة الكورس تماماً --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <h3 class="text-base font-bold text-gray-800 mb-4">الإجراءات</h3>
                <div class="space-y-2">
                    <a href="{{ route('admin.instructors.edit', $instructor) }}"
                       class="w-full flex items-center justify-center px-4 py-2 bg-[#1e3a8a] text-white rounded-lg hover:bg-[#1e40af] transition-colors text-sm font-medium">
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        تعديل بيانات المدرب
                    </a>

                    <form id="delete-instructor-show-{{ $instructor->id }}"
                          action="{{ route('admin.instructors.destroy', $instructor) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="button"
                                class="w-full flex items-center justify-center px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors text-sm font-medium"
                                data-confirm-delete="هل تريد حذف حساب هذا المدرب؟ لا يمكن التراجع عن هذا الإجراء."
                                data-confirm-title="حذف المدرب"
                                data-form-id="delete-instructor-show-{{ $instructor->id }}">
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                            حذف حساب المدرب
                        </button>
                    </form>
                </div>
            </div>

            {{-- بطاقة: الإحصائيات السريعة — نفس نمط كروت الكورس --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <h3 class="text-base font-bold text-gray-800 mb-4">إحصائيات سريعة</h3>
                <div class="space-y-2">
                    <div class="flex items-center p-2 bg-blue-50 rounded-lg">
                        <div class="w-6 h-6 bg-[#1e3a8a] rounded flex items-center justify-center flex-shrink-0 ml-2">
                            <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                        </div>
                        <div class="flex-1 flex items-center justify-between">
                            <span class="text-xs font-bold text-gray-600">الكورسات النشطة</span>
                            <span class="text-xs font-black text-[#1e3a8a]">{{ $instructor->coursesAsInstructor->where('is_visible', true)->count() }}</span>
                        </div>
                    </div>
                    <div class="flex items-center p-2 bg-green-50 rounded-lg">
                        <div class="w-6 h-6 bg-green-600 rounded flex items-center justify-center flex-shrink-0 ml-2">
                            <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                            </svg>
                        </div>
                        <div class="flex-1 flex items-center justify-between">
                            <span class="text-xs font-bold text-gray-600">إجمالي الكورسات</span>
                            <span class="text-xs font-black text-green-600">{{ $instructor->coursesAsInstructor->count() }}</span>
                        </div>
                    </div>
                    <div class="flex items-center p-2 bg-purple-50 rounded-lg">
                        <div class="w-6 h-6 bg-purple-600 rounded flex items-center justify-center flex-shrink-0 ml-2">
                            <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <div class="flex-1 flex items-center justify-between">
                            <span class="text-xs font-bold text-gray-600">المتدربون المسجلون</span>
                            <span class="text-xs font-black text-purple-600">{{ $totalTraineesCount ?? 0 }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- بطاقة: معلومات التواصل — نفس نمط بطاقة المدرب في صفحة الكورس --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <h3 class="text-base font-bold text-gray-800 mb-4">معلومات التواصل</h3>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-50 rounded-full flex items-center justify-center ml-3 flex-shrink-0">
                            <svg class="w-4 h-4 text-[#1e3a8a]" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-0.5">البريد الإلكتروني</p>
                            <p class="text-sm font-medium text-gray-800">{{ $instructor->email }}</p>
                        </div>
                    </div>
                    @if($instructor->phone)
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-green-50 rounded-full flex items-center justify-center ml-3 flex-shrink-0">
                                <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 mb-0.5">رقم الهاتف</p>
                                <p class="text-sm font-medium text-gray-800">{{ $instructor->phone }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

        </div>{{-- end sidebar --}}

    </div>
</div>
@endsection