@extends('layouts.app')

@section('title', 'Activities Bookings - WedBooker')
@section('page-title', 'Activities Management')
@section('page-description', 'Manage wedding activities and events')

@section('content')
<div class="space-y-6">
    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
            <div class="flex justify-between items-center">
                <div><p class="text-gray-400">Total Sign-ups</p><h3 class="text-2xl font-bold text-white">156</h3></div>
                <i class="fas fa-calendar-alt text-3xl text-purple-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up" data-aos-delay="100">
            <div class="flex justify-between items-center">
                <div><p class="text-gray-400">Activities</p><h3 class="text-2xl font-bold text-white">4</h3></div>
                <i class="fas fa-heart text-3xl text-pink-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up" data-aos-delay="200">
            <div class="flex justify-between items-center">
                <div><p class="text-gray-400">Capacity Used</p><h3 class="text-2xl font-bold text-green-400">68%</h3></div>
                <i class="fas fa-chart-pie text-3xl text-green-400"></i>
            </div>
        </div>
    </div>

    <!-- Activities Grid -->
    <div class="grid md:grid-cols-2 gap-6">
        <!-- Welcome Dinner -->
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-right">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <h3 class="text-2xl font-bold text-white">🍽️ Welcome Dinner</h3>
                    <p class="text-gray-400">June 14, 2024 • 7:00 PM</p>
                </div>
                <span class="badge badge-success">78/150 booked</span>
            </div>
            <p class="text-gray-300 mb-4">Join us for a pre-wedding dinner to welcome all our guests. Italian cuisine with vegetarian options available.</p>
            <div class="flex justify-between items-center">
                <div class="w-2/3 h-2 bg-white/10 rounded-full overflow-hidden">
                    <div class="h-full w-1/2 bg-purple-400 rounded-full"></div>
                </div>
                <button class="px-4 py-2 bg-purple-600 rounded-lg text-sm">View Bookings</button>
            </div>
        </div>

        <!-- Day Excursion -->
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-left">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <h3 class="text-2xl font-bold text-white">🚌 Day Excursion</h3>
                    <p class="text-gray-400">June 16, 2024 • 10:00 AM</p>
                </div>
                <span class="badge badge-warning">45/80 booked</span>
            </div>
            <p class="text-gray-300 mb-4">Explore London's famous landmarks with a guided tour. Includes lunch and entrance to major attractions.</p>
            <div class="flex justify-between items-center">
                <div class="w-2/3 h-2 bg-white/10 rounded-full overflow-hidden">
                    <div class="h-full w-2/3 bg-purple-400 rounded-full"></div>
                </div>
                <button class="px-4 py-2 bg-purple-600 rounded-lg text-sm">View Bookings</button>
            </div>
        </div>

        <!-- After Party -->
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-right">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <h3 class="text-2xl font-bold text-white">🎉 After Party</h3>
                    <p class="text-gray-400">June 15, 2024 • 10:00 PM</p>
                </div>
                <span class="badge badge-success">98/150 booked</span>
            </div>
            <p class="text-gray-300 mb-4">Keep the celebration going with DJ, dancing, and open bar. Dress code: Casual party attire.</p>
            <div class="flex justify-between items-center">
                <div class="w-2/3 h-2 bg-white/10 rounded-full overflow-hidden">
                    <div class="h-full w-2/3 bg-purple-400 rounded-full"></div>
                </div>
                <button class="px-4 py-2 bg-purple-600 rounded-lg text-sm">View Bookings</button>
            </div>
        </div>

        <!-- Farewell Brunch -->
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-left">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <h3 class="text-2xl font-bold text-white">🥂 Farewell Brunch</h3>
                    <p class="text-gray-400">June 16, 2024 • 11:00 AM</p>
                </div>
                <span class="badge badge-info">62/120 booked</span>
            </div>
            <p class="text-gray-300 mb-4">Join us for a relaxing brunch before you depart. A perfect way to say goodbye to all our guests.</p>
            <div class="flex justify-between items-center">
                <div class="w-2/3 h-2 bg-white/10 rounded-full overflow-hidden">
                    <div class="h-full w-1/2 bg-purple-400 rounded-full"></div>
                </div>
                <button class="px-4 py-2 bg-purple-600 rounded-lg text-sm">View Bookings</button>
            </div>
        </div>
    </div>

    <!-- Guest Activity Sign-ups -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Guest Activity Sign-ups</h3>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-left py-3 text-gray-400">Guest</th>
                        <th class="text-left py-3 text-gray-400">Welcome Dinner</th>
                        <th class="text-left py-3 text-gray-400">Day Excursion</th>
                        <th class="text-left py-3 text-gray-400">After Party</th>
                        <th class="text-left py-3 text-gray-400">Farewell Brunch</th>
                        <th class="text-left py-3 text-gray-400">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="hover:bg-white/5 transition">
                        <td class="py-3 text-white">Sarah Johnson</td>
                        <td class="py-3"><i class="fas fa-check-circle text-green-400"></i></td>
                        <td class="py-3"><i class="fas fa-check-circle text-green-400"></i></td>
                        <td class="py-3"><i class="fas fa-check-circle text-green-400"></i></td>
                        <td class="py-3"><i class="fas fa-times-circle text-gray-500"></i></td>
                        <td class="py-3"><button class="text-purple-400"><i class="fas fa-edit"></i></button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection