<x-app-layout>

<x-module-hero
    title="Training Package: {{ $package->name }}"
    description="{{ $package->category->name ?? 'Training Package' }} &bull; {{ $package->getFormattedDuration() }}"
    icon="fa-box">

    <x-slot name="backButton">
        <a href="{{ route('training.packages.index') }}" class="inline-flex items-center gap-2 text-[#475569] hover:text-[#1e293b] text-sm transition"><i class="fas fa-arrow-left"></i> Back to Packages</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-calendar-alt 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 packages')
            <a href="{{ route('training.packages.edit', $package) }}"
               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
        @can('create training sessions')
            <a href="{{ route('training.sessions.create', ['package' => $package->id]) }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-[#1e293b] text-[#1e293b] text-sm font-semibold rounded-lg hover:bg-[#f1f5f9] transition">
                <i class="fas fa-calendar-plus"></i> Add Session
            </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-2xl font-bold text-gray-800">{{ $package->registrations_count }}</div>
            <div class="text-xs text-gray-500 mt-1">Enrolled</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-gray-800">{{ $package->capacity }}</div>
            <div class="text-xs text-gray-500 mt-1">Capacity</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-gray-800">{{ $package->sessions->count() }}</div>
            <div class="text-xs text-gray-500 mt-1">Sessions</div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-gray-800">
                @if($package->is_free) Free @else {{ $package->getFormattedFee() }} @endif
            </div>
            <div class="text-xs text-gray-500 mt-1">Fee</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">
            {{-- Package Details --}}
            <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">Package Details</h3>
                    @php
                        $statusColors = ['active' => 'bg-green-100 text-green-800', 'draft' => 'bg-yellow-100 text-yellow-800', 'inactive' => 'bg-red-100 text-red-800', 'archived' => 'bg-gray-100 text-gray-800'];
                    @endphp
                    <span class="ml-auto px-2 py-1 rounded-full text-xs font-medium {{ $statusColors[$package->status] ?? 'bg-gray-100 text-gray-800' }}">
                        {{ ucfirst($package->status) }}
                    </span>
                </div>
                <div class="p-5">
                    @if($package->featured_image)
                        <img src="{{ $package->featured_image }}" alt="{{ $package->name }}"
                             class="w-full h-40 object-cover rounded-lg mb-4">
                    @endif
                    @if($package->description)
                        <p class="text-gray-700 text-sm mb-4">{{ $package->description }}</p>
                    @endif
                    @if($package->learning_objectives)
                        <div class="mb-4">
                            <h4 class="font-semibold text-gray-800 text-sm mb-2">Learning Objectives</h4>
                            <ul class="space-y-1">
                                @foreach(explode("\n", $package->learning_objectives) as $objective)
                                    @if(trim($objective))
                                        <li class="flex items-start gap-2 text-sm text-gray-700">
                                            <i class="fas fa-check-circle text-green-600 mt-0.5 flex-shrink-0"></i>
                                            {{ trim($objective) }}
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @if($package->tags && count($package->tags) > 0)
                        <div class="flex flex-wrap gap-2">
                            @foreach($package->tags as $tag)
                                <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">{{ $tag }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- Training Sessions --}}
            <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-calendar-alt text-green-600"></i>
                        <h3 class="font-semibold text-gray-800">Training Sessions</h3>
                    </div>
                    @can('create training sessions')
                        <a href="{{ route('training.sessions.create', ['package' => $package->id]) }}"
                           class="text-xs text-green-600 hover:text-green-700 font-medium">
                            <i class="fas fa-plus mr-1"></i> Add Session
                        </a>
                    @endcan
                </div>
                <div class="p-5">
                    @if($package->sessions->count() > 0)
                        <div class="space-y-3">
                            @foreach($package->sessions as $session)
                                <div class="border border-gray-200 rounded-lg p-4 hover:shadow-sm transition">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-gray-900 text-sm">{{ $session->session_name }}</h4>
                                            <div class="mt-1 space-y-1 text-xs text-gray-500">
                                                <div><i class="fas fa-calendar mr-1 text-green-600"></i>{{ $session->session_date->format('F j, Y') }}</div>
                                                <div><i class="fas fa-clock mr-1 text-green-600"></i>{{ \Carbon\Carbon::parse($session->start_time)->format('g:i A') }} - {{ \Carbon\Carbon::parse($session->end_time)->format('g:i A') }}</div>
                                                <div>
                                                    @if($session->session_type === 'online')
                                                        <i class="fas fa-video mr-1 text-blue-600"></i>Online
                                                    @elseif($session->session_type === 'hybrid')
                                                        <i class="fas fa-globe mr-1 text-purple-600"></i>Hybrid
                                                    @else
                                                        <i class="fas fa-map-marker-alt mr-1 text-green-600"></i>{{ $session->venue_name ?? 'Venue TBD' }}
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            @php
                                                $sessionStatusColors = ['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="px-2 py-1 rounded-full text-xs {{ $sessionStatusColors[$session->status] ?? 'bg-gray-100 text-gray-800' }}">
                                                {{ ucfirst($session->status) }}
                                            </span>
                                            @can('view training sessions')
                                                <div class="mt-2">
                                                    <a href="{{ route('training.sessions.show', $session) }}"
                                                       class="text-xs text-green-600 hover:text-green-700">
                                                        View <i class="fas fa-arrow-right ml-1"></i>
                                                    </a>
                                                </div>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            <i class="fas fa-calendar-times text-3xl mb-3 text-gray-300 block"></i>
                            No sessions scheduled 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 packages')
                        @if($package->status === 'draft')
                            <form action="{{ route('training.packages.activate', $package) }}" 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-check-circle mr-2"></i> Activate Package
                                </button>
                            </form>
                        @elseif($package->status === 'active')
                            <form action="{{ route('training.packages.deactivate', $package) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg text-sm hover:bg-yellow-600 transition text-left">
                                    <i class="fas fa-pause-circle mr-2"></i> Deactivate Package
                                </button>
                            </form>
                        @endif
                        <a href="{{ route('training.packages.edit', $package) }}"
                           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 Package
                        </a>
                    @endcan
                    @can('view training reports')
                        <a href="{{ route('training.reports.registrations', ['package' => $package->id]) }}"
                           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-chart-bar mr-2"></i> View Report
                        </a>
                    @endcan
                </div>
            </div>

            {{-- Package 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">Package Information</h3>
                </div>
                <div class="p-4 space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Created By</span>
                        <span class="text-gray-800">{{ $package->creator->name ?? 'System' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Created</span>
                        <span class="text-gray-800">{{ $package->created_at->format('M d, Y') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Updated</span>
                        <span class="text-gray-800">{{ $package->updated_at->diffForHumans() }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Certificate</span>
                        <span class="text-gray-800">
                            @if($package->generates_certificate)
                                <i class="fas fa-check-circle text-green-600 mr-1"></i>{{ ucfirst($package->certificate_format) }}
                            @else
                                <i class="fas fa-times-circle text-red-600 mr-1"></i>Not Issued
                            @endif
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Approval Required</span>
                        <span class="text-gray-800">{{ $package->requires_approval ? 'Yes' : 'No' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Public</span>
                        <span class="text-gray-800">{{ $package->is_public ? 'Yes' : 'No' }}</span>
                    </div>
                </div>
            </div>

            {{-- Recent Enrollments --}}
            <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">Recent Enrollments</h3>
                </div>
                <div class="p-4">
                    @if($registrations->count() > 0)
                        <div class="space-y-3">
                            @foreach($registrations->take(5) as $registration)
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <div class="w-7 h-7 bg-green-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-user text-green-600 text-xs"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm font-medium text-gray-800">{{ $registration->user->name }}</div>
                                            <div class="text-xs text-gray-500">{{ $registration->registration_date->diffForHumans() }}</div>
                                        </div>
                                    </div>
                                    @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>
                                </div>
                            @endforeach
                        </div>
                        @can('view training registrations')
                            <div class="mt-3 text-center">
                                <a href="{{ route('training.registrations.index', ['package' => $package->id]) }}"
                                   class="text-xs text-green-600 hover:text-green-700">
                                    View All <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        @endcan
                    @else
                        <p class="text-center text-sm text-gray-500 py-4">No enrollments yet</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

</x-app-layout>
