@extends('layouts.frontend.master')

@section('title', $event->name . ' - Event Details')

@section('content')
    <link rel="stylesheet" href="{{ asset('frontend/css/home.css') }}">
<!-- Hero Section with Banner Image -->
<div class='relative'>
    @if($event->files && $event->files->where('file_type', 1)->first())
        <!-- Hero Section with Side-by-Side Layout -->
        <div class='bg-gradient-to-r from-gray-50 to-gray-100 py-12'>
            <div class='container mx-auto px-4'>
                <div class='max-w-7xl mx-auto'>
                    <div class='grid lg:grid-cols-2 gap-12 items-center'>
                        <!-- Left Side - Event Content -->
                        <div class='text-center lg:text-left space-y-6'>
                            <div class='inline-block bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-semibold uppercase tracking-wide'>
                                {{ ucfirst($event->category) }}
                    </div>
                            <h1 class='text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight'>
                                {{ $event->name }}
                            </h1>
                            <p class='text-lg text-gray-600 max-w-lg mx-auto lg:mx-0'>
                                Join us for an exciting event that brings our community together.
                            </p>
                            <div class='flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4'>
                                @auth
                                    @php
                                        $existingRegistration = \App\Models\EventRegistration::where('user_id', auth()->id())
                                            ->where('event_id', $event->id)
                                            ->first();
                                    @endphp
                                    @if($existingRegistration)
                                        <a href='{{ route('events.registration.show', $existingRegistration->id) }}' class='bg-blue-600 text-white px-12 py-3 rounded-lg font-bold hover:bg-blue-700 transition-all duration-300 inline-flex items-center gap-2 text-base shadow-sm hover:shadow-md transform hover:-translate-y-1'>
                                            <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'></path>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'></path>
                                            </svg>
                                            View Registration
                                            <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7l5 5m0 0l-5 5m5-5H6'></path>
                                            </svg>
                                        </a>
                                    @else
                                        <button type='button' class='bg-green-600 text-white px-12 py-3 rounded-lg font-bold opacity-60 cursor-not-allowed inline-flex items-center gap-2 text-base shadow-sm' disabled>
                            <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6'></path>
                            </svg>
                            Register for Event
                                            <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7l5 5m0 0l-5 5m5-5H6'></path>
                                            </svg>
                                        </button>
                                    @endif
                                @else
                                    <a href='{{ route('login') }}' class='bg-green-600 text-white px-12 py-3 rounded-lg font-bold hover:bg-green-700 transition-all duration-300 inline-flex items-center gap-2 text-base shadow-sm hover:shadow-md transform hover:-translate-y-1'>
                                        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6'></path>
                                        </svg>
                                        Login to Register
                                        <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7l5 5m0 0l-5 5m5-5H6'></path>
                                        </svg>
                                    </a>
                                @endauth
                                <a href='#details' class='bg-white border-2 border-gray-300 text-gray-700 px-12 py-3 rounded-lg font-semibold hover:border-green-600 hover:text-green-600 hover:bg-green-50 transition-all duration-300 inline-flex items-center gap-2 text-base shadow-sm hover:shadow-md transform hover:-translate-y-1'>
                                    <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'></path>
                                    </svg>
                                    Learn More
                                </a>
                            </div>
                        </div>

                        <!-- Right Side - Event Image -->
                        <div class='flex justify-center lg:justify-end'>
                            <div class='relative'>
                                <img src='{{ asset('storage/' . $event->files->where('file_type', 1)->first()->file_path) }}'
                                     alt='{{ $event->name }} Banner'
                                     class='rounded-xl shadow-2xl'
                                     style='max-height: 300px; object-fit: contain;'>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <!-- Fallback section if no image -->
        <div class='bg-gradient-to-r from-gray-50 to-gray-100 py-12'>
            <div class='container mx-auto px-4'>
                <div class='max-w-7xl mx-auto'>
                    <div class='grid lg:grid-cols-2 gap-12 items-center'>
                        <!-- Left Side - Event Content -->
                        <div class='text-center lg:text-left space-y-6'>
                            <div class='inline-block bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-semibold uppercase tracking-wide'>
                                {{ ucfirst($event->category) }}
                    </div>
                            <h1 class='text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight'>
                                {{ $event->name }}
                            </h1>
                            <p class='text-lg text-gray-600 max-w-lg mx-auto lg:mx-0'>
                                Join us for an exciting event that brings our community together.
                            </p>
                            <div class='flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4'>
                                @auth
                                    @php
                                        $existingRegistration = \App\Models\EventRegistration::where('user_id', auth()->id())
                                            ->where('event_id', $event->id)
                                            ->first();
                                    @endphp
                                    @if($existingRegistration)
                                        <a href='{{ route('events.registration.show', $existingRegistration->id) }}' class='bg-blue-600 text-white px-12 py-3 rounded-lg font-bold hover:bg-blue-700 transition-all duration-300 inline-flex items-center gap-2 text-base shadow-sm hover:shadow-md transform hover:-translate-y-1'>
                                            <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'></path>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'></path>
                                            </svg>
                                            View Registration
                                            <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7l5 5m0 0l-5 5m5-5H6'></path>
                                            </svg>
                                        </a>
                                    @else
                                        <button type='button' class='bg-green-600 text-white px-12 py-3 rounded-lg font-bold opacity-60 cursor-not-allowed inline-flex items-center gap-2 text-base shadow-sm' disabled>
                            <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6'></path>
                            </svg>
                            Register for Event
                                            <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7l5 5m0 0l-5 5m5-5H6'></path>
                                            </svg>
                                        </button>
                                    @endif
                                @else
                                    <a href='{{ route('login') }}' class='bg-green-600 text-white px-12 py-3 rounded-lg font-bold hover:bg-green-700 transition-all duration-300 inline-flex items-center gap-2 text-base shadow-sm hover:shadow-md transform hover:-translate-y-1'>
                                        <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6'></path>
                                        </svg>
                                        Login to Register
                                        <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 7l5 5m0 0l-5 5m5-5H6'></path>
                                        </svg>
                                    </a>
                                @endauth
                                <a href='#details' class='bg-white border-2 border-gray-300 text-gray-700 px-12 py-3 rounded-lg font-semibold hover:border-green-600 hover:text-green-600 hover:bg-green-50 transition-all duration-300 inline-flex items-center gap-2 text-base shadow-sm hover:shadow-md transform hover:-translate-y-1'>
                                    <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'></path>
                                    </svg>
                                    Learn More
                                </a>
                            </div>
                        </div>

                        <!-- Right Side - Placeholder -->
                        <div class='flex justify-center lg:justify-end'>
                            <div class='w-full max-w-md h-80 bg-gradient-to-br from-green-100 to-green-200 rounded-xl shadow-2xl flex items-center justify-center'>
                                <div class='text-center text-green-600'>
                                    <svg class='w-24 h-24 mx-auto mb-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
                                    </svg>
                                    <p class='text-lg font-semibold'>Event Image</p>
                                    <p class='text-sm'>Coming Soon</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Event Quick Info Bar -->
