<x-app-layout>

<x-module-hero
    title="Training Session: {{ $session->session_name }}"
    description="{{ $session->trainingPackage->name ?? '' }}"
    icon="fa-calendar">

    <x-slot name="backButton">
        <a href="{{ route('training.sessions.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 Sessions
        </a>
    </x-slot>

    <x-slot name="tabs">
        @can('view training packages')
            <a href="{{ route('training.packages.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.packages.index') ? '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-box text-sm"></i> Packages
            </a>
        @endcan
        @can('view training sessions')
            <a href="{{ route('training.sessions.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.sessions.index') ? '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> Sessions
            </a>
            <a href="{{ route('training.sessions.calendar') }}"
               class="module-hero-tab {{ request()->routeIs('training.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-week text-sm"></i> Calendar
            </a>
        @endcan
        @can('view training registrations')
            <a href="{{ route('training.registrations.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.registrations.index') ? '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-users text-sm"></i> Registrations
            </a>
            <a href="{{ route('training.registrations.pending') }}"
               class="module-hero-tab {{ request()->routeIs('training.registrations.pending') ? '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-clock text-sm"></i> Pending
            </a>
        @endcan
        @can('view training certificates')
            <a href="{{ route('training.certificates.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.certificates.index') ? '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('view training reports')
            <a href="{{ route('training.reports.index') }}"
               class="module-hero-tab {{ request()->routeIs('training.reports.*') ? '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-chart-bar text-sm"></i> Reports
            </a>
        @endcan
    </x-slot>

    <x-slot name="actions">
        @can('edit training sessions')
            <a href="{{ route('training.sessions.edit', $session) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-medium rounded-lg hover:bg-[#334155] transition">
                <i class="fas fa-edit"></i> Edit
            </a>
        @endcan
    </x-slot>

</x-module-hero>

