@extends('layouts.admin_lbb')

@section('page-title', 'Manajemen Ujian')

@section('content')
<div class="row g-3 mb-4">
    <!-- Stat Cards -->
    <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon primary">
                    <i class="bi bi-file-earmark-text-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $totalExams }}</div>
                <div class="stat-label">Total Ujian</div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon secondary">
                    <i class="bi bi-play-circle-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $activeExams }}</div>
                <div class="stat-label">Ujian Aktif</div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon warning">
                    <i class="bi bi-dash-circle-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $nonactiveExams }}</div>
                <div class="stat-label">Nonaktif</div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon success">
                    <i class="bi bi-people-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $totalParticipants }}</div>
                <div class="stat-label">Total Peserta</div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <i class="bi bi-file-earmark-text me-2"></i>
            Daftar Ujian
        </div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createExamModal">
            <i class="bi bi-plus-circle me-1"></i>
            Buat Ujian Baru
        </button>
    </div>
    <div class="card-body">
        <!-- Search & Filter -->
        <form method="GET" action="{{ route('admin.exams.index') }}">
            <div class="row g-3 mb-4">
                <div class="col-md-4 col-sm-12">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" class="form-control" placeholder="Cari nama atau kode ujian..." name="search" value="{{ $search }}">
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <select class="form-select" name="status">
                        <option value="">Semua Status</option>
                        <option value="active" {{ $filterStatus === 'active' ? 'selected' : '' }}>Aktif</option>
                        <option value="inactive" {{ $filterStatus === 'inactive' ? 'selected' : '' }}>Nonaktif</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-6">
                    <select class="form-select" name="type">
                        <option value="">Semua Tipe</option>
                        <option value="tryout" {{ $filterType === 'tryout' ? 'selected' : '' }}>Tryout</option>
                        <option value="daily" {{ $filterType === 'daily' ? 'selected' : '' }}>Ujian Harian</option>
                        <option value="simulation" {{ $filterType === 'simulation' ? 'selected' : '' }}>Simulasi</option>
                    </select>
                </div>
                @if(request('search') || request('status') || request('type'))
                <div class="col-md-1 col-6">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-outline-primary flex-grow-1">
                            <i class="bi bi-funnel"></i>
                        </button>
                    </div>
                </div>
                <div class="col-md-1 col-6">
                    <div class="d-flex gap-2">
                        <a href="{{ route('admin.exams.index') }}" class="btn btn-outline-secondary flex-grow-1">
                            <i class="bi bi-x-circle"></i>
                        </a>
                    </div>
                </div>
                @else
                <div class="col-md-2 col-12">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-secondary flex-grow-1">
                            <i class="bi bi-funnel"></i>
                            <span class="d-none d-sm-inline">Filter</span>
                        </button>
                    </div>
                </div>              
                @endif
            </div>
        </form>
        
        <!-- Table -->
        <div class="table-responsive">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()">
                    <label class="form-check-label" for="selectAllCheckbox">
                        <strong>Pilih Semua</strong>
                    </label>
                </div>
                <button class="btn btn-danger d-none" id="deleteSelectedBtn" onclick="deleteSelectedExams()">
                    <i class="bi bi-trash me-1"></i>
                    Hapus Terpilih (<span id="selectedCount">0</span>)
                </button>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 50px;">
                            <!-- Select All header checkbox - hidden, handled by main checkbox above -->
                        </th>
                        <th>Nama Ujian</th>
                        <th>Kode</th>
                        <th>Tanggal</th>
                        <th>Durasi</th>
                        <th>Max Attempt</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($exams as $exam)
                    <tr data-exam-id="{{ $exam->id }}">
                        <td>
                            <input class="form-check-input exam-checkbox" type="checkbox" value="{{ $exam->id }}" onchange="updateSelectedCount()">
                        </td>
                        <td data-label="Nama Ujian">
                            <div class="fw-bold">{{ $exam->name }}</div>
                            <small class="text-muted">{{ $exam->exam_type === 'tryout' ? 'Tryout' : ($exam->exam_type === 'daily' ? 'Ujian Harian' : 'Simulasi') }}</small>
                        </td>
                        <td data-label="Kode"><code>{{ $exam->exam_code }}</code></td>
                        <td data-label="Tanggal">
                            <div>{{ $exam->start_date->format('d M Y') }}</div>
                            <small class="text-muted">{{ $exam->start_date->format('H:i') }} - {{ $exam->end_date->format('H:i') }}</small>
                        </td>
                        <td data-label="Durasi">{{ $exam->duration }} menit</td>
                        <td data-label="Max Attempt">{{ $exam->max_attempt >= 999 ? 'Unlimited' : $exam->max_attempt . 'x' }}</td>
                        <td data-label="Status">
                            @if($exam->status->value === 'active')
                                <span class="badge badge-success">Aktif</span>
                            @else
                                <span class="badge badge-secondary">Nonaktif</span>
                            @endif
                        </td>
                        <td data-label="Aksi">
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" onclick="location.href='/admin/exam/{{ $exam->exam_code }}/detail'">
                                    <i class="bi bi-eye"></i>
                                </button>
                                <button class="btn btn-outline-warning" onclick="editExam({{ $exam->id }})">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-outline-danger" onclick="deleteExam({{ $exam->id }})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr class="empty-state">
                        <td colspan="8" class="text-center py-5" data-label="">
                            <i class="bi bi-inbox display-4 text-muted"></i>
                            <p class="text-muted mt-3">Tidak ada ujian ditemukan</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="card-footer d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <span class="me-2">Tampilkan:</span>
                <select class="form-select form-select-sm" style="width: auto;" onchange="changePerPage(this.value)">
                    <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                    <option value="10" {{ request('per_page') == 10 || !request('per_page') ? 'selected' : '' }}>10</option>
                    <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                </select>
                <span class="ms-2">per halaman</span>
            </div>
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    @if($exams->onFirstPage())
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                        </li>
                    @else
                        <li class="page-item">
                            <a class="page-link" href="{{ $exams->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                        </li>
                    @endif
                    
                    @foreach($exams->getUrlRange(1, $exams->lastPage()) as $page => $url)
                        @if($page == $exams->currentPage())
                            <li class="page-item active">
                                <span class="page-link">{{ $page }}</span>
                            </li>
                        @elseif($page == 1 || $page == $exams->lastPage() || ($page >= $exams->currentPage() - 1 && $page <= $exams->currentPage() + 1))
                            <li class="page-item">
                                <a class="page-link" href="{{ $exams->appends(request()->query())->url($page) }}">{{ $page }}</a>
                            </li>
                        @elseif($page == $exams->currentPage() - 2 || $page == $exams->currentPage() + 2)
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        @endif
                    @endforeach

                    @if($exams->hasMorePages())
                        <li class="page-item">
                            <a class="page-link" href="{{ $exams->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a>
                        </li>
                    @else
                        <li class="page-item disabled">
                            <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                        </li>
                    @endif
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- Modal Buat Ujian Baru -->
<div class="modal fade" id="createExamModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-plus-circle me-2"></i>
                    Buat Ujian Baru
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('admin.exams.store') }}" id="createExamForm">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Nama Ujian</label>
                            <input type="text" class="form-control" name="name" placeholder="Masukkan nama ujian" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kode Ujian</label>
                            <input type="text" class="form-control" name="exam_code" placeholder="Contoh: EXAM-001" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Mulai</label>
                            <input type="datetime-local" class="form-control" name="start_date" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Selesai</label>
                            <input type="datetime-local" class="form-control" name="end_date" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Durasi (menit)</label>
                            <input type="number" class="form-control" name="duration" value="60" min="1" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Max Attempt</label>
                            <select class="form-select" name="max_attempt" required>
                                <option value="1">1x</option>
                                <option value="2">2x</option>
                                <option value="3">3x</option>
                                <option value="5">5x</option>
                                <option value="unlimited">Unlimited</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipe Ujian</label>
                            <select class="form-select" name="exam_type" required>
                                <option value="tryout">Tryout</option>
                                <option value="daily">Ujian Harian</option>
                                <option value="simulation">Simulasi</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Passing Grade</label>
                            <input type="number" class="form-control" name="passing_grade" value="60" min="0" max="100" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Deskripsi</label>
                            <textarea class="form-control" rows="3" name="description" placeholder="Deskripsi ujian..."></textarea>
                        </div>
                        <div class="col-12">
                            <small class="text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                Ujian yang dibuat akan berstatus <strong>Nonaktif</strong> secara default. Anda dapat mengaktifkannya melalui menu Edit.
                            </small>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" form="createExamForm" class="btn btn-success">
                    <i class="bi bi-check-lg me-2"></i>
                    Buat Ujian
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Edit Ujian -->
<div class="modal fade" id="editExamModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-pencil me-2"></i>
                    Edit Ujian
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" id="editExamForm" onsubmit="return confirmUpdate()">
                    @csrf
                    @method('PUT')
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Nama Ujian</label>
                            <input type="text" class="form-control" name="name" id="editName" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kode Ujian</label>
                            <input type="text" class="form-control" name="exam_code" id="editCode" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Mulai</label>
                            <input type="datetime-local" class="form-control" name="start_date" id="editStartDate" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Selesai</label>
                            <input type="datetime-local" class="form-control" name="end_date" id="editEndDate" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Durasi (menit)</label>
                            <input type="number" class="form-control" name="duration" id="editDuration" min="15" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Max Attempt</label>
                            <select class="form-select" name="max_attempt" id="editMaxAttempt" required>
                                <option value="1">1x</option>
                                <option value="2">2x</option>
                                <option value="3">3x</option>
                                <option value="5">5x</option>
                                <option value="unlimited">Unlimited</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipe Ujian</label>
                            <select class="form-select" name="exam_type" id="editType" required>
                                <option value="tryout">Tryout</option>
                                <option value="daily">Ujian Harian</option>
                                <option value="simulation">Simulasi</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Passing Grade</label>
                            <input type="number" class="form-control" name="passing_grade" id="editPassingGrade" min="0" max="100" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Deskripsi</label>
                            <textarea class="form-control" rows="3" name="description" id="editDescription"></textarea>
                        </div>
                        <div class="col-12">
                            <h6 class="fw-bold mb-3">Status Ujian</h6>
                            <select class="form-select" name="status" id="editStatus" required>
                                <option value="active">Aktif</option>
                                <option value="inactive">Nonaktif</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" form="editExamForm" class="btn btn-primary">
                    <i class="bi bi-check-lg me-2"></i>
                    Update
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function changePerPage(perPage) {
    // Get current URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    
    // Update or add per_page parameter
    urlParams.set('per_page', perPage);
    
    // Keep other parameters
    if (urlParams.has('page')) {
        urlParams.delete('page');
    }
    
    // Construct new URL
    const newUrl = window.location.pathname + '?' + urlParams.toString();
    
    // Navigate to new URL
    window.location.href = newUrl;
}