<div class='bg-white border-b border-gray-200 py-6 shadow-sm'>
    <div class='container mx-auto px-4'>
        <div class='flex flex-wrap items-center justify-center gap-6 text-gray-700'>
            <div class='flex items-center gap-3 bg-gray-50 px-4 py-2 rounded-full'>
                <div class='w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center'>
                    <svg class='w-4 h-4 text-blue-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'></path>
                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'></path>
                </svg>
                </div>
                <span class='font-semibold text-sm'>{{ $event->venue }}</span>
            </div>
            @if($event->dates && $event->dates->count() > 0)
            <div class='flex items-center gap-3 bg-gray-50 px-4 py-2 rounded-full'>
                <div class='w-8 h-8 bg-green-100 rounded-full flex items-center justify-center'>
                    <svg class='w-4 h-4 text-green-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
                </svg>
                </div>
                <span class='font-semibold text-sm'>{{ $event->dates->first()->date->format('d M Y') }}</span>
            </div>
            @endif
            <div class='flex items-center gap-3 bg-gray-50 px-4 py-2 rounded-full'>
                <div class='w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center'>
                    <svg class='w-4 h-4 text-purple-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 00-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'></path>
                </svg>
                </div>
                <span class='font-semibold text-sm'>{{ ucfirst($event->category) }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class='container mx-auto px-4 py-12'>
    <div class='max-w-7xl mx-auto'>
        <div class='grid lg:grid-cols-3 gap-10'>
            <!-- Left Column - Main Content -->
            <div class='lg:col-span-2 space-y-8'>
                <!-- Event Description -->
                <div id='details' class='bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300'>
                    <div class='flex items-center gap-3 mb-6'>
                        <div class='w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center'>
                            <svg class='w-5 h-5 text-blue-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'></path>
                            </svg>
                        </div>
                        <h2 class='text-2xl font-bold text-gray-900'>About This Event</h2>
                    </div>
                    <div class='prose prose-lg max-w-none text-gray-700 leading-relaxed'>
                        {!! nl2br(e($event->description)) !!}
                    </div>
                </div>

                <!-- Event Dates & Pricing -->
                @if($event->dates && $event->dates->count() > 0)
                <div class='bg-white rounded-lg shadow-sm border border-gray-200 p-5'>
                    <h2 class='text-2xl font-bold text-gray-900 mb-6'>Event Schedule & Pricing</h2>
                    <div class='space-y-6'>
                        @foreach($event->dates as $date)
                        <div class='border border-gray-200 rounded-lg p-6'>
                            <div class='flex flex-wrap items-center justify-between gap-4 mb-4'>
                                <div class='flex items-center gap-4'>
                                    <div class='bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium'>
                                        {{ $date->date->format('l, d M Y') }}
                                    </div>
                                    <div class='text-gray-600'>
                                        {{ \Carbon\Carbon::parse($date->start_time)->format('g:i A') }} - {{ \Carbon\Carbon::parse($date->end_time)->format('g:i A') }}
                                    </div>
                                </div>
                                <div class='text-2xl font-bold text-green-600'>
                                    ৳{{ number_format($date->fee, 0) }}
                                </div>
                            </div>

                            @if($event->is_guest_allowed)
                            <div class='border-t border-gray-200 pt-4'>
                                <h4 class='font-semibold text-gray-900 mb-3'>Guest Pricing</h4>
                                <div class='grid grid-cols-2 md:grid-cols-4 gap-3'>
                                    @if($date->spouse_fee)
                                    <div class='text-sm'>
                                        <span class='text-gray-600'>Spouse:</span>
                                        <span class='font-medium text-green-600'>৳{{ number_format($date->spouse_fee, 0) }}</span>
                                    </div>
                                    @endif
                                    @if($date->children_below_5_fee)
                                    <div class='text-sm'>
                                        <span class='text-gray-600'>Children (Below 5):</span>
                                        <span class='font-medium text-green-600'>৳{{ number_format($date->children_below_5_fee, 0) }}</span>
                                    </div>
                                    @endif
                                    @if($date->children_5_to_12_fee)
                                    <div class='text-sm'>
                                        <span class='text-gray-600'>Children (5-12):</span>
                                        <span class='font-medium text-green-600'>৳{{ number_format($date->children_5_to_12_fee, 0) }}</span>
                                    </div>
                                    @endif
                                    @if($date->children_above_12_fee)
                                    <div class='text-sm'>
                                        <span class='text-gray-600'>Children (Above 12):</span>
                                        <span class='font-medium text-green-600'>৳{{ number_format($date->children_above_12_fee, 0) }}</span>
                                    </div>
                                    @endif
                                    @if($date->driver_fee)
                                    <div class='text-sm'>
                                        <span class='text-gray-600'>Driver:</span>
                                        <span class='font-medium text-green-600'>৳{{ number_format($date->children_below_5_fee, 0) }}</span>
                                    </div>
                                    @endif
                                    @if($date->maid_fee)
                                    <div class='text-sm'>
                                        <span class='text-gray-600'>Maid:</span>
                                        <span class='font-medium text-green-600'>৳{{ number_format($date->maid_fee, 0) }}</span>
                                    </div>
                                    @endif
                                    @if($date->other_guest_fee)
                                    <div class='text-sm'>
                                        <span class='text-gray-600'>Other Guest:</span>
                                        <span class='font-medium text-green-600'>৳{{ number_format($date->other_guest_fee, 0) }}</span>
                                    </div>
                                    @endif
                                </div>
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Event Highlights -->
                @if($event->highlights && count($event->highlights) > 0)
                <div class='bg-white rounded-lg shadow-sm border border-gray-200 p-5'>
                    <h2 class='text-2xl font-bold text-gray-900 mb-4'>Event Highlights</h2>
                    <div class='grid gap-3'>
                        @foreach($event->highlights as $highlight)
                        <div class='flex items-start gap-3'>
                            <div class='w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0'></div>
                            <span class='text-gray-700'>{{ $highlight }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Special Requirements -->
                @if($event->special_requirements)
                <div class='bg-white rounded-lg shadow-sm border border-gray-200 p-5'>
                    <h2 class='text-2xl font-bold text-gray-900 mb-4'>Special Requirements</h2>
                    <div class='text-gray-700'>
                        {!! nl2br(e($event->special_requirements)) !!}
                    </div>
                </div>
                @endif

                <!-- Event Gallery -->
                @if($event->files && $event->files->where('file_type', 1)->count() > 1)
                <div class='bg-white rounded-lg shadow-sm border border-gray-200 p-5'>
                    <h2 class='text-2xl font-bold text-gray-900 mb-6'>Event Gallery</h2>
                    <div class='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
                        @foreach($event->files->where('file_type', 1)->skip(1) as $image)
                        <div class='group relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300'>
                            <img src='{{ asset('storage/' . $image->file_path) }}'
                                 alt='{{ $event->name }} - Image {{ $loop->iteration }}'
                                 class='w-full h-32 md:h-40 object-cover group-hover:scale-105 transition-transform duration-300'>
                            <div class='absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center'>
                                <a href='{{ asset('storage/' . $image->file_path) }}'
                                   target='_blank'
                                   class='opacity-0 group-hover:opacity-100 bg-white text-gray-800 px-3 py-2 rounded-full text-sm font-medium hover:bg-gray-100 transition-all duration-300'>
                                    View Full
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Event Materials (Documents) -->
                @if($event->files && $event->files->where('file_type', 2)->count() > 0)
                <div class='bg-white rounded-lg shadow-sm border border-gray-200 p-5'>
                    <h2 class='text-2xl font-bold text-gray-900 mb-4'>Event Materials</h2>
                    <div class='grid gap-4'>
                        @foreach($event->files->where('file_type', 2) as $file)
                        <div class='flex items-center justify-between p-4 border border-gray-200 rounded-lg'>
                            <div class='flex items-center gap-3'>
                                <svg class='w-8 h-8 text-gray-500' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'></path>
                                </svg>
                                <div>
                                    <p class='font-medium text-gray-900'>{{ basename($file->file_path) }}</p>
                                    <p class='text-sm text-gray-500'>Document</p>
                                </div>
                            </div>
                            <a href='{{ Storage::url($file->file_path) }}' target='_blank' class='bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition duration-300'>
                                Download
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>

            <!-- Right Column - Sidebar -->
            <div class='space-y-6'>
                <!-- Event Info Card -->
                <div class='bg-white rounded-lg shadow-sm border border-gray-200 p-5'>
                    <h3 class='text-lg font-semibold text-gray-900 mb-4'>Event Information</h3>
                    <div class='space-y-3'>
                        <div class='flex items-center gap-3'>
                            <div class='w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center'>
                                <svg class='w-4 h-4 text-blue-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 00-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'></path>
                                </svg>
                            </div>
                            <div>
                                <p class='text-sm text-gray-500'>Category</p>
                                <p class='font-medium text-gray-900'>{{ ucfirst($event->category) }}</p>
                            </div>
                        </div>

                        <div class='flex items-center gap-3'>
                            <div class='w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center'>
                                <svg class='w-4 h-4 text-green-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z'></path>
                                </svg>
                            </div>
                            <div>
                                <p class='text-sm text-gray-500'>Expected Attendees</p>
                                <p class='text-medium text-gray-900'>{{ $event->expected_attendees ?: 'Not specified' }}</p>
                            </div>
                        </div>

                        @if($event->is_guest_allowed)
                        <div class='flex items-center gap-3'>
                            <div class='w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center'>
                                <svg class='w-4 h-4 text-purple-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'></path>
                                </svg>
                            </div>
                            <div>
                                <p class='text-sm text-gray-500'>Guests Allowed</p>
                                <p class='font-medium text-green-600'>Yes</p>
                            </div>
                        </div>
                        @endif

                        @if($event->is_accommodation_available)
                        <div class='flex items-center gap-3'>
                            <div class='w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center'>
                                <svg class='w-4 h-4 text-orange-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z'></path>
                                    <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z'></path>
                                </svg>
                            </div>
                            <div>
                                <p class='text-sm text-gray-500'>Accommodation</p>
                                <p class='font-medium text-green-600'>Available</p>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Registration Card -->
                <div id='register' class='bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl border border-green-200 p-6 shadow-lg hover:shadow-xl transition-all duration-300'>
                    <div class='text-center mb-6'>
                        <div class='w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4'>
                            <svg class='w-8 h-8 text-green-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6'></path>
                            </svg>
                        </div>
                        <h3 class='text-xl font-bold text-gray-900 mb-2'>Ready to Join?</h3>
                        <p class='text-gray-600 text-sm'>Secure your spot at this exciting event. Registration is quick and easy.</p>
                    </div>
                    <button class='w-full bg-green-600 text-white py-4 px-6 rounded-xl font-bold hover:bg-green-700 transition-all duration-300 flex items-center justify-center gap-3 text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1'>
                        <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                            <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6v6m0 0v6m0-6h6m-6 0H6'></path>
                        </svg>
                        Register Now
                    </button>
                    <p class='text-xs text-gray-500 text-center mt-4'>* Registration form will open in a new window</p>
                </div>

                <!-- Contact Info -->
                <div class='bg-white rounded-lg shadow-sm border border-gray-200 p-5'>
                    <h3 class='text-lg font-semibold text-gray-900 mb-4'>Need Help?</h3>
                    <p class='text-gray-600 mb-4'>If you have any questions about this event, please contact us:</p>
                    <div class='space-y-2'>
                        <div class='flex items-center gap-2 text-sm text-gray-600'>
                            <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'></path>
                            </svg>
                            <span>info@example.com</span>
                        </div>
                        <div class='flex items-center gap-2 text-sm text-gray-600'>
                            <svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'></path>
                            </svg>
                            <span>+880 1234-567890</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Back to Events Button -->
<div class='bg-gray-50 py-6'>
    <div class='container mx-auto px-4 text-center'>
        <a href='{{ route('home') }}' class='inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 transition duration-300'>
            <svg class='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18'></path>
            </svg>
            Back to All Events
        </a>
    </div>
</div>

@endsection