@extends('layouts.admin')

@section('title', 'Support Tickets - Admin')
@section('page-title', 'Support Tickets')
@section('page-description', 'Manage customer support requests and inquiries')

@section('content')
<div class="space-y-6">
    
    <!-- Stats Overview -->
    <div class="grid grid-cols-1 md: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 Tickets</p>
                    <h3 class="text-3xl font-bold text-white mt-2">48</h3>
                    <p class="text-green-400 text-sm mt-2">+8 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-ticket-alt 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">Open Tickets</p>
                    <h3 class="text-3xl font-bold text-white mt-2">23</h3>
                    <p class="text-yellow-400 text-sm mt-2">Needs attention</p>
                </div>
                <div class="w-12 h-12 bg-yellow-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-exclamation-circle text-2xl text-yellow-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">In Progress</p>
                    <h3 class="text-3xl font-bold text-white mt-2">15</h3>
                    <p class="text-blue-400 text-sm mt-2">Being handled</p>
                </div>
                <div class="w-12 h-12 bg-blue-600/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-spinner fa-pulse 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">Resolved</p>
                    <h3 class="text-3xl font-bold text-white mt-2">10</h3>
                    <p class="text-green-400 text-sm mt-2">This month</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>
    
    <!-- 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" placeholder="Search tickets by ID, subject, or customer name..." 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 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>Open</option>
                    <option>In Progress</option>
                    <option>Resolved</option>
                    <option>Closed</option>
                </select>
                <select 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 Priorities</option>
                    <option>High</option>
                    <option>Medium</option>
                    <option>Low</option>
                </select>
                <button 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>
            </div>
        </div>
    </div>
    
    <!-- Tickets Table -->
    <div class="glass-card rounded-2xl p-6 border border-white/10 overflow-x-auto" data-aos="fade-up">
        <table class="w-full">
            <thead>
                <tr class="border-b border-white/10">
                    <th class="text-left py-3 px-4 text-gray-400">Ticket ID</th>
                    <th class="text-left py-3 px-4 text-gray-400">Subject</th>
                    <th class="text-left py-3 px-4 text-gray-400">Customer</th>
                    <th class="text-left py-3 px-4 text-gray-400">Priority</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">Created</th>
                    <th class="text-left py-3 px-4 text-gray-400">Last Update</th>
                    <th class="text-left py-3 px-4 text-gray-400">Actions</th>
                 </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-white/5 transition cursor-pointer">
                    <td class="py-3 px-4 text-purple-400 font-semibold">#TKT-0012</td>
                    <td class="py-3 px-4 text-white">Cannot access wedding page</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"><span class="badge badge-danger">High</span></td>
                    <td class="py-3 px-4"><span class="badge badge-warning">Open</span></td>
                    <td class="py-3 px-4 text-gray-300">Mar 25, 2024</td>
                    <td class="py-3 px-4 text-gray-300">2 hours ago</td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <button class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></button>
                            <button class="text-green-400 hover:text-green-300 transition"><i class="fas fa-reply"></i></button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition cursor-pointer">
                    <td class="py-3 px-4 text-purple-400 font-semibold">#TKT-0011</td>
                    <td class="py-3 px-4 text-white">Payment failed - subscription renewal</td>
                    <td class="py-3 px-4">
                        <div>
                            <p class="text-white">James Wilson</p>
                            <p class="text-gray-400 text-xs">james@email.com</p>
                        </div>
                    </td>
                    <td class="py-3 px-4"><span class="badge badge-danger">High</span></td>
                    <td class="py-3 px-4"><span class="badge badge-info">In Progress</span></td>
                    <td class="py-3 px-4 text-gray-300">Mar 24, 2024</td>
                    <td class="py-3 px-4 text-gray-300">5 hours ago</td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <button class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></button>
                            <button class="text-green-400 hover:text-green-300 transition"><i class="fas fa-reply"></i></button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition cursor-pointer">
                    <td class="py-3 px-4 text-purple-400 font-semibold">#TKT-0010</td>
                    <td class="py-3 px-4 text-white">How to add plus one to guest list?</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"><span class="badge badge-warning">Medium</span></td>
                    <td class="py-3 px-4"><span class="badge badge-warning">Open</span></td>
                    <td class="py-3 px-4 text-gray-300">Mar 23, 2024</td>
                    <td class="py-3 px-4 text-gray-300">Yesterday</td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <button class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></button>
                            <button class="text-green-400 hover:text-green-300 transition"><i class="fas fa-reply"></i></button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition cursor-pointer">
                    <td class="py-3 px-4 text-purple-400 font-semibold">#TKT-0009</td>
                    <td class="py-3 px-4 text-white">Custom domain setup request</td>
                    <td class="py-3 px-4">
                        <div>
                            <p class="text-white">Michael Brown</p>
                            <p class="text-gray-400 text-xs">michael@email.com</p>
                        </div>
                    </td>
                    <td class="py-3 px-4"><span class="badge badge-info">Low</span></td>
                    <td class="py-3 px-4"><span class="badge badge-success">Resolved</span></td>
                    <td class="py-3 px-4 text-gray-300">Mar 22, 2024</td>
                    <td class="py-3 px-4 text-gray-300">2 days ago</td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <button class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></button>
                            <button class="text-green-400 hover:text-green-300 transition"><i class="fas fa-reply"></i></button>
                        </div>
                    </td>
                </tr>
                
                <tr class="hover:bg-white/5 transition cursor-pointer">
                    <td class="py-3 px-4 text-purple-400 font-semibold">#TKT-0008</td>
                    <td class="py-3 px-4 text-white">Billing inquiry - upgrade to Pro</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"><span class="badge badge-warning">Medium</span></td>
                    <td class="py-3 px-4"><span class="badge badge-info">In Progress</span></td>
                    <td class="py-3 px-4 text-gray-300">Mar 21, 2024</td>
                    <td class="py-3 px-4 text-gray-300">3 days ago</td>
                    <td class="py-3 px-4">
                        <div class="flex gap-2">
                            <button class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></button>
                            <button class="text-green-400 hover:text-green-300 transition"><i class="fas fa-reply"></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 48 tickets</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>
    
    <!-- Quick Stats & Charts -->
    <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">📊 Ticket Trends</h3>
            <canvas id="ticketTrendsChart" height="200"></canvas>
        </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">🏷️ Categories</h3>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-300">Technical Issues</span>
                    <div class="flex items-center gap-3 flex-1 ml-4">
                        <div class="flex-1 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[35%] bg-purple-400 rounded-full"></div>
                        </div>
                        <span class="text-white">17 tickets</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-300">Billing & Payments</span>
                    <div class="flex items-center gap-3 flex-1 ml-4">
                        <div class="flex-1 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[28%] bg-pink-400 rounded-full"></div>
                        </div>
                        <span class="text-white">13 tickets</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-300">Feature Requests</span>
                    <div class="flex items-center gap-3 flex-1 ml-4">
                        <div class="flex-1 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[22%] bg-orange-400 rounded-full"></div>
                        </div>
                        <span class="text-white">11 tickets</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-300">Account Issues</span>
                    <div class="flex items-center gap-3 flex-1 ml-4">
                        <div class="flex-1 h-2 bg-white/10 rounded-full overflow-hidden">
                            <div class="h-full w-[15%] bg-green-400 rounded-full"></div>
                        </div>
                        <span class="text-white">7 tickets</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">
            <button class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center">
                <i class="fas fa-plus-circle text-2xl text-purple-400 mb-2 block"></i>
                <span class="text-white text-sm">New Ticket</span>
            </button>
            <button class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center">
                <i class="fas fa-download text-2xl text-green-400 mb-2 block"></i>
                <span class="text-white text-sm">Export Reports</span>
            </button>
            <button class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center">
                <i class="fas fa-envelope text-2xl text-blue-400 mb-2 block"></i>
                <span class="text-white text-sm">Bulk Reply</span>
            </button>
            <button class="p-4 bg-white/5 rounded-xl hover:bg-white/10 transition text-center">
                <i class="fas fa-chart-line text-2xl text-orange-400 mb-2 block"></i>
                <span class="text-white text-sm">Analytics</span>
            </button>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Ticket Trends Chart
    const ctx = document.getElementById('ticketTrendsChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
            datasets: [
                {
                    label: 'New Tickets',
                    data: [12, 15, 18, 22],
                    borderColor: '#8B5CF6',
                    backgroundColor: 'rgba(139,92,246,0.1)',
                    tension: 0.4,
                    fill: true
                },
                {
                    label: 'Resolved',
                    data: [8, 10, 14, 18],
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16,185,129,0.1)',
                    tension: 0.4,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'top',
                    labels: { color: '#fff' }
                }
            },
            scales: {
                y: {
                    ticks: { color: '#fff', stepSize: 5 },
                    grid: { color: 'rgba(255,255,255,0.1)' }
                },
                x: {
                    ticks: { color: '#fff' },
                    grid: { display: false }
                }
            }
        }
    });
    
    // Add click handler to table rows
    document.querySelectorAll('tbody tr').forEach(row => {
        row.addEventListener('click', (e) => {
            // Don't trigger if clicking on action buttons
            if(e.target.closest('.flex.gap-2')) return;
            // Open ticket details (you can redirect or show modal)
            console.log('Open ticket details');
        });
    });
</script>
@endpush