@php
$user = auth()->user();
$images = $event->images;
$mainImage = $images->first()->image_path ?? null;
$prices = $event->prices;
$attending = $event->paidOrders()->whereHas('user', function ($q) use ($user) {
$q->whereUserId($user?->user_id);
})->first();
$attendance = $event->paidOrders;
@endphp

<style>
    /* Modern Event Page Styles */
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --dark-bg: #0f172a;
        --card-bg: rgba(255, 255, 255, 0.05);
        --card-border: rgba(255, 255, 255, 0.1);
        --text-primary: #ffffff;
        --text-secondary: #cbd5e1;
        --shadow-color: rgba(0, 0, 0, 0.3);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .modern-event-page {
        min-height: 100vh;
        background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        color: var(--text-primary);
        padding-top: 80px;
    }

    /* Hero Section */
    .event-hero {
        position: relative;
        min-height: 600px;
        display: flex;
        align-items: center;
        overflow: hidden;
        margin-bottom: 60px;
    }

    .event-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--primary-gradient);
        opacity: 0.1;
        z-index: 0;
    }

    .hero-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .hero-text h1 {
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: fadeInUp 0.8s ease-out;
    }

    .hero-text .tagline {
        font-size: 1.25rem;
        color: var(--text-secondary);
        margin-bottom: 30px;
        line-height: 1.6;
        animation: fadeInUp 0.8s ease-out 0.2s backwards;
    }

    .hero-cta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        animation: fadeInUp 0.8s ease-out 0.4s backwards;
    }

    .cta-button {
        padding: 16px 32px;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        border: none;
    }

    .cta-primary {
        background: var(--primary-gradient);
        color: white;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }

    .cta-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
    }

    .cta-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
    }

    .cta-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .hero-image {
        position: relative;
        animation: fadeInRight 0.8s ease-out 0.3s backwards;
    }

    .hero-image img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }

    /* Info Cards */
    .event-info-section {
        max-width: 1200px;
        margin: 0 auto 60px;
        padding: 0 24px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
        margin-bottom: 40px;
    }

    .info-card {
        background: var(--card-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--card-border);
        border-radius: 20px;
        padding: 28px;
        transition: all 0.3s ease;
        animation: fadeInUp 0.6s ease-out backwards;
    }

    .info-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .info-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .info-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .info-card:nth-child(4) {
        animation-delay: 0.4s;
    }

    .info-card:hover {
        transform: translateY(-5px);
        border-color: rgba(102, 126, 234, 0.5);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    }

    .info-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--primary-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        font-size: 24px;
    }

    .info-card-title {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }

    .info-card-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    /* Detail Section */
    .event-details {
        max-width: 1200px;
        margin: 0 auto 60px;
        padding: 0 24px;
    }

    .section-title {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 40px;
        text-align: center;
        background: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .detail-card {
        background: var(--card-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--card-border);
        border-radius: 24px;
        padding: 40px;
        animation: fadeInUp 0.6s ease-out backwards;
    }

    .detail-card h3 {
        font-size: 1.75rem;
        margin-bottom: 20px;
        color: var(--text-primary);
    }

    .detail-card p,
    .detail-card .body-copy {
        color: var(--text-secondary);
        line-height: 1.8;
        font-size: 1rem;
    }

    .detail-card strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    /* Ticket Pricing Section */
    .ticket-section {
        max-width: 1200px;
        margin: 0 auto 60px;
        padding: 0 24px;
    }

    .ticket-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
        margin-top: 40px;
    }

    .ticket-card {
        background: var(--card-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--card-border);
        border-radius: 24px;
        padding: 32px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .ticket-card:hover {
        transform: scale(1.05);
        border-color: rgba(102, 126, 234, 0.6);
        box-shadow: 0 20px 50px rgba(102, 126, 234, 0.3);
    }

    .ticket-name {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

    .ticket-price {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 24px;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Responsive */
    @media (max-width: 968px) {
        .hero-content {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .hero-text h1 {
            font-size: 2.5rem;
        }

        .details-grid {
            grid-template-columns: 1fr;
        }

        .section-title {
            font-size: 2rem;
        }
    }

    @media (max-width: 640px) {
        .hero-text h1 {
            font-size: 2rem;
        }

        .hero-cta {
            flex-direction: column;
        }

        .cta-button {
            width: 100%;
            justify-content: center;
        }
    }
</style>

<div class="modern-event-page">
    <!-- Hero Section -->
    <section class="event-hero">
        <div class="hero-content">
            <div class="hero-text">
                <h1>{{ $event->name }}</h1>
                @if($event->tagline)
                <p class="tagline">{{ $event->tagline }}</p>
                @endif
                <div class="hero-cta">
                    @if(count($prices) > 0 && !$attending)
                    <a href="{{ route('purchase-tickets', ['eventId' => $event->event_id]) }}" class="cta-button cta-primary">
                        🎟️ Buy Tickets
                    </a>
                    @elseif($attending)
                    <a href="{{ route('download-tickets', ['orderId' => $attending->order_id]) }}" class="cta-button cta-primary">
                        📥 Download My Tickets
                    </a>
                    @elseif($event->type->name === 'Online' && $event->event_link)
                    <a href="{{ $event->event_link }}" class="cta-button cta-primary" target="_blank" rel="noopener noreferrer">
                        🔗 Join Online Event
                    </a>
                    @else
                    <a href="{{ route('sign-up') }}" class="cta-button cta-primary">
                        ✨ Register for Free
                    </a>
                    @endif

                    @if($event->user?->id === $user?->user_id)
                    <a href="{{ route('edit-event', ['eventId' => $event->event_id]) }}" class="cta-button cta-secondary">
                        ✏️ Edit Event
                    </a>
                    @endif
                </div>
            </div>
            @if($mainImage)
            <div class="hero-image">
                <img src="/{{ $mainImage }}" alt="{{ $event->name }}">
            </div>
            @endif
        </div>
    </section>

    <!-- Quick Info Cards -->
    <section class="event-info-section">
        <div class="info-grid">
            <div class="info-card">
                <div class="info-card-icon">📅</div>
                <div class="info-card-title">Event Date</div>
                <div class="info-card-value">{{ (new DateTime($event->start_time))->format('M d, Y') }}</div>
            </div>
            <div class="info-card">
                <div class="info-card-icon">🕐</div>
                <div class="info-card-title">Start Time</div>
                <div class="info-card-value">{{ (new DateTime($event->start_time))->format('h:i A') }}</div>
            </div>
            <div class="info-card">
                <div class="info-card-icon">{{ $event->type->name === 'Online' ? '💻' : '📍' }}</div>
                <div class="info-card-title">Event Type</div>
                <div class="info-card-value">{{ $event->type->name }}</div>
            </div>
            <div class="info-card">
                <div class="info-card-icon">👥</div>
                <div class="info-card-title">Attendees</div>
                <div class="info-card-value">
                    @if(count($attendance) > 0)
                    {{ $attendance->sum(fn($order) => $order->orderItems->sum('quantity')) }}
                    @else
                    Be the first!
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Event Details -->
    <section class="event-details">
        <h2 class="section-title">Event Details</h2>
        <div class="details-grid">
            <div class="detail-card">
                <h3>📖 About This Event</h3>
                <div class="body-copy">
                    {!! $event->description !!}
                </div>
            </div>

            <div class="detail-card">
                <h3>ℹ️ Event Information</h3>
                <p>
                    <strong>Type:</strong> {{ $event->type->name }} Event<br><br>
                    <strong>Starts:</strong> {{ (new DateTime($event->start_time))->format('l, F d, Y at h:i A') }}<br><br>
                    <strong>Ends:</strong> {{ (new DateTime($event->end_time))->format('l, F d, Y at h:i A') }}<br><br>
                    <strong>Price:</strong> {{ count($prices) > 0 ? 'Paid Event' : 'Free Event' }}<br><br>
                    @if($event->type->name === 'Online' && $event->event_link)
                    <strong>Online Link:</strong><br>
                    <a href="{{ $event->event_link }}" target="_blank" style="color: #a78bfa; text-decoration: none;">
                        {{ $event->event_link }}
                    </a>
                    @endif
                </p>
            </div>

            <div class="detail-card">
                <h3>👤 Event Organizer</h3>
                <p>
                    <strong>Name:</strong> {{ $event->user?->name() }}<br><br>
                    <strong>Email:</strong> <a href="mailto:{{ $event->user?->email }}" style="color: #a78bfa; text-decoration: none;">{{ $event->user?->email }}</a><br><br>
                    Get in touch with the organizer for any questions or special requirements about this event.
                </p>
            </div>

            <div class="detail-card">
                <h3>🎫 Registration Status</h3>
                <p>
                    @if(count($attendance) > 0)
                    <strong>{{ $attendance->sum(fn($order) => $order->orderItems->sum('quantity')) }}</strong> people have already registered for this event.<br><br>
                    Don't miss out on this amazing opportunity!
                    @else
                    Be the first to register for this exciting event!<br><br>
                    Join us and make unforgettable memories.
                    @endif
                </p>
            </div>
        </div>
    </section>

    <!-- Ticket Pricing (if applicable) -->
    @if(count($prices) > 0)
    <section class="ticket-section">
        <h2 class="section-title">Ticket Options</h2>
        <div class="ticket-grid">
            @foreach($prices as $price)
            <div class="ticket-card">
                <div class="ticket-name">{{ $price->name }}</div>
                <div class="ticket-price">${{ number_format($price->price, 2) }}</div>
                @if(!$attending)
                <a href="{{ route('purchase-tickets', ['eventId' => $event->event_id]) }}" class="cta-button cta-primary" style="width: 100%; justify-content: center;">
                    Get Ticket
                </a>
                @else
                <div style="color: #4ade80; font-weight: 600;">✓ Already Registered</div>
                @endif
            </div>
            @endforeach
        </div>
    </section>
    @endif
</div>