@extends('layouts.admin')

@section('title', 'Dashboard - WedBooker')
@section('page-title', 'Wedding Dashboard')
@section('page-description', 'Overview of your wedding planning')

@section('content')
<div class="space-y-6">
    
    <!-- Quick Navigation Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ route('guests.create') }}" class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20 hover:bg-white/20 transition text-center group">
            <i class="fas fa-user-plus text-2xl text-purple-400 mb-2 block group-hover:scale-110 transition"></i>
            <span class="text-white text-sm font-medium">Add Guest</span>
        </a>
        <a href="{{ route('invitations.template') }}" class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20 hover:bg-white/20 transition text-center group">
            <i class="fas fa-envelope-open-text text-2xl text-pink-400 mb-2 block group-hover:scale-110 transition"></i>
            <span class="text-white text-sm font-medium">Customize Invite</span>
        </a>
        <a href="{{ route('services.index') }}" class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20 hover:bg-white/20 transition text-center group">
            <i class="fas fa-concierge-bell text-2xl text-green-400 mb-2 block group-hover:scale-110 transition"></i>
            <span class="text-white text-sm font-medium">Manage Services</span>
        </a>
        <a href="{{ route('wedding.preview') }}" class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20 hover:bg-white/20 transition text-center group">
            <i class="fas fa-eye text-2xl text-orange-400 mb-2 block group-hover:scale-110 transition"></i>
            <span class="text-white text-sm font-medium">Preview Wedding</span>
        </a>
    </div>
    
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-300 text-sm">Total Guests</p>
                    <h3 class="text-3xl font-bold text-white mt-2">156</h3>
                    <p class="text-green-400 text-sm mt-2">+12 this week</p>
                </div>
                <div class="w-12 h-12 bg-purple-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-users text-2xl text-purple-400"></i>
                </div>
            </div>
            <a href="{{ route('guests.index') }}" class="mt-3 inline-block text-purple-400 text-sm hover:text-purple-300 transition">View Details →</a>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-300 text-sm">RSVP Status</p>
                    <h3 class="text-3xl font-bold text-white mt-2">124</h3>
                    <p class="text-green-400 text-sm mt-2">79% confirmed</p>
                </div>
                <div class="w-12 h-12 bg-green-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-check-circle text-2xl text-green-400"></i>
                </div>
            </div>
            <a href="{{ route('invitations.statistics') }}" class="mt-3 inline-block text-purple-400 text-sm hover:text-purple-300 transition">View Details →</a>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-300 text-sm">Bookings Made</p>
                    <h3 class="text-3xl font-bold text-white mt-2">89</h3>
                    <p class="text-blue-400 text-sm mt-2">32 pending</p>
                </div>
                <div class="w-12 h-12 bg-blue-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-calendar-check text-2xl text-blue-400"></i>
                </div>
            </div>
            <a href="{{ route('bookings.index') }}" class="mt-3 inline-block text-purple-400 text-sm hover:text-purple-300 transition">View Details →</a>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-300 text-sm">Subscription</p>
                    <h3 class="text-3xl font-bold text-white mt-2">Pro</h3>
                    <p class="text-purple-400 text-sm mt-2">Expires in 28 days</p>
                </div>
                <div class="w-12 h-12 bg-purple-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-crown text-2xl text-purple-400"></i>
                </div>
            </div>
            <a href="{{ route('subscription.plans') }}" class="mt-3 inline-block text-purple-400 text-sm hover:text-purple-300 transition">Manage Plan →</a>
        </div>
    </div>
    
    <!-- Charts and Recent Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- RSVP Chart -->
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-white">RSVP Overview</h3>
                <a href="{{ route('invitations.statistics') }}" class="text-purple-400 text-sm hover:text-purple-300 transition">Full Report →</a>
            </div>
            <canvas id="rsvpChart" height="250"></canvas>
        </div>
        
        <!-- Recent Bookings -->
        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-white">Recent Bookings</h3>
                <a href="{{ route('bookings.index') }}" class="text-purple-400 text-sm hover:text-purple-300 transition">View All →</a>
            </div>
            <div class="space-y-3">
                <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg hover:bg-white/10 transition cursor-pointer" onclick="window.location='{{ route('bookings.show', 1) }}'">
                    <div>
                        <p class="text-white font-semibold">John & Sarah Smith</p>
                        <p class="text-gray-400 text-sm">Accommodation • 2024-03-25</p>
                    </div>
                    <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">Confirmed</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg hover:bg-white/10 transition cursor-pointer" onclick="window.location='{{ route('bookings.show', 2) }}'">
                    <div>
                        <p class="text-white font-semibold">Michael Brown</p>
                        <p class="text-gray-400 text-sm">Transport • 2024-03-24</p>
                    </div>
                    <span class="px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs">Pending</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg hover:bg-white/10 transition cursor-pointer" onclick="window.location='{{ route('bookings.show', 3) }}'">
                    <div>
                        <p class="text-white font-semibold">Emma Wilson</p>
                        <p class="text-gray-400 text-sm">Welcome Dinner • 2024-03-23</p>
                    </div>
                    <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">Confirmed</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg hover:bg-white/10 transition cursor-pointer" onclick="window.location='{{ route('bookings.show', 4) }}'">
                    <div>
                        <p class="text-white font-semibold">James Taylor</p>
                        <p class="text-gray-400 text-sm">Accommodation • 2024-03-22</p>
                    </div>
                    <span class="px-2 py-1 bg-red-500/20 text-red-400 rounded-full text-xs">Cancelled</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Upcoming Schedule -->
    <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Wedding Schedule</h3>
            <a href="{{ route('wedding.page') }}" class="text-purple-400 text-sm hover:text-purple-300 transition">Edit Schedule →</a>
        </div>
        <div class="grid md:grid-cols-3 gap-4">
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <div class="w-12 h-12 bg-purple-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-church text-purple-400 text-xl"></i>
                </div>
                <div>
                    <p class="text-white font-semibold">Ceremony</p>
                    <p class="text-gray-400 text-sm">June 15, 2024 • 2:00 PM</p>
                </div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <div class="w-12 h-12 bg-pink-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-glass-cheers text-pink-400 text-xl"></i>
                </div>
                <div>
                    <p class="text-white font-semibold">Reception</p>
                    <p class="text-gray-400 text-sm">June 15, 2024 • 5:00 PM</p>
                </div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition">
                <div class="w-12 h-12 bg-orange-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-utensils text-orange-400 text-xl"></i>
                </div>
                <div>
                    <p class="text-white font-semibold">Dinner</p>
                    <p class="text-gray-400 text-sm">June 15, 2024 • 7:00 PM</p>
                </div>
            </div>
        </div>
    </div>
    
  
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // RSVP Chart
        const ctx = document.getElementById('rsvpChart');
        if(ctx) {
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['Confirmed', 'Pending', 'Not Attending'],
                    datasets: [{
                        data: [124, 24, 8],
                        backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                        borderWidth: 0,
                        hoverOffset: 10
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { color: '#fff', font: { size: 12 } }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = 156;
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }
    });
    
    // Add click handlers to cards
    document.querySelectorAll('.bg-white\\/10').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
    
    // Force reflow to ensure all elements are visible
    window.addEventListener('load', function() {
        document.body.style.display = 'none';
        document.body.offsetHeight; // force reflow
        document.body.style.display = '';
    });
</script>
@endpush