@extends('layouts.admin')

@section('title', __('admin.menu.generated_quizzes'))

@section('content')
<div class="page-header">
    <div>
        <h1>{{ __('admin.quizzes.generated.title') }}</h1>
        <p>{{ __('admin.quizzes.generated.subtitle') }}</p>
    </div>
</div>

<div class="stats-grid mb-4">
    <div class="stat-card">
        <div class="stat-icon orange">
            <i class="bi bi-clipboard-check-fill"></i>
        </div>
        <div class="stat-content">
            <div class="stat-label">{{ __('admin.quizzes.generated.stats.total_quizzes') }}</div>
            <div class="stat-value">{{ number_format($stats['total_quizzes']) }}</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon green">
            <i class="bi bi-check-circle-fill"></i>
        </div>
        <div class="stat-content">
            <div class="stat-label">{{ __('admin.quizzes.generated.stats.completed_quizzes') }}</div>
            <div class="stat-value">{{ number_format($stats['completed_quizzes']) }}</div>
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon blue">
            <i class="bi bi-percent"></i>
        </div>
        <div class="stat-content">
            <div class="stat-label">{{ __('admin.quizzes.generated.stats.average_success_rate') }}</div>
            <div class="stat-value">{{ number_format($stats['average_success_rate'], 1) }}%</div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body p-3">
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <select class="form-select" id="subject-filter" name="subject_id">
                    <option value="">{{ __('admin.quizzes.generated.filters.all_subjects') }}</option>
                    @foreach($subjects as $subject)
                        <option value="{{ $subject->id }}" {{ request('subject_id') == $subject->id ? 'selected' : '' }}>
                            {{ $subject->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="score-filter" name="score_filter">
                    <option value="">{{ __('admin.quizzes.generated.filters.all_scores') }}</option>
                    <option value="excellent" {{ request('score_filter') == 'excellent' ? 'selected' : '' }}>{{ __('admin.quizzes.generated.filters.excellent') }} (≥80%)</option>
                    <option value="good" {{ request('score_filter') == 'good' ? 'selected' : '' }}>{{ __('admin.quizzes.generated.filters.good') }} (60-79%)</option>
                    <option value="poor" {{ request('score_filter') == 'poor' ? 'selected' : '' }}>{{ __('admin.quizzes.generated.filters.poor') }} (<60%)</option>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" id="date-filter" name="date_filter">
                    <option value="">{{ __('admin.quizzes.generated.filters.all_dates') }}</option>
                    <option value="today" {{ request('date_filter') == 'today' ? 'selected' : '' }}>{{ __('admin.quizzes.generated.filters.today') }}</option>
                    <option value="yesterday" {{ request('date_filter') == 'yesterday' ? 'selected' : '' }}>{{ __('admin.quizzes.generated.filters.yesterday') }}</option>
                    <option value="week" {{ request('date_filter') == 'week' ? 'selected' : '' }}>{{ __('admin.quizzes.generated.filters.this_week') }}</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control" id="search-input" name="search" placeholder="{{ __('admin.quizzes.generated.search_placeholder') }}" value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                @if(request('subject_id') || request('score_filter') || request('date_filter') || request('search'))
                <button type="button" class="btn btn-outline-secondary w-100" id="reset-filters">
                    <i class="bi bi-arrow-counterclockwise me-1"></i>{{ __('admin.students.reset_filters') }}
                </button>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>{{ __('admin.quizzes.generated.table.user') }}</th>
                <th>{{ __('admin.quizzes.generated.table.subject') }}</th>
                <th>{{ __('admin.quizzes.generated.table.questions') }}</th>
                <th>{{ __('admin.quizzes.generated.table.score') }}</th>
                <th>{{ __('admin.quizzes.generated.table.date') }}</th>
                <th>{{ __('admin.quizzes.generated.table.actions') }}</th>
            </tr>
        </thead>
        <tbody>
            @forelse($quizzes as $quiz)
                @php
                    $badgeClass = 'bg-success';
                    if ($quiz->score_percentage < 60) {
                        $badgeClass = 'bg-danger';
                    } elseif ($quiz->score_percentage < 80) {
                        $badgeClass = 'bg-warning text-dark';
                    }
                @endphp
                <tr>
                    <td>
                        <a href="{{ route('admin.customers.show', $quiz->user_id) }}" class="text-decoration-none">
                            {{ $quiz->user->first_name }} {{ $quiz->user->last_name }}
                        </a>
                    </td>
                    <td>
                        <a href="{{ route('admin.quizzes.show', $quiz->id) }}" class="text-decoration-none">
                            {{ $quiz->subject->name }}@if($quiz->chapter) - {{ $quiz->chapter->name }}@endif
                        </a>
                    </td>
                    <td>{{ $quiz->total_questions }}</td>
                    <td><span class="badge {{ $badgeClass }}">{{ $quiz->points_earned }}/{{ $quiz->total_possible_points }} ({{ number_format($quiz->score_percentage, 0) }}%)</span></td>
                    <td>{{ $quiz->completed_at->diffForHumans() }}</td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-three-dots-vertical"></i> Actions
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{{ route('admin.quizzes.show', $quiz->id) }}">
                                        <i class="bi bi-eye text-primary"></i> {{ __('admin.quizzes.generated.actions.view_details') }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="text-center text-muted py-4">
                        <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                        {{ __('admin.quizzes.generated.no_quizzes') }}
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Pagination -->
<div class="d-flex justify-content-center mt-4">
    {{ $quizzes->appends(request()->query())->links() }}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const subjectFilter = document.getElementById('subject-filter');
    const scoreFilter = document.getElementById('score-filter');
    const dateFilter = document.getElementById('date-filter');
    const searchInput = document.getElementById('search-input');

    // Reload page with filters when changed
    function applyFilters() {
        const url = new URL(window.location.href);

        // Clear existing filter params
        url.searchParams.delete('subject_id');
        url.searchParams.delete('score_filter');
        url.searchParams.delete('date_filter');
        url.searchParams.delete('search');
        url.searchParams.delete('page'); // Reset to first page when filtering

        // Add new filter values
        if (subjectFilter.value) url.searchParams.set('subject_id', subjectFilter.value);
        if (scoreFilter.value) url.searchParams.set('score_filter', scoreFilter.value);
        if (dateFilter.value) url.searchParams.set('date_filter', dateFilter.value);
        if (searchInput.value) url.searchParams.set('search', searchInput.value);

        window.location.href = url.toString();
    }

    // Event listeners for filters
    subjectFilter.addEventListener('change', applyFilters);
    scoreFilter.addEventListener('change', applyFilters);
    dateFilter.addEventListener('change', applyFilters);

    // Debounce search input
    let searchTimeout;
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(applyFilters, 500);
    });

    // Reset filters button
    const resetButton = document.getElementById('reset-filters');
    if (resetButton) {
        resetButton.addEventListener('click', function() {
            window.location.href = window.location.pathname;
        });
    }
});
</script>
@endsection