@extends('layouts.admin_lbb')

@section('page-title', 'Kelola Peserta Ujian')

@section('content')
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.exams.index') }}">Ujian</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.exam.detail', $exam->exam_code) }}">{{ $exam->name }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Kelola Peserta</li>
    </ol>
</nav>

<!-- Exam Info Card -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h4 class="fw-bold mb-2">{{ $exam->name }}</h4>
                <p class="text-muted mb-2">{{ $exam->description ?? 'Tanpa deskripsi' }}</p>
                <div class="d-flex flex-wrap gap-3 mb-2">
                    <div><i class="bi bi-calendar3 me-2 text-primary"></i>{{ $exam->start_date->format('d M Y, H:i') }} - {{ $exam->end_date->format('H:i') }}</div>
                    <div><i class="bi bi-clock me-2 text-primary"></i>{{ $exam->duration }} menit</div>
                </div>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="d-flex flex-wrap gap-2 justify-content-md-end">
                    <button class="btn btn-outline-secondary" onclick="location.href='{{ route('admin.exam.detail', $exam->exam_code) }}'">
                        <i class="bi bi-arrow-left"></i>
                        Kembali
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row g-3 mb-4">
    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon primary">
                    <i class="bi bi-people-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $registeredParticipantsCount }}</div>
                <div class="stat-label">Peserta Terdaftar</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon secondary">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $completedParticipantsCount }}</div>
                <div class="stat-label">Sudah Mengerjakan</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon warning">
                    <i class="bi bi-person-plus-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $availableStudentsCount }}</div>
                <div class="stat-label">Siswa Tersedia</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon success">
                    <i class="bi bi-clock-history"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $exam->duration }} Menit</div>
                <div class="stat-label">Durasi Ujian</div>
            </div>
        </div>
    </div>
</div>

