{{-- Class Teacher Card --}}
{{-- Usage: @include('components.class-teacher-card', ['class' => $classModel]) --}}
@if(isset($classObj) && ($classObj->classTeacher || $classObj->asstClassTeacher))
<div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-stone-100 bg-amber-50/50">
        <h3 class="font-bold text-stone-800 text-sm">
            <i class="fas fa-user-tie text-amber-500 mr-2"></i>Class Teacher
        </h3>
    </div>
    <div class="p-4 space-y-3">
        @if($classObj->classTeacher)
        <div class="flex items-center gap-3 p-3 bg-amber-50 rounded-xl ring-1 ring-amber-200/60">
            <div class="w-11 h-11 bg-amber-500 rounded-full flex items-center justify-center flex-shrink-0">
                <span class="text-white font-bold text-sm">
                    {{ strtoupper(substr($classObj->classTeacher->name, 0, 1)) }}{{ strtoupper(substr(explode(' ', $classObj->classTeacher->name)[1] ?? '', 0, 1)) }}
                </span>
            </div>
            <div class="flex-1 min-w-0">
                <p class="font-bold text-stone-800 text-sm">{{ $classObj->classTeacher->name }}</p>
                <p class="text-[10px] text-amber-600 font-semibold uppercase tracking-wider">Class Teacher</p>
                @if($classObj->classTeacher->teacherProfile?->specialization)
                <p class="text-[11px] text-stone-400">{{ $classObj->classTeacher->teacherProfile->specialization }}</p>
                @endif
            </div>
            <a href="#" onclick="event.preventDefault(); window.location='{{ route('communication.conversations') }}'"
               class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center hover:bg-amber-200 transition">
                <i class="fas fa-comment text-amber-600 text-xs"></i>
            </a>
        </div>
        @endif

        @if($classObj->asstClassTeacher)
        <div class="flex items-center gap-3 p-3 bg-stone-50 rounded-xl">
            <div class="w-10 h-10 bg-stone-300 rounded-full flex items-center justify-center flex-shrink-0">
                <span class="text-white font-bold text-xs">
                    {{ strtoupper(substr($classObj->asstClassTeacher->name, 0, 1)) }}{{ strtoupper(substr(explode(' ', $classObj->asstClassTeacher->name)[1] ?? '', 0, 1)) }}
                </span>
            </div>
            <div class="flex-1 min-w-0">
                <p class="font-semibold text-stone-700 text-sm">{{ $classObj->asstClassTeacher->name }}</p>
                <p class="text-[10px] text-stone-500 font-semibold uppercase tracking-wider">Asst. Class Teacher</p>
                @if($classObj->asstClassTeacher->teacherProfile?->specialization)
                <p class="text-[11px] text-stone-400">{{ $classObj->asstClassTeacher->teacherProfile->specialization }}</p>
                @endif
            </div>
            <a href="#" onclick="event.preventDefault(); window.location='{{ route('communication.conversations') }}'"
               class="w-8 h-8 bg-stone-200 rounded-lg flex items-center justify-center hover:bg-stone-300 transition">
                <i class="fas fa-comment text-stone-500 text-xs"></i>
            </a>
        </div>
        @endif
    </div>
</div>
@endif