@extends('layouts.admin')

@section('title', 'Manage Weddings - Admin')
@section('page-title', 'Wedding Management')
@section('page-description', 'View and manage all weddings on the platform')

@section('content')
<div class="space-y-6">
    
    <!-- Add Wedding Button -->
    <div class="flex justify-end">
        <a href="{{ route('admin.weddings.create') }}" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
            <i class="fas fa-plus mr-2"></i>Add New Wedding
        </a>
    </div>
    
    <!-- Stats Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-sm">Total Weddings</p>
                    <h3 class="text-3xl font-bold text-white mt-2">247</h3>
                    <p class="text-green-400 text-sm mt-2">+23 this month</p>
                </div>
                <div class="w-12 h-12 bg-purple-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-ring text-2xl text-purple-400"></i>
                </div>
            </div>
        </div>
        
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-sm">Active Weddings</p>
                    <h3 class="text-3xl font-bold text-white mt-2">189</h3>
                    <p class="text-green-400 text-sm mt-2">76.5% active</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>
        </div>
        
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-sm">Upcoming Weddings</p>
                    <h3 class="text-3xl font-bold text-white mt-2">58</h3>
                    <p class="text-blue-400 text-sm mt-2">Next 30 days</p>
                </div>
                <div class="w-12 h-12 bg-blue-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-calendar-alt text-2xl text-blue-400"></i>
                </div>
            </div>
        </div>
        
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-400 text-sm">Total Guests</p>
                    <h3 class="text-3xl font-bold text-white mt-2">12,456</h3>
                    <p class="text-purple-400 text-sm mt-2">Avg. 50 per wedding</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>
        </div>
    </div>
    
    <!-- Search & Filters -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex flex-wrap gap-4 justify-between items-center">
            <div class="flex-1 relative">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                <input type="text" id="searchInput" placeholder="Search weddings by couple name, email, or location..." class="w-full pl-10 pr-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
            </div>
            <div class="flex gap-3">
                <select id="statusFilter" class="px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    <option>All Status</option>
                    <option>Active</option>
                    <option>Completed</option>
                    <option>Cancelled</option>
                </select>
                <select id="planFilter" class="px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    <option>All Plans</option>
                    <option>Basic</option>
                    <option>Pro</option>
                    <option>Premium</option>
                </select>
                <select id="sortFilter" class="px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    <option>Sort by: Newest</option>
                    <option>Sort by: Oldest</option>
                    <option>Sort by: Guests</option>
                </select>
                <button onclick="applyFilters()" class="px-4 py-3 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                    <i class="fas fa-filter mr-2"></i>Apply Filters
                </button>
                <button onclick="resetFilters()" class="px-4 py-3 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition">
                    <i class="fas fa-redo mr-2"></i>Reset
                </button>
            </div>
        </div>
    </div>
    
    <!-- Weddings Table -->
    <div class="glass-card rounded-2xl p-6 border border-white/10 overflow-x-auto" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-white">All Weddings</h3>
            <div class="flex gap-2">
                <button onclick="exportWeddings()" class="px-3 py-1 bg-white/10 rounded text-gray-300 text-sm hover:bg-white/20 transition">
                    <i class="fas fa-download mr-1"></i>Export CSV
                </button>
                <button onclick="window.print()" class="px-3 py-1 bg-white/10 rounded text-gray-300 text-sm hover:bg-white/20 transition">
                    <i class="fas fa-print mr-1"></i>Print
                </button>
            </div>
        </div>
        
        <table class="w-full">
            <thead>
                <tr class="border-b border-white/10">
                    <th class="text-left py-3 px-4 text-gray-400">Wedding</th>
                    <th class="text-left py-3 px-4 text-gray-400">Couple</th>
                    <th class="text-left py-3 px-4 text-gray-400">Date</th>
                    <th class="text-left py-3 px-4 text-gray-400">Location</th>
                    <th class="text-left py-3 px-4 text-gray-400">Guests</th>
                    <th class="text-left py-3 px-4 text-gray-400">Plan</th>
                    <th class="text-left py-3 px-4 text-gray-400">Status</th>
                    <th class="text-left py-3 px-4 text-gray-400">Actions</th>
                 </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-3">
                            <img src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
                            <div>
                                <p class="text-white font-semibold">Emma & James</p>
                                <p class="text-gray-400 text-xs">wedbooker.com/emma-james</p>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-4">
                        <div>
                            <p class="text-white">Emma Thompson</p>
                            <p class="text-gray-400 text-xs">emma@email.com</p>
                        </div>
                    </td>
                    <td class="py-3 px-4 text-gray-300">Jun 15, 2024</td>
                    <td class="py-3 px-4 text-gray-300">London, UK</td>
                    <td class="py-3 px-4 text-gray-300">156</td>
                    <td class="py-3 px-4"><span class="badge badge-success">Pro</span></td>
                    <td class="py-3 px-4"><span class="badge badge-success">Active</span></td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.weddings.show', 1) }}" class="text-purple-400 hover:text-purple-300 transition" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('admin.weddings.edit', 1) }}" class="text-blue-400 hover:text-blue-300 transition" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <button onclick="deleteWedding(1)" class="text-red-400 hover:text-red-300 transition" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-3">
                            <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
                            <div>
                                <p class="text-white font-semibold">Sarah & Michael</p>
                                <p class="text-gray-400 text-xs">wedbooker.com/sarah-michael</p>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-4">
                        <div>
                            <p class="text-white">Sarah Johnson</p>
                            <p class="text-gray-400 text-xs">sarah@email.com</p>
                        </div>
                    </td>
                    <td class="py-3 px-4 text-gray-300">Jul 20, 2024</td>
                    <td class="py-3 px-4 text-gray-300">Manchester, UK</td>
                    <td class="py-3 px-4 text-gray-300">85</td>
                    <td class="py-3 px-4"><span class="badge badge-info">Basic</span></td>
                    <td class="py-3 px-4"><span class="badge badge-success">Active</span></td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.weddings.show', 2) }}" class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.weddings.edit', 2) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="deleteWedding(2)" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-3">
                            <img src="https://images.unsplash.com/photo-1537633552985-df8429e8048b?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
                            <div>
                                <p class="text-white font-semibold">Rachel & David</p>
                                <p class="text-gray-400 text-xs">wedbooker.com/rachel-david</p>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-4">
                        <div>
                            <p class="text-white">Rachel Green</p>
                            <p class="text-gray-400 text-xs">rachel@email.com</p>
                        </div>
                    </td>
                    <td class="py-3 px-4 text-gray-300">Aug 10, 2024</td>
                    <td class="py-3 px-4 text-gray-300">Birmingham, UK</td>
                    <td class="py-3 px-4 text-gray-300">128</td>
                    <td class="py-3 px-4"><span class="badge badge-success">Pro</span></td>
                    <td class="py-3 px-4"><span class="badge badge-success">Active</span></td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.weddings.show', 3) }}" class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.weddings.edit', 3) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="deleteWedding(3)" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-3">
                            <img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
                            <div>
                                <p class="text-white font-semibold">Jessica & Mark</p>
                                <p class="text-gray-400 text-xs">wedbooker.com/jessica-mark</p>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-4">
                        <div>
                            <p class="text-white">Jessica Williams</p>
                            <p class="text-gray-400 text-xs">jessica@email.com</p>
                        </div>
                    </td>
                    <td class="py-3 px-4 text-gray-300">Sep 05, 2024</td>
                    <td class="py-3 px-4 text-gray-300">Liverpool, UK</td>
                    <td class="py-3 px-4 text-gray-300">210</td>
                    <td class="py-3 px-4"><span class="badge badge-success">Premium</span></td>
                    <td class="py-3 px-4"><span class="badge badge-warning">Upcoming</span></td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.weddings.show', 4) }}" class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.weddings.edit', 4) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="deleteWedding(4)" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-4">
                        <div class="flex items-center gap-3">
                            <img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
                            <div>
                                <p class="text-white font-semibold">Daniel & Olivia</p>
                                <p class="text-gray-400 text-xs">wedbooker.com/daniel-olivia</p>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-4">
                        <div>
                            <p class="text-white">Daniel Brown</p>
                            <p class="text-gray-400 text-xs">daniel@email.com</p>
                        </div>
                    </td>
                    <td class="py-3 px-4 text-gray-300">Oct 12, 2024</td>
                    <td class="py-3 px-4 text-gray-300">Leeds, UK</td>
                    <td class="py-3 px-4 text-gray-300">95</td>
                    <td class="py-3 px-4"><span class="badge badge-info">Basic</span></td>
                    <td class="py-3 px-4"><span class="badge badge-warning">Pending</span></td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.weddings.show', 5) }}" class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.weddings.edit', 5) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="deleteWedding(5)" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <!-- Pagination -->
        <div class="flex justify-between items-center mt-6 pt-4 border-t border-white/10">
            <p class="text-gray-400 text-sm">Showing 1-5 of 247 weddings</p>
            <div class="flex gap-2">
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Previous</button>
                <button class="px-3 py-1 bg-purple-600 rounded text-white">1</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">2</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">3</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">4</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Next</button>
            </div>
        </div>
    </div>
    
    <!-- Wedding Insights -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-right">
            <h3 class="text-xl font-bold text-white mb-4">📊 Wedding Trends</h3>
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-gray-300">Weddings by Month</span>
                        <span class="text-purple-400">June - August (Peak)</span>
                    </div>
                    <canvas id="weddingTrendsChart" height="200"></canvas>
                </div>
                <div class="grid grid-cols-2 gap-4 mt-4">
                    <div class="p-3 bg-white/5 rounded-lg">
                        <p class="text-gray-400 text-sm">Most Popular Month</p>
                        <p class="text-white font-bold text-xl">June</p>
                        <p class="text-green-400 text-sm">47 weddings</p>
                    </div>
                    <div class="p-3 bg-white/5 rounded-lg">
                        <p class="text-gray-400 text-sm">Most Popular Day</p>
                        <p class="text-white font-bold text-xl">Saturday</p>
                        <p class="text-green-400 text-sm">68% of weddings</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-left">
            <h3 class="text-xl font-bold text-white mb-4">📍 Top Locations</h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <i class="fas fa-map-marker-alt text-purple-400 mr-2"></i>
                        <span class="text-white">London</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[45%] bg-purple-400 rounded-full"></div>
                        </div>
                        <span class="text-white">112 weddings</span>
                    </div>
                </div>
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <i class="fas fa-map-marker-alt text-purple-400 mr-2"></i>
                        <span class="text-white">Manchester</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[28%] bg-purple-400 rounded-full"></div>
                        </div>
                        <span class="text-white">68 weddings</span>
                    </div>
                </div>
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <i class="fas fa-map-marker-alt text-purple-400 mr-2"></i>
                        <span class="text-white">Birmingham</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[19%] bg-purple-400 rounded-full"></div>
                        </div>
                        <span class="text-white">47 weddings</span>
                    </div>
                </div>
                <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
                    <div>
                        <i class="fas fa-map-marker-alt text-purple-400 mr-2"></i>
                        <span class="text-white">Liverpool</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[12%] bg-purple-400 rounded-full"></div>
                        </div>
                        <span class="text-white">29 weddings</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <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">⚡ Quick Actions</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ route('admin.weddings.create') }}" class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center group">
                <i class="fas fa-plus-circle text-2xl text-purple-400 mb-2 block group-hover:scale-110 transition"></i>
                <span class="text-white text-sm">Add Wedding</span>
            </a>
            <button onclick="exportWeddings()" class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center group">
                <i class="fas fa-download text-2xl text-green-400 mb-2 block group-hover:scale-110 transition"></i>
                <span class="text-white text-sm">Export Report</span>
            </button>
            <a href="{{ route('admin.reports') }}" class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center group">
                <i class="fas fa-chart-line text-2xl text-orange-400 mb-2 block group-hover:scale-110 transition"></i>
                <span class="text-white text-sm">Analytics</span>
            </a>
            <a href="{{ route('admin.dashboard') }}" class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center group">
                <i class="fas fa-tachometer-alt text-2xl text-blue-400 mb-2 block group-hover:scale-110 transition"></i>
                <span class="text-white text-sm">Dashboard</span>
            </a>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Wedding Trends Chart
    const ctx = document.getElementById('weddingTrendsChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Weddings',
                data: [12, 15, 18, 22, 28, 47, 52, 45, 38, 32, 25, 18],
                borderColor: '#8B5CF6',
                backgroundColor: 'rgba(139,92,246,0.1)',
                tension: 0.4,
                fill: true,
                pointBackgroundColor: '#8B5CF6',
                pointBorderColor: '#fff',
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.raw} weddings`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    ticks: { color: '#fff', stepSize: 10 },
                    grid: { color: 'rgba(255,255,255,0.1)' }
                },
                x: {
                    ticks: { color: '#fff' },
                    grid: { display: false }
                }
            }
        }
    });
    
    // Submit form helper
    function submitForm(action, method = 'POST') {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = action;
        form.style.display = 'none';
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        if (method !== 'POST') {
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = method;
            form.appendChild(methodField);
        }
        
        document.body.appendChild(form);
        form.submit();
    }
    
    function deleteWedding(weddingId) {
        if(confirm('Are you sure you want to delete this wedding? This action cannot be undone.')) {
            submitForm('{{ url("admin/weddings") }}/' + weddingId, 'DELETE');
        }
    }
    
    function applyFilters() {
        const search = document.getElementById('searchInput').value;
        const status = document.getElementById('statusFilter').value;
        const plan = document.getElementById('planFilter').value;
        const sort = document.getElementById('sortFilter').value;
        window.location.href = '{{ route("admin.weddings.index") }}?search=' + search + '&status=' + status + '&plan=' + plan + '&sort=' + sort;
    }
    
    function resetFilters() {
        document.getElementById('searchInput').value = '';
        document.getElementById('statusFilter').value = 'All Status';
        document.getElementById('planFilter').value = 'All Plans';
        document.getElementById('sortFilter').value = 'Sort by: Newest';
        window.location.href = '{{ route("admin.weddings.index") }}';
    }
    
    function exportWeddings() {
        window.location.href = '{{ route("admin.weddings.index") }}?export=csv';
    }
</script>
@endpush
@endsection