<!-- Tabs -->
<div class="card mb-4">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" id="participantsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="registered-tab" data-bs-toggle="tab" data-bs-target="#registered" type="button" role="tab">
                    <i class="bi bi-people-fill me-2"></i>
                    Peserta Terdaftar ({{ $registeredParticipantsCount }})
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="available-tab" data-bs-toggle="tab" data-bs-target="#available" type="button" role="tab">
                    <i class="bi bi-person-plus me-2"></i>
                    Tambah Peserta ({{ $availableStudentsCount }})
                </button>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="participantsTabsContent">
            <!-- Registered Participants Tab -->
            <div class="tab-pane fade show active" id="registered" role="tabpanel">
                <!-- Search & Filter -->
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <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 kelas..." id="searchRegistered" onkeyup="filterTable('registered')">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filterClassRegistered" onchange="filterTable('registered')">
                            <option value="">Semua Kelas</option>
                            @foreach($classes as $class)
                                <option value="{{ $class->id }}">{{ $class->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filterStatusRegistered" onchange="filterTable('registered')">
                            <option value="">Semua Status</option>
                            <option value="completed">Sudah Mengerjakan</option>
                            <option value="not_started">Belum Mengerjakan</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-outline-danger w-100" id="deleteSelectedBtn" onclick="deleteSelected()" disabled>
                            <i class="bi bi-trash me-1"></i>
                            Hapus
                        </button>
                    </div>
                </div>

                <!-- Registered Participants Table -->
                <div class="table-responsive">
                    <table class="table" id="registeredTable">
                        <thead>
                            <tr>
                                <th width="50">
                                    <input type="checkbox" class="form-check-input" id="selectAllRegistered" onclick="toggleSelectAll(this)">
                                </th>
                                <th>Nama Siswa</th>
                                <th>Kelas</th>
                                <th>Tanggal Terdaftar</th>
                                <th>Status Pengerjaan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="registeredTableBody">
                            @foreach($registeredParticipants as $participant)
                            <tr data-student-id="{{ $participant->student_id }}"
                                data-student-name="{{ $participant->student->user->name }}"
                                data-class-id="{{ $participant->student->class_id }}"
                                data-status="{{ $participant->examAttempts()->exists() ? 'completed' : 'not_started' }}">
                                <td data-label="">
                                    <input type="checkbox" class="form-check-input participant-checkbox" value="{{ $participant->id }}" onchange="handleCheckboxChange('registered')">
                                </td>
                                <td data-label="Nama Siswa">
                                    <div class="fw-bold">{{ $participant->student->user->name }}</div>
                                    <small class="text-muted">{{ $participant->student->user->email }}</small>
                                </td>
                                <td data-label="Kelas">{{ $participant->student->classModel->name }}</td>
                                <td data-label="Tanggal Terdaftar">{{ $participant->registered_at->format('d M Y, H:i') }}</td>
                                <td data-label="Status Pengerjaan">
                                    @if($participant->examAttempts()->exists())
                                        <span class="badge badge-success">Sudah Mengerjakan</span>
                                        @if($participant->examAttempts->count() > 1)
                                            <span class="badge badge-info ms-1">{{ $participant->examAttempts->count() }}× Attempt</span>
                                        @endif
                                    @else
                                        <span class="badge badge-warning">Belum Mengerjakan</span>
                                    @endif
                                </td>
                                <td data-label="Aksi">
                                    <div class="btn-group" role="group">
                                        @if($participant->examAttempts()->exists())
                                            @php
                                                $latestAttempt = $participant->examAttempts()->latest()->first();
                                            @endphp
                                            <a href="{{ route('admin.exam.participants.cheating-logs', [$exam->exam_code, $participant->id, $latestAttempt->id]) }}"
                                               class="btn btn-sm btn-outline-warning"
                                               title="Lihat Log Kecurangan">
                                                <i class="bi bi-shield-exclamation"></i>
                                            </a>
                                        @endif
                                        <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('{{ $participant->id }}', '{{ $participant->student->user->name }}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Available Students Tab -->
            <div class="tab-pane fade" id="available" role="tabpanel">
                <!-- Search & Filter -->
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <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 kelas..." id="searchAvailable" onkeyup="filterTable('available')">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filterClassAvailable" onchange="filterTable('available')">
                            <option value="">Semua Kelas</option>
                            @foreach($classes as $class)
                                <option value="{{ $class->id }}">{{ $class->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filterStatusAvailable" onchange="filterTable('available')">
                            <option value="">Semua Status</option>
                            <option value="active">Aktif</option>
                            <option value="inactive">Nonaktif</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-success w-100" id="addSelectedBtn" onclick="addSelected()" disabled>
                            <i class="bi bi-plus-circle me-1"></i>
                            Tambah
                        </button>
                    </div>
                </div>

                <!-- Available Students Table -->
                <div class="table-responsive">
                    <table class="table" id="availableTable">
                        <thead>
                            <tr>
                                <th width="50">
                                    <input type="checkbox" class="form-check-input" id="selectAllAvailable" onclick="toggleSelectAll(this)">
                                </th>
                                <th>Nama Siswa</th>
                                <th>Kelas</th>
                                <th>Email</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="availableTableBody">
                            @foreach($availableStudents as $student)
                            <tr data-student-id="{{ $student->id }}"
                                data-student-name="{{ $student->user->name }}"
                                data-class-id="{{ $student->class_id }}"
                                data-status="{{ $student->status->value }}">
                                <td data-label="">
                                    <input type="checkbox" class="form-check-input student-checkbox" value="{{ $student->id }}" onchange="handleCheckboxChange('available')">
                                </td>
                                <td data-label="Nama Siswa">
                                    <div class="fw-bold">{{ $student->user->name }}</div>
                                    <small class="text-muted">{{ $student->user->phone }}</small>
                                </td>
                                <td data-label="Kelas">{{ $student->classModel->name }}</td>
                                <td data-label="Email">{{ $student->user->email }}</td>
                                <td data-label="Status">
                                    @if($student->status->value === 'active')
                                        <span class="badge badge-success">Aktif</span>
                                    @else
                                        <span class="badge badge-secondary">Nonaktif</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden Forms -->
<form id="addParticipantsForm" method="POST" action="{{ route('admin.exam.participants.add', $exam->exam_code) }}">
    @csrf
    <div id="studentIdsContainer"></div>
</form>

<form id="deleteParticipantsForm" method="POST" action="{{ route('admin.exam.participants.delete', $exam->exam_code) }}">
    @csrf
    @method('DELETE')
    <div id="participantIdsContainer"></div>
</form>

<script>
// Toggle select all checkboxes
function toggleSelectAll(selectAllCheckbox) {
    console.log('=== toggleSelectAll START ===', { checked: selectAllCheckbox.checked, id: selectAllCheckbox.id });
    
    // Determine type from checkbox ID
    const type = selectAllCheckbox.id === 'selectAllRegistered' ? 'registered' : 'available';
    const checkboxClass = type === 'registered' ? 'participant-checkbox' : 'student-checkbox';
    
    // Get all checkboxes using getElementsByClassName (more reliable)
    const checkboxes = document.getElementsByClassName(checkboxClass);
    console.log('Found checkboxes:', checkboxes.length, 'selecting:', selectAllCheckbox.checked);
    
    // Check/uncheck all checkboxes (including hidden ones)
    for (let i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = selectAllCheckbox.checked;
    }
    
    console.log('=== toggleSelectAll END ===');
    
    if (type === 'registered') {
        updateDeleteButton();
    } else {
        updateAddButton();
    }
}

// Handle individual checkbox change to update select all state
function handleCheckboxChange(type) {
    console.log('=== handleCheckboxChange START ===', { type });
    
    const selectAllId = 'selectAll' + type.charAt(0).toUpperCase() + type.slice(1);
    const selectAll = document.getElementById(selectAllId);
    const checkboxClass = type === 'registered' ? 'participant-checkbox' : 'student-checkbox';
    
    if (!selectAll) {
        console.error('SelectAll checkbox not found:', selectAllId);
        return;
    }
    
    // Get all checkboxes using getElementsByClassName
    const checkboxes = document.getElementsByClassName(checkboxClass);
    let allChecked = true;
    
    for (let i = 0; i < checkboxes.length; i++) {
        if (!checkboxes[i].checked) {
            allChecked = false;
            break;
        }
    }
    
    // Update select all checkbox state
    selectAll.checked = allChecked && checkboxes.length > 0;
    
    console.log('=== handleCheckboxChange END ===', { total: checkboxes.length, allChecked, selectAllChecked: selectAll.checked });
    
    if (type === 'registered') {
        updateDeleteButton();
    } else {
        updateAddButton();
    }
}

// Filter table based on search and filters
function filterTable(type) {
    const search = document.getElementById('search' + type.charAt(0).toUpperCase() + type.slice(1)).value.toLowerCase();
    const classFilter = document.getElementById('filterClass' + type.charAt(0).toUpperCase() + type.slice(1)).value;
    const statusFilter = document.getElementById('filterStatus' + type.charAt(0).toUpperCase() + type.slice(1)).value;
    
    console.log('=== filterTable START ===', { type, search, classFilter, statusFilter });
    
    const rows = document.querySelectorAll('#' + type + 'Table tbody tr');
    
    rows.forEach(row => {
        const studentName = row.getAttribute('data-student-name').toLowerCase();
        const classId = row.getAttribute('data-class-id');
        const status = row.getAttribute('data-status');
        
        const matchesSearch = studentName.includes(search);
        const matchesClass = !classFilter || String(classId) === String(classFilter);
        const matchesStatus = !statusFilter || status === statusFilter;
        
        console.log('Row:', { studentName, classId, status, matchesSearch, matchesClass, matchesStatus });
        
        row.style.display = matchesSearch && matchesClass && matchesStatus ? '' : 'none';
    });
    
    console.log('=== filterTable END ===');
    
    // Uncheck "Select All" checkbox when filter changes
    const selectAllId = 'selectAll' + type.charAt(0).toUpperCase() + type.slice(1);
    const selectAll = document.getElementById(selectAllId);
    if (selectAll) {
        selectAll.checked = false;
    }
    
    // Uncheck all checkboxes when filter changes
    const checkboxClass = type === 'registered' ? 'participant-checkbox' : 'student-checkbox';
    const checkboxes = document.querySelectorAll('.' + checkboxClass);
    checkboxes.forEach(cb => cb.checked = false);
    
    // Disable action button
    if (type === 'registered') {
        updateDeleteButton();
    } else {
        updateAddButton();
    }
}

// Update delete button state
function updateDeleteButton() {
    const checkboxes = document.querySelectorAll('.participant-checkbox:checked');
    const btn = document.getElementById('deleteSelectedBtn');
    btn.disabled = checkboxes.length === 0;
}

// Update add button state
function updateAddButton() {
    const checkboxes = document.querySelectorAll('.student-checkbox:checked');
    const btn = document.getElementById('addSelectedBtn');
    btn.disabled = checkboxes.length === 0;
}

// Add selected students
function addSelected() {
    const checkboxes = document.querySelectorAll('.student-checkbox:checked');
    const studentIds = Array.from(checkboxes).map(cb => cb.value);
    
    if (studentIds.length === 0) {
        AppAlert.warning('Silakan pilih siswa terlebih dahulu');
        return;
    }
    
    AppAlert.create(
        'Konfirmasi',
        'Apakah Anda yakin ingin menambahkan ' + studentIds.length + ' siswa ke ujian ini?',
        () => {
            // Create hidden input elements for each student ID
            const container = document.getElementById('studentIdsContainer');
            container.innerHTML = ''; // Clear previous inputs
            
            studentIds.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'student_ids[]';
                input.value = id;
                container.appendChild(input);
            });
            
            document.getElementById('addParticipantsForm').submit();
        }
    );
}

// Delete selected participants
function deleteSelected() {
    const checkboxes = document.querySelectorAll('.participant-checkbox:checked');
    const participantIds = Array.from(checkboxes).map(cb => cb.value);
    
    if (participantIds.length === 0) {
        AppAlert.warning('Silakan pilih peserta terlebih dahulu');
        return;
    }
    
    AppAlert.delete(
        'Konfirmasi',
        'Apakah Anda yakin ingin menghapus ' + participantIds.length + ' peserta dari ujian ini?',
        () => {
            // Create hidden input elements for each participant ID
            const container = document.getElementById('participantIdsContainer');
            container.innerHTML = ''; // Clear previous inputs
            
            participantIds.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'participant_ids[]';
                input.value = id;
                container.appendChild(input);
            });
            
            document.getElementById('deleteParticipantsForm').submit();
        }
    );
}

// Confirm single delete
function confirmDelete(participantId, studentName) {
    AppAlert.delete(
        'Konfirmasi',
        'Apakah Anda yakin ingin menghapus peserta "' + studentName + '" dari ujian ini?',
        () => {
            // Create hidden input element for the participant ID
            const container = document.getElementById('participantIdsContainer');
            container.innerHTML = ''; // Clear previous inputs
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'participant_ids[]';
            input.value = participantId;
            container.appendChild(input);
            
            document.getElementById('deleteParticipantsForm').submit();
        }
    );
}
</script>
@endsection