@extends('layouts.app')

@section('title', 'Ticket Reports')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Ticket Reports</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Analytics and performance metrics</p>
        </div>
        <div class="flex gap-2">
            <select id="periodFilter" onchange="changePeriod()" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                <option value="week" {{ $period === 'week' ? 'selected' : '' }}>Last Week</option>
                <option value="month" {{ $period === 'month' ? 'selected' : '' }}>Last Month</option>
                <option value="quarter" {{ $period === 'quarter' ? 'selected' : '' }}>Last Quarter</option>
                <option value="year" {{ $period === 'year' ? 'selected' : '' }}>Last Year</option>
            </select>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="card">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500 dark:text-gray-400">Total Tickets</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['total'] }}</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900">
                    <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500 dark:text-gray-400">Pending</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['pending'] }}</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500 dark:text-gray-400">Resolved</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['resolved'] }}</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500 dark:text-gray-400">Avg Resolution</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $stats['avg_resolution_hours'] }}h</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Issue Breakdown -->
        <div class="card">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Issue Breakdown</h3>
            <div class="space-y-3">
                @forelse($issueBreakdown as $issue)
                @php $percentage = $stats['total'] > 0 ? round(($issue->count / $stats['total']) * 100) : 0; @endphp
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-700 dark:text-gray-300">{{ $issue->name }}</span>
                        <span class="text-gray-500 dark:text-gray-400">{{ $issue->count }} ({{ $percentage }}%)</span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div class="bg-purple-600 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
                    </div>
                </div>
                @empty
                <p class="text-gray-500 dark:text-gray-400 text-center py-4">No data available</p>
                @endforelse
            </div>
        </div>

        <!-- Product Breakdown -->
        <div class="card">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Product Breakdown</h3>
            <div class="space-y-3">
                @forelse($productBreakdown as $product)
                @php $percentage = $stats['total'] > 0 ? round(($product->count / $stats['total']) * 100) : 0; @endphp
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-700 dark:text-gray-300">{{ $product->name }}</span>
                        <span class="text-gray-500 dark:text-gray-400">{{ $product->count }} ({{ $percentage }}%)</span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
                    </div>
                </div>
                @empty
                <p class="text-gray-500 dark:text-gray-400 text-center py-4">No data available</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Priority & Status -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Priority Distribution -->
        <div class="card">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Priority Distribution</h3>
            <div class="flex items-center justify-center gap-8">
                @php
                    $priorityColors = ['urgent' => '#ef4444', 'high' => '#f97316', 'medium' => '#3b82f6', 'low' => '#9ca3af'];
                    $priorityLabels = ['urgent' => 'Urgent', 'high' => 'High', 'medium' => 'Medium', 'low' => 'Low'];
                @endphp
                <div class="flex flex-wrap gap-4 justify-center">
                    @foreach(['urgent', 'high', 'medium', 'low'] as $priority)
                    <div class="text-center">
                        <div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-lg" style="background-color: {{ $priorityColors[$priority] }}">
                            {{ $priorityDistribution->get($priority)->count ?? 0 }}
                        </div>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">{{ $priorityLabels[$priority] }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Status Distribution -->
        <div class="card">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Status Overview</h3>
            @php
                $statusColors = [
                    'pending' => 'bg-yellow-500',
                    'picked_up' => 'bg-indigo-500',
                    'in_progress' => 'bg-blue-500',
                    'transferred' => 'bg-orange-500',
                    'resolved' => 'bg-green-500',
                    'reopened' => 'bg-red-500',
                ];
                $statusLabels = [
                    'pending' => 'Pending',
                    'picked_up' => 'Picked Up',
                    'in_progress' => 'In Progress',
                    'transferred' => 'Transferred',
                    'resolved' => 'Resolved',
                    'reopened' => 'Reopened',
                ];
            @endphp
            <div class="grid grid-cols-3 gap-3">
                @foreach($statusLabels as $status => $label)
                <div class="text-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <div class="inline-flex items-center justify-center w-10 h-10 rounded-full {{ $statusColors[$status] }} text-white font-bold mb-2">
                        {{ $statusDistribution->get($status)->count ?? 0 }}
                    </div>
                    <p class="text-xs text-gray-600 dark:text-gray-400">{{ $label }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Trend Chart -->
    <div class="card mb-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Ticket Trend (Last 6 Months)</h3>
        <div class="h-64">
            <canvas id="trendChart"></canvas>
        </div>
    </div>

    <!-- Tables Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Department Performance -->
        <div class="card overflow-hidden p-0">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Department Performance</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Department</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Total</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Resolved</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Avg Time</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse($departmentPerformance as $dept)
                        <tr>
                            <td class="px-6 py-4 text-sm text-gray-900 dark:text-white">{{ $dept->name }}</td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-300 text-center">{{ $dept->total_tickets }}</td>
                            <td class="px-6 py-4 text-sm text-green-600 dark:text-green-400 text-center">{{ $dept->resolved_tickets }}</td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-300 text-center">{{ $dept->avg_resolution_hours }}h</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">No data available</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Staff Performance -->
        <div class="card overflow-hidden p-0">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Top Staff Performance</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Staff</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Department</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Handled</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Resolved</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse($staffPerformance as $staff)
                        <tr>
                            <td class="px-6 py-4 text-sm text-gray-900 dark:text-white">{{ $staff->name }}</td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">{{ $staff->department->name ?? '-' }}</td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-300 text-center">{{ $staff->total_handled }}</td>
                            <td class="px-6 py-4 text-sm text-green-600 dark:text-green-400 text-center">{{ $staff->resolved_count }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">No data available</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function changePeriod() {
    const period = document.getElementById('periodFilter').value;
    window.location.href = `{{ route('ticket-reports.index') }}?period=${period}`;
}

// Trend Chart
const ctx = document.getElementById('trendChart').getContext('2d');
const trendData = @json($trendData);

new Chart(ctx, {
    type: 'line',
    data: {
        labels: trendData.map(d => d.label),
        datasets: [
            {
                label: 'Created',
                data: trendData.map(d => d.created),
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                tension: 0.3,
            },
            {
                label: 'Resolved',
                data: trendData.map(d => d.resolved),
                borderColor: '#22c55e',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                fill: true,
                tension: 0.3,
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'top',
                labels: {
                    color: document.documentElement.classList.contains('dark') ? '#9ca3af' : '#374151'
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    color: document.documentElement.classList.contains('dark') ? '#9ca3af' : '#374151'
                },
                grid: {
                    color: document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'
                }
            },
            x: {
                ticks: {
                    color: document.documentElement.classList.contains('dark') ? '#9ca3af' : '#374151'
                },
                grid: {
                    color: document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'
                }
            }
        }
    }
});
</script>
@endsection