@extends('layouts.site')

@section('meta')
    <meta name="description" content="{{ $package->name }} - Training Program. {{ Str::limit($package->description, 150) }}">
    <meta name="keywords" content="training, {{ $package->name }}, capacity building, professional development">
@endsection

@section('styles')
<style>
    .training-hero {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        position: relative;
        overflow: hidden;
    }
    .training-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('{{ asset('images/training-pattern.png') }}') repeat;
        opacity: 0.1;
    }
</style>
@endsection

@section('content')
{{-- Hero Section --}}
<section class="training-hero text-white py-16 relative">
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-4xl">
            {{-- Breadcrumb --}}
            <nav class="mb-6 text-sm text-green-200">
                <a href="{{ route('public.training.index') }}" class="hover:text-white transition">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Programs
                </a>
            </nav>

            <div class="flex items-start gap-6">
                @if($package->featured_image)
                    <img src="{{ $package->featured_image }}" 
                         alt="{{ $package->name }}"
                         class="w-24 h-24 object-cover rounded-xl shadow-lg">
                @else
                    <div class="w-24 h-24 bg-white bg-opacity-20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-book-open text-white text-3xl"></i>
                    </div>
                @endif
                <div>
                    @if($package->category)
                        <span class="inline-block px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm mb-3">
                            {{ $package->category->name }}
                        </span>
                    @endif
                    <h1 class="text-3xl md:text-4xl font-bold mb-3">{{ $package->name }}</h1>
                    <p class="text-green-100 text-lg">{{ Str::limit($package->description, 200) }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Breadcrumb --}}
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('public.training.index') }}" class="hover:text-green-600 transition">Training Programs</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">{{ $package->name }}</span>
        </nav>
    </div>
</div>

{{-- Program Details --}}
<section class="py-12 bg-white">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {{-- Main Content --}}
            <div class="lg:col-span-2">
                {{-- About Section --}}
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">
                        <i class="fas fa-info-circle text-green-600 mr-2"></i>
                        About This Program
                    </h2>
                    <div class="prose max-w-none text-gray-600">
                        {!! nl2br(e($package->description)) !!}
                    </div>
                </div>

                {{-- Learning Objectives --}}
                @if($package->objectives)
                    <div class="mb-8">
                        <h2 class="text-2xl font-bold text-gray-800 mb-4">
                            <i class="fas fa-bullseye text-green-600 mr-2"></i>
                            Learning Objectives
                        </h2>
                        <div class="prose max-w-none text-gray-600">
                            {!! nl2br(e($package->objectives)) !!}
                        </div>
                    </div>
                @endif

                {{-- Sessions Schedule --}}
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">
                        <i class="fas fa-calendar-alt text-green-600 mr-2"></i>
                        Training Schedule
                    </h2>
                    @if($package->sessions->count() > 0)
                        <div class="bg-gray-50 rounded-xl overflow-hidden">
                            <table class="w-full">
                                <thead class="bg-green-600 text-white">
                                    <tr>
                                        <th class="px-6 py-3 text-left">Session</th>
                                        <th class="px-6 py-3 text-left">Date</th>
                                        <th class="px-6 py-3 text-left">Time</th>
                                        <th class="px-6 py-3 text-left">Venue</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    @foreach($package->sessions as $session)
                                        <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                            <td class="px-6 py-4 text-gray-800">{{ $session->session_name }}</td>
                                            <td class="px-6 py-4 text-gray-600">{{ $session->session_date->format('M d, Y') }}</td>
                                            <td class="px-6 py-4 text-gray-600">
                                                {{ \Carbon\Carbon::parse($session->start_time)->format('g:i A') }} - 
                                                {{ \Carbon\Carbon::parse($session->end_time)->format('g:i A') }}
                                            </td>
                                            <td class="px-6 py-4">
                                                @if($session->session_type === 'online')
                                                    <span class="text-blue-600"><i class="fas fa-video mr-1"></i>Online</span>
                                                @elseif($session->venue_name)
                                                    <span class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i>{{ $session->venue_name }}</span>
                                                @else
                                                    <span class="text-gray-400">TBD</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="bg-gray-50 rounded-xl p-8 text-center">
                            <i class="fas fa-calendar-times text-4xl text-gray-300 mb-4"></i>
                            <p class="text-gray-500">Schedule will be announced soon.</p>
                        </div>
                    @endif
                </div>

                {{-- Certificate Info --}}
                @if($package->generates_certificate)
                    <div class="bg-green-50 border border-green-200 rounded-xl p-6 mb-8">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-certificate text-white text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-green-800 mb-2">Certificate Included</h3>
                                <p class="text-green-700 text-sm">
                                    Upon successful completion of this training, you will receive a certificate 
                                    that can be verified online. Certificate format: {{ ucfirst($package->certificate_format) }}.
                                </p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Sidebar --}}
            <div class="lg:col-span-1">
                {{-- Registration Card --}}
                <div class="bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden sticky top-4">
                    {{-- Price Header --}}
                    <div class="bg-green-600 text-white p-6 text-center">
                        @if($package->is_free)
                            <p class="text-green-200 text-sm">This program is</p>
                            <p class="text-4xl font-bold">FREE</p>
                        @else
                            <p class="text-green-200 text-sm">Program Fee</p>
                            <p class="text-4xl font-bold">{{ number_format($package->fee_amount, 0) }} UGX</p>
                        @endif
                    </div>

                    {{-- Details --}}
                    <div class="p-6 space-y-4">
                        {{-- Duration --}}
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-clock text-gray-600"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Duration</p>
                                <p class="font-medium text-gray-800">{{ $package->duration_hours }} hours</p>
                            </div>
                        </div>

                        {{-- Capacity --}}
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-users text-gray-600"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Capacity</p>
                                <p class="font-medium text-gray-800">
                                    {{ $package->registrations_count }} / {{ $package->capacity }} enrolled
                                </p>
                            </div>
                        </div>

                        {{-- Spots Left --}}
                        @php
                            $spotsLeft = $package->capacity - $package->registrations_count;
                        @endphp
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-chair text-gray-600"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Availability</p>
                                <p class="font-medium {{ $spotsLeft <= 5 ? 'text-red-600' : 'text-green-600' }}">
                                    {{ $spotsLeft }} spots remaining
                                </p>
                            </div>
                        </div>

                        {{-- Format --}}
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-desktop text-gray-600"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500">Format</p>
                                <p class="font-medium text-gray-800">
                                    @if($package->sessions->where('session_type', 'online')->count() > 0 && $package->sessions->where('session_type', 'in_person')->count() > 0)
                                        Hybrid (Online & In-person)
                                    @elseif($package->sessions->where('session_type', 'online')->count() > 0)
                                        Online
                                    @else
                                        In-person
                                    @endif
                                </p>
                            </div>
                        </div>

                        {{-- Apply Button --}}
                        <div class="pt-4 border-t">
                            @if($spotsLeft > 0)
                                <a href="{{ route('public.training.apply', $package) }}" 
                                   class="block w-full text-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                                    <i class="fas fa-user-plus mr-2"></i>
                                    Apply Now
                                </a>
                            @else
                                <button disabled 
                                        class="block w-full text-center px-6 py-3 bg-gray-300 text-gray-500 rounded-lg cursor-not-allowed">
                                    <i class="fas fa-ban mr-2"></i>
                                    Fully Booked
                                </button>
                            @endif
                        </div>

                        {{-- Questions --}}
                        <div class="text-center text-sm text-gray-500 pt-4">
                            <p>Have questions?</p>
                            <a href="mailto:training@example.com" class="text-green-600 hover:underline">
                                Contact us
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