function editExam(id) {
    // Fetch exam data via AJAX
    fetch(`/admin/exams/${id}`)
        .then(function(response) {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(function(data) {
            // Populate form fields
            document.getElementById('editName').value = data.name;
            document.getElementById('editCode').value = data.exam_code;
            document.getElementById('editStartDate').value = data.start_date;
            document.getElementById('editEndDate').value = data.end_date;
            document.getElementById('editDuration').value = data.duration;
            document.getElementById('editMaxAttempt').value = data.max_attempt >= 999 ? 'unlimited' : data.max_attempt;
            document.getElementById('editType').value = data.exam_type;
            document.getElementById('editPassingGrade').value = data.passing_grade;
            document.getElementById('editDescription').value = data.description || '';
            document.getElementById('editStatus').value = data.status;
            
            // Set form action
            document.getElementById('editExamForm').action = `/admin/exams/${id}`;
            
            // Show modal
            const modal = new bootstrap.Modal(document.getElementById('editExamModal'));
            modal.show();
        })
        .catch(function(error) {
            console.error('Error:', error);
            AppAlert.error('Gagal mengambil data ujian');
        });
}

function confirmUpdate() {
    const name = document.getElementById('editName').value;
    AppAlert.update(
        'Update Data Ujian',
        'Apakah Anda yakin ingin mengupdate data untuk <strong>' + name + '</strong>?',
        function() {
            document.getElementById('editExamForm').submit();
        }
    );
    return false;
}

function deleteExam(id) {
    AppAlert.delete(
        'Hapus Ujian',
        'Apakah Anda yakin ingin menghapus ujian ini?<br><br><small class="text-danger fw-bold">Tindakan ini tidak dapat dibatalkan!</small>',
        function() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/exams/${id}`;
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            document.body.appendChild(form);
            form.submit();
        }
    );
}

function toggleSelectAll() {
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    const shouldCheck = selectAllCheckbox.checked;
    
    const checkboxes = document.querySelectorAll('.exam-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = shouldCheck;
    });
    
    updateSelectedCount();
}

function updateSelectedCount() {
    const checkboxes = document.querySelectorAll('.exam-checkbox');
    const checkedCheckboxes = document.querySelectorAll('.exam-checkbox:checked');
    const count = checkedCheckboxes.length;
    const totalCount = checkboxes.length;
    
    document.getElementById('selectedCount').textContent = count;
    
    const deleteBtn = document.getElementById('deleteSelectedBtn');
    if (count > 0) {
        deleteBtn.classList.remove('d-none');
    } else {
        deleteBtn.classList.add('d-none');
    }
    
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    if (count === 0) {
        selectAllCheckbox.checked = false;
    } else if (count === totalCount) {
        selectAllCheckbox.checked = true;
    } else {
        selectAllCheckbox.checked = false;
    }
}

function deleteSelectedExams() {
    const checkboxes = document.querySelectorAll('.exam-checkbox:checked');
    const selectedIds = Array.from(checkboxes).map(cb => cb.value);
    
    if (selectedIds.length === 0) {
        return;
    }
    
    AppAlert.delete(
        'Hapus Ujian Terpilih',
        'Apakah Anda yakin ingin menghapus <strong>' + selectedIds.length + ' ujian</strong> yang dipilih?<br><br><small class="text-danger fw-bold">Tindakan ini tidak dapat dibatalkan!</small>',
        function() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/admin/exams/batch-delete';
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            selectedIds.forEach(id => {
                const idInput = document.createElement('input');
                idInput.type = 'hidden';
                idInput.name = 'ids[]';
                idInput.value = id;
                form.appendChild(idInput);
            });
            
            document.body.appendChild(form);
            form.submit();
        }
    );
}
</script>
@endsection