<div class="p-6">

    {{-- Flash Messages --}}
    @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

    {{-- Stats Row --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-lg font-bold text-gray-800">{{ $session->session_date->format('M d, Y') }}</div>
            <div class="text-xs text-gray-500 mt-1">Date</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-lg font-bold text-gray-800">{{ \Carbon\Carbon::parse($session->start_time)->format('g:i A') }}</div>
            <div class="text-xs text-gray-500 mt-1">Start Time</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-lg font-bold text-gray-800">{{ ucfirst(str_replace('_', ' ', $session->session_type)) }}</div>
            <div class="text-xs text-gray-500 mt-1">Type</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-lg font-bold text-gray-800">{{ $registrations->count() }}</div>
            <div class="text-xs text-gray-500 mt-1">Registered</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Main Content --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Session Information --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-200 flex items-center gap-2">
                    <i class="fas fa-info-circle text-green-600"></i>
                    <h3 class="font-semibold text-gray-800">Session Information</h3>
                    @php
                        $statusColors = ['scheduled' => 'bg-blue-100 text-blue-800', 'ongoing' => 'bg-green-100 text-green-800', 'completed' => 'bg-gray-100 text-gray-800', 'cancelled' => 'bg-red-100 text-red-800', 'postponed' => 'bg-yellow-100 text-yellow-800'];
                    @endphp
                    <span class="ml-auto px-2 py-1 rounded-full text-xs font-medium {{ $statusColors[$session->status] ?? 'bg-gray-100 text-gray-800' }}">
                        {{ ucfirst($session->status) }}
                    </span>
                </div>
                <div class="p-5 space-y-4">
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-calendar text-green-600 w-4"></i>
                            <span class="text-gray-500">Date:</span>
                            <span class="font-medium text-gray-900">{{ $session->session_date->format('l, F j, Y') }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="fas fa-clock text-green-600 w-4"></i>
                            <span class="text-gray-500">Time:</span>
                            <span class="font-medium text-gray-900">
                                {{ \Carbon\Carbon::parse($session->start_time)->format('g:i A') }} – {{ \Carbon\Carbon::parse($session->end_time)->format('g:i A') }}
                            </span>
                        </div>
                    </div>

                    {{-- Session Type --}}
                    @php
                        $typeColors = ['in_person' => 'bg-blue-100 text-blue-800', 'online' => 'bg-purple-100 text-purple-800', 'hybrid' => 'bg-gray-100 text-gray-800'];
                    @endphp
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium {{ $typeColors[$session->session_type] ?? 'bg-gray-100 text-gray-800' }}">
                        @if($session->session_type === 'in_person')
                            <i class="fas fa-users"></i> In-Person Session
                        @elseif($session->session_type === 'online')
                            <i class="fas fa-video"></i> Online Session
                        @else
                            <i class="fas fa-globe"></i> Hybrid Session
                        @endif
                    </span>

                    {{-- Venue --}}
                    @if($session->session_type !== 'online' && ($session->venue_name || $session->venue_address))
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h4 class="font-semibold text-gray-800 text-sm mb-2">Venue</h4>
                            @if($session->venue_name)
                                <div class="flex items-center gap-2 text-sm">
                                    <i class="fas fa-map-marker-alt text-green-600"></i>
                                    <span class="font-medium">{{ $session->venue_name }}</span>
                                </div>
                            @endif
                            @if($session->venue_address)
                                <div class="text-sm text-gray-600 ml-6">{{ $session->venue_address }}</div>
                            @endif
                        </div>
                    @endif

                    {{-- Online Meeting Details --}}
                    @if($session->session_type !== 'in_person' && $session->meeting_link)
                        <div class="bg-purple-50 rounded-lg p-4">
                            <h4 class="font-semibold text-gray-800 text-sm mb-2">Online Meeting Details</h4>
                            @if($session->meeting_provider)
                                <div class="flex items-center gap-2 text-sm mb-2">
                                    <i class="fas fa-video text-purple-600"></i>
                                    <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $session->meeting_provider)) }}</span>
                                </div>
                            @endif
                            <a href="{{ $session->meeting_link }}" target="_blank"
                               class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 transition">
                                <i class="fas fa-link"></i> Join Meeting
                            </a>
                            @if($session->meeting_id)
                                <div class="text-sm text-gray-600 mt-2">
                                    <span class="font-medium">Meeting ID:</span> {{ $session->meeting_id }}
                                </div>
                            @endif
                        </div>
                    @endif

                    @if($session->description)
                        <div>
                            <h4 class="font-semibold text-gray-800 text-sm mb-2">Description</h4>
                            <p class="text-gray-700 text-sm">{{ $session->description }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Trainers --}}
            @if($session->trainers->count() > 0)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 flex items-center gap-2">
                        <i class="fas fa-user-tie text-green-600"></i>
                        <h3 class="font-semibold text-gray-800">Trainers / Facilitators</h3>
                    </div>
                    <div class="p-5">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            @foreach($session->trainers as $trainer)
                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                        <i class="fas fa-user text-green-600"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium text-gray-900 text-sm">{{ $trainer->name }}</div>
                                        @if($trainer->email)
                                            <div class="text-xs text-gray-500">{{ $trainer->email }}</div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            {{-- Registered Participants --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-200 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-users text-green-600"></i>
                        <h3 class="font-semibold text-gray-800">Registered Participants</h3>
                    </div>
                    @can('view training registrations')
                        <a href="{{ route('training.registrations.index', ['session' => $session->id]) }}"
                           class="text-xs text-green-600 hover:text-green-700 font-medium">View All</a>
                    @endcan
                </div>
                <div class="p-5">
                    @if($registrations->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="w-full table-zebra text-sm">
                                <thead>
                                    <tr>
                                        <th class="th-col-1 px-3 py-2 text-left">Name</th>
                                        <th class="th-col-2 px-3 py-2 text-left">Email</th>
                                        <th class="th-col-3 px-3 py-2 text-left">Status</th>
                                        <th class="th-col-4 px-3 py-2 text-center">Attended</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($registrations->take(10) as $registration)
                                        <tr>
                                            <td class="px-3 py-2 text-gray-900">{{ $registration->user->name }}</td>
                                            <td class="px-3 py-2 text-gray-500">{{ $registration->user->email }}</td>
                                            <td class="px-3 py-2">
                                                @php
                                                    $regStatusColors = ['pending' => 'bg-yellow-100 text-yellow-800', 'approved' => 'bg-green-100 text-green-800', 'completed' => 'bg-blue-100 text-blue-800', 'rejected' => 'bg-red-100 text-red-800'];
                                                @endphp
                                                <span class="px-2 py-0.5 rounded-full text-xs {{ $regStatusColors[$registration->status] ?? 'bg-gray-100 text-gray-800' }}">
                                                    {{ ucfirst($registration->status) }}
                                                </span>
                                            </td>
                                            <td class="px-3 py-2 text-center">
                                                @php
                                                    $attended = $session->attendances->where('user_id', $registration->user_id)->where('attendance_status', 'present')->first();
                                                @endphp
                                                @if($attended)
                                                    <i class="fas fa-check-circle text-green-600"></i>
                                                @else
                                                    <i class="fas fa-minus-circle text-gray-300"></i>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-user-slash text-3xl mb-3 text-gray-300 block"></i>
                            No participants registered yet.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            {{-- Quick Actions --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-200">
                    <h3 class="font-semibold text-gray-800 text-sm">Quick Actions</h3>
                </div>
                <div class="p-4 space-y-2">
                    @can('edit training sessions')
                        @if($session->status === 'scheduled')
                            <form action="{{ route('training.sessions.start', $session) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 transition text-left">
                                    <i class="fas fa-play-circle mr-2"></i> Start Session
                                </button>
                            </form>
                        @elseif($session->status === 'ongoing')
                            <form action="{{ route('training.sessions.complete', $session) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition text-left">
                                    <i class="fas fa-check-circle mr-2"></i> Complete Session
                                </button>
                            </form>
                        @endif
                    @endcan

                    @can('manage training attendance')
                        <a href="{{ route('training.sessions.attendance', $session) }}"
                           class="block px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 transition">
                            <i class="fas fa-clipboard-check mr-2"></i> Take Attendance
                        </a>
                    @endcan

                    @can('edit training sessions')
                        <a href="{{ route('training.sessions.edit', $session) }}"
                           class="block px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50 transition">
                            <i class="fas fa-edit mr-2"></i> Edit Session
                        </a>
                    @endcan

                    @can('delete training sessions')
                        <form action="{{ route('training.sessions.destroy', $session) }}" method="POST"
                              onsubmit="return confirm('Delete this session?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="w-full px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200 transition text-left">
                                <i class="fas fa-trash mr-2"></i> Delete Session
                            </button>
                        </form>
                    @endcan
                </div>
            </div>

            {{-- Session Info --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-200">
                    <h3 class="font-semibold text-gray-800 text-sm">Session Information</h3>
                </div>
                <div class="p-4 space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Package</span>
                        <span class="text-gray-800">
                            @if($session->trainingPackage)
                                <a href="{{ route('training.packages.show', $session->trainingPackage) }}" class="text-green-600 hover:underline">
                                    {{ $session->trainingPackage->name }}
                                </a>
                            @else N/A @endif
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Created By</span>
                        <span class="text-gray-800">{{ $session->creator->name ?? 'System' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Created</span>
                        <span class="text-gray-800">{{ $session->created_at->format('M d, Y') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Last Updated</span>
                        <span class="text-gray-800">{{ $session->updated_at->diffForHumans() }}</span>
                    </div>
                    @if($session->max_participants)
                        <div class="flex justify-between">
                            <span class="text-gray-500">Max Participants</span>
                            <span class="text-gray-800">{{ $session->max_participants }}</span>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Attendance Summary --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-200">
                    <h3 class="font-semibold text-gray-800 text-sm">Attendance Summary</h3>
                </div>
                <div class="p-4">
                    <div class="text-center mb-4">
                        <div class="relative inline-flex items-center justify-center">
                            <svg class="w-20 h-20 transform -rotate-90">
                                <circle cx="40" cy="40" r="32" stroke="#e5e7eb" stroke-width="6" fill="none"/>
                                <circle cx="40" cy="40" r="32" stroke="#10b981" stroke-width="6" fill="none"
                                        stroke-dasharray="201"
                                        stroke-dashoffset="{{ 201 - (201 * ($attendanceRate ?? 0) / 100) }}"
                                        stroke-linecap="round"/>
                            </svg>
                            <span class="absolute text-lg font-bold text-gray-800">{{ $attendanceRate ?? 0 }}%</span>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3 text-center text-sm">
                        <div>
                            <div class="text-xl font-bold text-green-600">{{ $attended ?? 0 }}</div>
                            <div class="text-gray-500 text-xs">Attended</div>
                        </div>
                        <div>
                            <div class="text-xl font-bold text-gray-400">{{ $absent ?? 0 }}</div>
                            <div class="text-gray-500 text-xs">Absent</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</x-app-layout>
