@extends('layouts.app')

@section('content')

@include('import_question_ems.partials.styles')

<div id="main-content">
    <div class="container-fluid">
        <div class="row">
            <div id="region-main" class="content-col col-md-12">
                <div id="page-content">
                    <span class="notifications">
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif
                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif
                    </span>
                    
                    <div role="main">
                        <span id="maincontent"></span>
                        
                        <!-- Header -->
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2>Thống kê câu hỏi Import</h2>
                        </div>

                        <!-- Statistics Cards -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="card bg-primary text-white">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <h4>{{ $totalQuestions }}</h4>
                                                <p class="mb-0">Tổng số câu hỏi</p>
                                            </div>
                                            <div class="align-self-center">
                                                <i class="fas fa-question-circle fa-2x"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card bg-success text-white">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <h4>{{ $successQuestions }}</h4>
                                                <p class="mb-0">Thành công</p>
                                            </div>
                                            <div class="align-self-center">
                                                <i class="fas fa-check-circle fa-2x"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card bg-danger text-white">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <h4>{{ $failQuestions }}</h4>
                                                <p class="mb-0">Thất bại</p>
                                            </div>
                                            <div class="align-self-center">
                                                <i class="fas fa-times-circle fa-2x"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Search Form -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">Tìm kiếm và lọc</h5>
                            </div>
                            <div class="card-body">
                                <form method="GET" action="{{ route('import-question-ems.index') }}" id="searchForm">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="search">Tìm kiếm</label>
                                                <input type="text" 
                                                       class="form-control" 
                                                       id="search" 
                                                       name="search" 
                                                       value="{{ request('search') }}"
                                                       placeholder="Nhập Question ID, EMS ID hoặc tên câu hỏi...">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="status">Trạng thái</label>
                                                <select class="form-control" id="status" name="status">
                                                    <option value="">Tất cả trạng thái</option>
                                                    <option value="2" {{ request('status') == '2' ? 'selected' : '' }}>Thành công</option>
                                                    <option value="3" {{ request('status') == '3' ? 'selected' : '' }}>Thất bại</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label>&nbsp;</label>
                                                <div class="d-flex gap-2">
                                                    <button type="submit" class="btn btn-primary">
                                                        <i class="fas fa-search"></i> Tìm kiếm
                                                    </button>
                                                    <a href="{{ route('import-question-ems.index') }}" class="btn btn-secondary">
                                                        <i class="fas fa-refresh"></i> Reset
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                        <!-- Data Table -->
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">Danh sách câu hỏi</h5>
                                <small class="text-muted">
                                    Hiển thị {{ $questions->firstItem() ?? 0 }} - {{ $questions->lastItem() ?? 0 }} 
                                    trong tổng số {{ $questions->total() }} kết quả
                                </small>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover">
                                        <thead class="table-dark">
                                            <tr>
                                                <th>Question ID</th>
                                                <th>EMS ID</th>
                                                <th>Tên câu hỏi</th>
                                                <th>Loại câu hỏi</th>
                                                <th>Trạng thái</th>
                                                <th>Quiz ID</th>
                                                <th>Tên Quiz</th>
                                                <th>Course ID</th>
                                                <th>LMS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($questions as $question)
                                            <tr>
                                                <td>{{ $question->question_id }}</td>
                                                <td>{{ $question->ems_question_id ?? 'N/A' }}</td>
                                                <td>{{ Str::limit($question->question_name, 80) }}</td>
                                                <td>{{ $question->question_type }}</td>
                                                <td>
                                                    @if($question->status == 2)
                                                        <span class="badge bg-success"><i class="fas fa-check"></i> Thành công</span>
                                                    @elseif($question->status == 3)
                                                        <span class="badge bg-danger"><i class="fas fa-times"></i> Thất bại</span>
                                                    @else
                                                        <span class="badge bg-warning"><i class="fas fa-question"></i> Không xác định</span>
                                                    @endif
                                                </td>
                                                <td>{{ $question->quiz_id }}</td>
                                                <td>{{ $question->quiz_name }}</td>
                                                <td>{{ $question->course_id }}</td>
                                                <td>{{ $question->lms_name }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="10" class="text-center py-4">
                                                    <div class="empty-state">
                                                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                                                        <h5 class="text-muted">Không tìm thấy dữ liệu</h5>
                                                        <p class="text-muted">Thử thay đổi từ khóa tìm kiếm hoặc bộ lọc</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- Pagination -->
                                @if($questions->hasPages())
                                    <div class="d-flex justify-content-center mt-4">
                                        {{ $questions->appends(request()->query())->links() }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="notification" class="notification"></div>

@include('import_question_ems.partials.scripts')
@endsection