@extends('layouts.admin')

@section('title', __('Events Analytics'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Events Analytics') }}</h1>
            <p class="mb-0 text-muted">{{ __('Comprehensive analytics and insights for your events') }}</p>
        </div>
        <div class="d-flex align-items-center">
            <a href="{{ route('admin.events.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary mr-2">
                <i class="fas fa-arrow-left"></i> {{ __('Back to Events') }}
            </a>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="exportDropdown" data-toggle="dropdown">
                    <i class="fas fa-download"></i> {{ __('Export') }}
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="{{ route('admin.events.analytics.export', ['type' => 'registrations', 'format' => 'csv', 'period' => 'all', 'locale' => app()->getLocale()]) }}">
                        <i class="fas fa-file-csv"></i> {{ __('All Registrations (CSV)') }}
                    </a>
                    <a class="dropdown-item" href="{{ route('admin.events.analytics.export', ['type' => 'registrations', 'format' => 'csv', 'period' => 'monthly', 'locale' => app()->getLocale()]) }}">
                        <i class="fas fa-file-csv"></i> {{ __('This Month (CSV)') }}
                    </a>
                    <a class="dropdown-item" href="{{ route('admin.events.analytics.export', ['type' => 'registrations', 'format' => 'csv', 'period' => 'yearly', 'locale' => app()->getLocale()]) }}">
                        <i class="fas fa-file-csv"></i> {{ __('This Year (CSV)') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {{ __('Total Events') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_events']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {{ __('Total Registrations') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_registrations']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {{ __('Upcoming Events') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['upcoming_events']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {{ __('Total Revenue') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">${{ number_format($stats['total_revenue'], 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Events Created Over Time') }}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="eventsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Event Status Distribution') }}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Registrations -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Recent Registrations') }}</h6>
        </div>
        <div class="card-body">
            @if($recent_registrations->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>{{ __('Event') }}</th>
                                <th>{{ __('Attendee') }}</th>
                                <th>{{ __('Email') }}</th>
                                <th>{{ __('Registration Date') }}</th>
                                <th>{{ __('Amount') }}</th>
                                <th>{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recent_registrations as $registration)
                                <tr>
                                    <td>
                                        <strong>{{ $registration->event->title_en ?? $registration->event->title_ar }}</strong>
                                    </td>
                                    <td>{{ $registration->full_name }}</td>
                                    <td>{{ $registration->email }}</td>
                                    <td>{{ $registration->created_at->format('M d, Y H:i') }}</td>
                                    <td>
                                        @if($registration->payment_amount)
                                            ${{ number_format($registration->payment_amount, 2) }}
                                        @else
                                            {{ __('Free') }}
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-success">{{ __('Confirmed') }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-users fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">{{ __('No registrations yet') }}</h5>
                    <p class="text-muted">{{ __('Registrations will appear here once attendees sign up for events.') }}</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/chart.js" rel="stylesheet">
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
$(document).ready(function() {
    // Events over time chart
    const eventsData = @json($events_by_month);
    const eventsChart = new Chart(document.getElementById('eventsChart'), {
        type: 'line',
        data: {
            labels: eventsData.map(item => {
                const date = new Date(item.month + '-01');
                return date.toLocaleDateString('{{ app()->getLocale() }}', { year: 'numeric', month: 'short' });
            }),
            datasets: [{
                label: '{{ __("Events Created") }}',
                data: eventsData.map(item => item.count),
                borderColor: 'rgb(78, 115, 223)',
                backgroundColor: 'rgba(78, 115, 223, 0.1)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '{{ __("Events Created Over Time") }}'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });

    // Status distribution chart
    const statusData = {
        labels: ['{{ __("Published") }}', '{{ __("Draft") }}', '{{ __("Archived") }}'],
        datasets: [{
            data: [{{ $stats['published_events'] }}, {{ $stats['total_events'] - $stats['published_events'] - 1 }}, 1], // Sample data
            backgroundColor: [
                'rgb(40, 167, 69)',
                'rgb(255, 193, 7)',
                'rgb(108, 117, 125)'
            ],
            hoverOffset: 4
        }]
    };

    const statusChart = new Chart(document.getElementById('statusChart'), {
        type: 'doughnut',
        data: statusData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                }
            }
        }
    });
});
</script>
@endsection