<x-app-layout>
    <x-module-hero
        :title="($assignment->mentor->name ?? 'Mentor') . ' & ' . ($assignment->mentee->name ?? 'Mentee')"
        :description="$assignment->programme->title ?? 'Mentorship Assignment'"
        icon="fa-link">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.assignments.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Assignments
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> Programmes
                </a>
            @endcan
            @can('view mentorship applications')
                <a href="{{ route('mentorship.applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-file-alt text-sm"></i> Applications
                </a>
            @endcan
            @cannot('view mentorship applications')
                @can('view own mentorship applications')
                    <a href="{{ route('mentorship.applications.index') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-file-alt text-sm"></i> My Applications
                    </a>
                @endcan
            @endcannot
            @can('view mentorship assignments')
                <a href="{{ route('mentorship.assignments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.assignments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-link text-sm"></i> Assignments
                </a>
            @endcan
            @can('view mentorship sessions')
                <a href="{{ route('mentorship.sessions.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.index') || request()->routeIs('mentorship.sessions.show') || request()->routeIs('mentorship.sessions.create') || request()->routeIs('mentorship.sessions.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-calendar-alt text-sm"></i> Sessions
                </a>
                <a href="{{ route('mentorship.sessions.calendar') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.calendar') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-calendar text-sm"></i> Sessions Calendar
                </a>
            @endcan
            @can('view mentorship certificates')
                <a href="{{ route('mentorship.certificates.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-certificate text-sm"></i> Certificates
                </a>
            @endcan
            @can('download mentorship certificates')
                @cannot('view mentorship certificates')
                    <a href="{{ route('mentorship.certificates.my-certificates') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.certificates.my-certificates') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-award text-sm"></i> My Certificates
                    </a>
                @endcannot
            @endcan
            @can('view mentorship payments')
                <a href="{{ route('mentorship.payments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-credit-card text-sm"></i> Payments
                </a>
            @endcan
            @can('view own mentorship payments')
                @cannot('view mentorship payments')
                    <a href="{{ route('mentorship.payments.my-payments') }}"
                       class="module-hero-tab {{ request()->routeIs('mentorship.payments.my-payments') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-history text-sm"></i> My Payments
                    </a>
                @endcannot
            @endcan
            @can('view mentorship categories')
                <a href="{{ route('mentorship.categories.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.categories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-folder text-sm"></i> Categories
                </a>
            @endcan
        </x-slot>

        <x-slot name="actions">
            @can('edit mentorship assignments')
                <a href="{{ route('mentorship.assignments.edit', $assignment) }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-white text-green-800 text-sm font-medium rounded hover:bg-green-50 transition-colors">
                    <i class="fas fa-edit"></i> Edit
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        {{-- Tab Navigation --}}
        <div class="flex flex-wrap gap-2 mb-6 border-b border-gray-200 pb-3">
            <button onclick="showTab('overview')" class="px-4 py-2 rounded-lg bg-green-600 text-white text-sm tab-btn" data-tab="overview">
                <i class="fas fa-info-circle mr-1"></i> Overview
            </button>
            <button onclick="showTab('sessions')" class="px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 text-sm tab-btn" data-tab="sessions">
                <i class="fas fa-calendar-check mr-1"></i> Sessions
            </button>
            <button onclick="showTab('progress')" class="px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 text-sm tab-btn" data-tab="progress">
                <i class="fas fa-chart-line mr-1"></i> Progress
            </button>
            @if($assignment->status === 'completed')
                <button onclick="showTab('certificate')" class="px-4 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 text-sm tab-btn" data-tab="certificate">
                    <i class="fas fa-certificate mr-1"></i> Certificate
                </button>
            @endif
        </div>

        {{-- Overview Tab --}}
        <div id="overview-tab" class="tab-content">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2 space-y-4">
                    <div class="bg-white rounded-lg border border-gray-200 p-6">
                        <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                            <i class="fas fa-graduation-cap text-green-600"></i> Programme Information
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                            <div>
                                <p class="text-xs text-gray-500">Programme</p>
                                <p class="font-medium text-gray-900">{{ $assignment->programme->title }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Start Date</p>
                                <p class="font-medium text-gray-900">{{ $assignment->start_date?->format('M d, Y') ?? 'Not set' }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">End Date</p>
                                <p class="font-medium text-gray-900">{{ $assignment->end_date?->format('M d, Y') ?? 'Not set' }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Meeting Frequency</p>
                                <p class="font-medium text-gray-900">{{ ucfirst(str_replace('_', ' ', $assignment->meeting_frequency ?? 'Not set')) }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Status</p>
                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                                    @if($assignment->status === 'active') bg-green-100 text-green-800
                                    @elseif($assignment->status === 'completed') bg-blue-100 text-blue-800
                                    @elseif($assignment->status === 'pending_acceptance') bg-yellow-100 text-yellow-800
                                    @else bg-red-100 text-red-800 @endif">
                                    {{ ucfirst(str_replace('_', ' ', $assignment->status)) }}
                                </span>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Created</p>
                                <p class="font-medium text-gray-900">{{ $assignment->created_at->format('M d, Y') }}</p>
                            </div>
                        </div>
                    </div>

                    @if($assignment->goals)
                        <div class="bg-white rounded-lg border border-gray-200 p-6">
                            <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                                <i class="fas fa-bullseye text-green-600"></i> Mentorship Goals
                            </h3>
                            <p class="text-sm text-gray-700 whitespace-pre-line">{{ $assignment->goals }}</p>
                        </div>
                    @endif

                    @if($assignment->milestones && count($assignment->milestones) > 0)
                        <div class="bg-white rounded-lg border border-gray-200 p-6">
                            <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                                <i class="fas fa-flag-checkered text-green-600"></i> Milestones
                            </h3>
                            <div class="space-y-3">
                                @foreach($assignment->milestones as $index => $milestone)
                                    <div class="flex items-start gap-3 p-3 rounded-lg {{ ($milestone['completed'] ?? false) ? 'bg-green-50' : 'bg-gray-50' }}">
                                        <div class="flex-shrink-0 mt-0.5">
                                            @if($milestone['completed'] ?? false)
                                                <span class="flex items-center justify-center w-6 h-6 bg-green-500 rounded-full">
                                                    <i class="fas fa-check text-white text-xs"></i>
                                                </span>
                                            @else
                                                <span class="flex items-center justify-center w-6 h-6 bg-gray-300 rounded-full text-xs text-gray-600 font-medium">
                                                    {{ $index + 1 }}
                                                </span>
                                            @endif
                                        </div>
                                        <div class="flex-1">
                                            <h4 class="text-sm font-medium text-gray-900 {{ ($milestone['completed'] ?? false) ? 'line-through text-gray-400' : '' }}">
                                                {{ $milestone['title'] ?? 'Untitled' }}
                                            </h4>
                                            @if($milestone['description'] ?? null)
                                                <p class="text-xs text-gray-500">{{ $milestone['description'] }}</p>
                                            @endif
                                            @if($milestone['due_date'] ?? null)
                                                <p class="text-xs text-gray-400 mt-1">
                                                    <i class="fas fa-calendar mr-1"></i>
                                                    Due: {{ \Carbon\Carbon::parse($milestone['due_date'])->format('M d, Y') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <div class="space-y-4">
                    {{-- Progress --}}
                    <div class="bg-white rounded-lg border border-gray-200 p-6">
                        <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                            <i class="fas fa-chart-pie text-green-600"></i> Progress
                        </h3>
                        <div class="flex items-center justify-center mb-3">
                            <div class="relative w-24 h-24">
                                <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 36 36">
                                    <path stroke="currentColor" stroke-width="4" fill="none" class="text-gray-200"
                                          d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                    <path stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none" class="text-green-500"
                                          stroke-dasharray="{{ $assignment->progress_percentage ?? 0 }}, 100"
                                          d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                </svg>
                                <span class="absolute inset-0 flex items-center justify-center text-xl font-bold text-gray-900">
                                    {{ $assignment->progress_percentage ?? 0 }}%
                                </span>
                            </div>
                        </div>
                        @php
                            $completedMilestones = collect($assignment->milestones ?? [])->where('completed', true)->count();
                            $totalMilestones = count($assignment->milestones ?? []);
                        @endphp
                        <p class="text-center text-xs text-gray-500">{{ $completedMilestones }} of {{ $totalMilestones }} milestones</p>
                    </div>

                    {{-- Mentor --}}
                    <div class="bg-white rounded-lg border border-gray-200 p-6">
                        <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <i class="fas fa-user-tie text-green-600"></i> Mentor
                        </h3>
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-user-tie text-purple-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900 text-sm">{{ $assignment->mentor->name }}</p>
                                <p class="text-xs text-gray-500">{{ $assignment->mentor->email }}</p>
                            </div>
                        </div>
                        <a href="mailto:{{ $assignment->mentor->email }}"
                           class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition text-sm">
                            <i class="fas fa-envelope"></i> Contact Mentor
                        </a>
                    </div>

                    {{-- Mentee --}}
                    <div class="bg-white rounded-lg border border-gray-200 p-6">
                        <h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <i class="fas fa-user-graduate text-green-600"></i> Mentee
                        </h3>
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-user text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900 text-sm">{{ $assignment->mentee->name }}</p>
                                <p class="text-xs text-gray-500">{{ $assignment->mentee->email }}</p>
                            </div>
                        </div>
                        <a href="mailto:{{ $assignment->mentee->email }}"
                           class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 bg-teal-100 text-teal-700 rounded-lg hover:bg-teal-200 transition text-sm">
                            <i class="fas fa-envelope"></i> Contact Mentee
                        </a>
                    </div>

                    {{-- Quick Actions --}}
                    @if($assignment->status === 'active')
                        <div class="bg-white rounded-lg border border-gray-200 p-6">
                            <h3 class="text-base font-semibold text-gray-800 mb-3">Quick Actions</h3>
                            <div class="space-y-2">
                                @can('create mentorship sessions')
                                    <a href="{{ route('mentorship.sessions.create', ['assignment_id' => $assignment->id]) }}"
                                       class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                                        <i class="fas fa-calendar-plus"></i> Schedule Session
                                    </a>
                                @endcan
                                @can('complete mentorship assignments')
                                    <form action="{{ route('mentorship.assignments.complete', $assignment) }}" method="POST"
                                          onsubmit="return confirm('Mark this assignment as complete?')">
                                        @csrf
                                        <button type="submit"
                                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition text-sm">
                                            <i class="fas fa-check-circle"></i> Mark Complete
                                        </button>
                                    </form>
                                @endcan
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Sessions Tab --}}
        <div id="sessions-tab" class="tab-content hidden">
            <div class="bg-white rounded-lg border border-gray-200">
                <div class="p-4 border-b border-gray-200 flex items-center justify-between">
                    <h3 class="text-base font-semibold text-gray-800">Mentorship Sessions</h3>
                    @can('create mentorship sessions')
                        <a href="{{ route('mentorship.sessions.create', ['assignment_id' => $assignment->id]) }}"
                           class="btn-action-approve">
                            <i class="fas fa-plus"></i> Schedule Session
                        </a>
                    @endcan
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full table-zebra">
                        <thead>
                            <tr>
                                <th class="th-col-1 px-4 py-3 text-left">Title</th>
                                <th class="th-col-2 px-4 py-3 text-left">Type</th>
                                <th class="th-col-3 px-4 py-3 text-left">Date/Time</th>
                                <th class="th-col-4 px-4 py-3 text-left">Status</th>
                                <th class="th-col-5 px-4 py-3 text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($assignment->sessions ?? [] as $session)
                                <tr>
                                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $session->title }}</td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-0.5 rounded text-xs font-medium {{ $session->type === 'online' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }}">
                                            <i class="fas {{ $session->type === 'online' ? 'fa-video' : 'fa-building' }} mr-1"></i>
                                            {{ ucfirst($session->type) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-xs text-gray-500">{{ $session->start_time?->format('M d, Y h:i A') ?? 'N/A' }}</td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                                            @if($session->status === 'completed') bg-green-100 text-green-800
                                            @elseif($session->status === 'cancelled') bg-red-100 text-red-800
                                            @else bg-blue-100 text-blue-800 @endif">
                                            {{ ucfirst($session->status) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <a href="{{ route('mentorship.sessions.show', $session) }}" class="btn-action-view">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-4 py-12 text-center text-gray-500 text-sm">
                                        <i class="fas fa-calendar-times text-3xl mb-2 block"></i>
                                        No sessions scheduled yet
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Progress Tab --}}
        <div id="progress-tab" class="tab-content hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-chart-bar text-green-600"></i> Progress Overview
                    </h3>
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">Overall Progress</span>
                            <span class="font-medium">{{ $assignment->progress_percentage ?? 0 }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-3">
                            <div class="bg-green-500 h-3 rounded-full" style="width: {{ $assignment->progress_percentage ?? 0 }}%"></div>
                        </div>
                    </div>
                    @if($assignment->milestones && count($assignment->milestones) > 0)
                        <div class="mt-4">
                            <h4 class="text-sm font-medium text-gray-800 mb-2">Milestones</h4>
                            @foreach($assignment->milestones as $milestone)
                                <div class="flex items-center gap-2 mb-2">
                                    <i class="fas {{ ($milestone['completed'] ?? false) ? 'fa-check-circle text-green-500' : 'fa-circle text-gray-300' }} text-sm"></i>
                                    <span class="text-sm {{ ($milestone['completed'] ?? false) ? 'text-gray-400 line-through' : 'text-gray-700' }}">
                                        {{ $milestone['title'] ?? 'Untitled' }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-calendar-check text-green-600"></i> Session Statistics
                    </h3>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="p-3 bg-gray-50 rounded-lg text-center">
                            <p class="text-2xl font-bold text-gray-900">{{ ($assignment->sessions ?? collect())->count() }}</p>
                            <p class="text-xs text-gray-500">Total</p>
                        </div>
                        <div class="p-3 bg-green-50 rounded-lg text-center">
                            <p class="text-2xl font-bold text-green-600">{{ ($assignment->sessions ?? collect())->where('status', 'completed')->count() }}</p>
                            <p class="text-xs text-gray-500">Completed</p>
                        </div>
                        <div class="p-3 bg-blue-50 rounded-lg text-center">
                            <p class="text-2xl font-bold text-blue-600">{{ ($assignment->sessions ?? collect())->where('status', 'scheduled')->count() }}</p>
                            <p class="text-xs text-gray-500">Scheduled</p>
                        </div>
                        <div class="p-3 bg-red-50 rounded-lg text-center">
                            <p class="text-2xl font-bold text-red-600">{{ ($assignment->sessions ?? collect())->where('status', 'cancelled')->count() }}</p>
                            <p class="text-xs text-gray-500">Cancelled</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Certificate Tab --}}
        @if($assignment->status === 'completed')
            <div id="certificate-tab" class="tab-content hidden">
                <div class="bg-white rounded-lg border border-gray-200 p-6 text-center">
                    @if($assignment->certificate)
                        <i class="fas fa-certificate text-5xl text-yellow-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Certificate Earned</h3>
                        <p class="text-gray-500 mb-6 text-sm">Certificate #{{ $assignment->certificate->certificate_number }}</p>
                        <div class="flex justify-center gap-3">
                            <a href="{{ route('mentorship.certificates.show', $assignment->certificate) }}" class="btn-action-view">
                                <i class="fas fa-eye"></i> View Certificate
                            </a>
                            <a href="{{ route('mentorship.certificates.download', $assignment->certificate) }}" class="btn-action-download">
                                <i class="fas fa-download"></i> Download
                            </a>
                        </div>
                    @else
                        <i class="fas fa-certificate text-5xl text-gray-300 mb-4"></i>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">No Certificate Generated</h3>
                        <p class="text-gray-500 text-sm mb-4">A certificate can be generated for this completed assignment.</p>
                        @can('generate mentorship certificates')
                            <form action="{{ route('mentorship.certificates.generate', $assignment) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="btn-action-approve">
                                    <i class="fas fa-certificate mr-1"></i> Generate Certificate
                                </button>
                            </form>
                        @endcan
                    @endif
                </div>
            </div>
        @endif
    </div>

    @push('scripts')
    <script>
        function showTab(tabName) {
            document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));
            document.getElementById(tabName + '-tab').classList.remove('hidden');
            document.querySelectorAll('.tab-btn').forEach(btn => {
                if (btn.dataset.tab === tabName) {
                    btn.classList.remove('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
                    btn.classList.add('bg-green-600', 'text-white');
                } else {
                    btn.classList.add('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
                    btn.classList.remove('bg-green-600', 'text-white');
                }
            });
        }
    </script>
    @endpush
</x-app-layout>
