@extends('layouts.marketing')

@section('title', $class->name . ' - ' . __('app.pilates'))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 w-full">
<!-- Back Button -->
<div class="mb-6">
    <a href="{{ route('pilates.classes') }}" class="inline-flex items-center text-primary hover:text-primary-dark font-semibold">
        <i class="fas fa-arrow-left mr-2"></i>
        {{ __('app.back_to_classes') }}
    </a>
</div>

<!-- Class Header -->
<div class="mb-8 gradient-primary rounded-3xl shadow-2xl overflow-hidden">
    <div class="p-8 md:p-12 text-white">
        <div class="flex flex-wrap items-center gap-3 mb-4">
            <span class="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
                {{ $class->date->translatedFormat('l, d M Y') }}
            </span>
            <span class="px-4 py-2 rounded-full text-sm font-medium
                @if($class->level === 'beginner') bg-green-500
                @elseif($class->level === 'intermediate') bg-yellow-500
                @else bg-red-500 @endif">
                {{ ucfirst($class->level) }}
            </span>
            @if($class->hasAvailableSpots())
                <span class="px-4 py-2 bg-green-500 rounded-full text-sm font-medium">
                    <i class="fas fa-check-circle mr-1"></i>{{ __('app.spots_available') }}
                </span>
            @else
                <span class="px-4 py-2 bg-red-500 rounded-full text-sm font-medium">
                    <i class="fas fa-times-circle mr-1"></i>{{ __('app.fully_booked') }}
                </span>
            @endif
        </div>
        
        <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ $class->name }}</h1>
        
        <div class="flex flex-wrap gap-6 text-light">
            <div class="flex items-center">
                <i class="fas fa-clock text-2xl mr-3"></i>
                <span class="text-lg">{{ \Carbon\Carbon::parse($class->start_time)->translatedFormat('H:i') }} – {{ \Carbon\Carbon::parse($class->end_time)->translatedFormat('H:i') }}</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-user text-2xl mr-3"></i>
                <span class="text-lg">{{ $class->instructor->name }}</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-users text-2xl mr-3"></i>
                <span class="text-lg">{{ $class->current_participants }}/{{ $class->max_participants }}</span>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Content -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Description -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
                <div class="w-10 h-10 bg-light rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-info-circle text-primary"></i>
                </div>
                {{ __('app.description') }}
            </h2>
            <p class="text-gray-700 leading-relaxed">{{ $class->description }}</p>
        </div>

        <!-- Class Details -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                <div class="w-10 h-10 bg-light rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-list text-primary"></i>
                </div>
                {{ __('app.class_details') }}
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-calendar text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">{{ __('app.date') }}</div>
                        <div class="font-semibold text-gray-900">{{ $class->date->translatedFormat('l, d M Y') }}</div>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-clock text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">{{ __('app.time') }}</div>
                        <div class="font-semibold text-gray-900">{{ \Carbon\Carbon::parse($class->start_time)->translatedFormat('H:i') }} – {{ \Carbon\Carbon::parse($class->end_time)->translatedFormat('H:i') }}</div>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-user text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">{{ __('app.instructor') }}</div>
                        <div class="font-semibold text-gray-900">{{ $class->instructor->name }}</div>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-signal text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">{{ __('app.level') }}</div>
                        <div class="font-semibold text-gray-900 capitalize">{{ $class->level }}</div>
                    </div>
                </div>
                
                @php $rv = \App\Support\Ajr3StudioSettings::canonicalStudioRoomId($class->room ?? null); $rmap = \App\Support\Ajr3StudioSettings::studioRoomLabelMap(); @endphp
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-door-open text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">{{ __('app.class_room') }}</div>
                        <div class="font-semibold text-gray-900">{{ $rmap[$rv] ?? $rv }}</div>
                    </div>
                </div>
                @if($class->location)
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-map-marker-alt text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">{{ __('app.location') }}</div>
                        <div class="font-semibold text-gray-900">{{ $class->location }}</div>
                    </div>
                </div>
                @endif
                
                @if($class->equipment_needed)
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-light rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                        <i class="fas fa-dumbbell text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 mb-1">{{ __('app.equipment') }}</div>
                        <div class="font-semibold text-gray-900">{{ $class->equipment_needed }}</div>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Availability -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                <div class="w-10 h-10 bg-light rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-users text-primary"></i>
                </div>
                {{ __('app.availability') }}
            </h2>
            
            <div class="flex justify-between text-lg text-gray-700 mb-4">
                <span>{{ __('app.participants') }}</span>
                <span class="font-bold">{{ $class->current_participants }}/{{ $class->max_participants }}</span>
            </div>
            
            <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
                <div class="gradient-primary h-4 rounded-full transition-all" 
                     style="width: {{ ($class->current_participants / $class->max_participants) * 100 }}%"></div>
            </div>
            
            <div class="text-center text-gray-600">
                <span class="text-2xl font-bold text-primary">{{ $class->max_participants - $class->current_participants }}</span>
                {{ __('app.spots_remaining') }}
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="lg:col-span-1 space-y-6">
        <!-- Booking Card -->
        <div class="bg-white rounded-2xl shadow-lg p-8 sticky top-6">
            <div class="text-center mb-6">
                <div class="text-sm text-gray-500 mb-2">{{ __('app.class_price') }}</div>
                <div class="text-4xl font-bold text-primary mb-2">
                    {{ number_format($class->price, 0) }}
                    <span class="text-2xl text-gray-600">{{ __('app.currency') }}</span>
                </div>
            </div>
            
            @php
                $userBooking = auth()->user()->pilatesBookings()
                    ->where('pilates_class_id', $class->id)
                    ->first();
            @endphp
            
            @if($userBooking)
                <div class="text-center">
                    <div class="px-6 py-4 bg-accent text-white rounded-full font-bold text-lg mb-4">
                        <i class="fas fa-check-circle mr-2"></i>
                        {{ __('app.already_booked') }}
                    </div>
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-info-circle mr-1"></i>
                        {{ __('app.booking_confirmed', ['date' => $class->date->format('M j, Y'), 'time' => $class->start_time->format('H:i')]) }}
                    </p>
                    <a href="{{ route('pilates.bookings') }}" class="btn btn-outline-primary mt-4">
                        <i class="fas fa-calendar-check mr-2"></i>
                        {{ __('app.view_my_bookings') }}
                    </a>
                </div>
            @elseif($class->hasAvailableSpots())
                <form method="POST" action="{{ route('pilates.classes.book', $class) }}" onsubmit="return confirm(@json(__('app.confirm_book_class_prompt')));">
                    @csrf
                    <button type="submit" class="w-full px-6 py-4 gradient-primary text-white rounded-full font-bold text-lg hover:shadow-lg transform hover:scale-105 transition-all mb-4">
                        <i class="fas fa-check mr-2"></i>
                        {{ __('app.book_this_class') }}
                    </button>
                </form>
                
                <p class="text-center text-sm text-gray-600">
                    <i class="fas fa-info-circle mr-1"></i>
                    {{ __('app.instant_confirmation') }}
                </p>
            @else
                <div class="text-center">
                    <div class="px-6 py-4 bg-gray-400 text-white rounded-full font-bold text-lg mb-4 cursor-not-allowed">
                        <i class="fas fa-times mr-2"></i>
                        {{ __('app.class_full') }}
                    </div>
                    <p class="text-sm text-gray-600">{{ __('app.check_other_classes') }}</p>
                </div>
            @endif
            
            <div class="mt-6 pt-6 border-t border-gray-200">
                <h3 class="font-bold text-gray-900 mb-3">{{ __('app.why_book_with_us') }}</h3>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                        <span>{{ __('app.expert_instructors') }}</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                        <span>{{ __('app.small_class_sizes') }}</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                        <span>{{ __('app.flexible_cancellation') }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>
@endsection