@extends('layouts.admin_lbb')

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

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endpush

@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 active" aria-current="page">{{ $exam->name }}</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><i class="bi bi-cash-coin me-2 text-primary"></i>1 Token / Peserta</div>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    @if($exam->status->value === 'active')
                        <span class="badge badge-success">Aktif</span>
                    @else
                        <span class="badge badge-secondary">Nonaktif</span>
                    @endif
                    @if($exam->exam_type === 'tryout')
                        <span class="badge badge-info">Tryout</span>
                    @elseif($exam->exam_type === 'daily')
                        <span class="badge badge-primary">Ujian Harian</span>
                    @else
                        <span class="badge badge-warning">Simulasi</span>
                    @endif
                    <span class="badge badge-warning">Passing Grade: {{ $exam->passing_grade }}</span>
                </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-primary" onclick="location.href='{{ route('admin.exams.index') }}'">
                        <i class="bi bi-arrow-left"></i>
                        Kembali
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Exam Stats -->
<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-collection-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $packages->count() }}</div>
                <div class="stat-label">Total Paket</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-question-square-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $totalQuestions }}</div>
                <div class="stat-label">Total Soal</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-people-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $registeredParticipants }}</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 success">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $completedAttempts }}</div>
                <div class="stat-label">Sudah Mengerjakan</div>
            </div>
        </div>
    </div>
</div>

<!-- Main Content Row -->
<div class="row">
    <!-- Sidebar: Settings & Quick Actions -->
    <div class="col-lg-3 col-md-4 mb-4">
        <!-- Quick Actions Card -->
        <div class="card mb-4">
            <div class="card-header bg-light">
                <i class="bi bi-lightning-charge me-2"></i>
                Aksi Cepat
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary text-start" onclick="location.href='{{ route('admin.exam.participants.index', $exam->exam_code) }}'">
                        <i class="bi bi-person-plus me-2"></i>
                        Kelola Peserta
                    </button>
                    <button class="btn btn-outline-warning text-start" onclick="location.href='{{ route('admin.exam.leaderboard', $exam->exam_code) }}'">
                        <i class="bi bi-trophy me-2"></i>
                        Leaderboard
                    </button>
                </div>
            </div>
        </div>

        <!-- Exam Settings Card -->
        <div class="card mb-4">
            <div class="card-header bg-light">
                <i class="bi bi-sliders me-2"></i>
                Pengaturan Ujian
            </div>
            <div class="card-body">
                <h6 class="fw-bold mb-3">Pengaturan Paket</h6>

                <form id="examSettingsForm"
                    method="POST"
                    action="{{ route('admin.exam.package.bulk-settings', $exam->exam_code) }}">
                    
                    @csrf
                    <input type="hidden" name="_method" value="PUT">

                    <div class="mb-3">
                        <div class="form-check form-switch mb-2">

                            <input type="hidden" name="random_questions" value="0">

                            <input class="form-check-input"
                                type="checkbox"
                                id="randomQ"
                                name="random_questions"
                                value="1"
                                {{ $examPacketSetting->random_question ? 'checked' : '' }}>

                            <label class="form-check-label" for="randomQ">
                                <i class="bi bi-shuffle me-1 text-primary"></i>
                                Random Question
                            </label>

                        </div>
                    </div>


                    <div class="mb-3">
                        <div class="form-check form-switch">

                            <input type="hidden" name="show_explanation" value="0">

                            <input class="form-check-input"
                                type="checkbox"
                                id="showSolution"
                                name="show_explanation"
                                value="1"
                                {{ $examPacketSetting->show_discussion ? 'checked' : '' }}>

                            <label class="form-check-label" for="showSolution">
                                <i class="bi bi-book me-1 text-primary"></i>
                                Tampilkan Pembahasan
                            </label>

                        </div>
                    </div>


                    <!-- <div class="mb-3">
                        <div class="form-check form-switch">

                            <input type="hidden" name="show_score" value="0">

                            <input class="form-check-input"
                                type="checkbox"
                                id="showScore"
                                name="show_score"
                                value="1"
                                {{ $examPacketSetting->show_score ? 'checked' : '' }}>

                            <label class="form-check-label" for="showScore">
                                <i class="bi bi-graph-up me-1 text-primary"></i>
                                Tampilkan Nilai
                            </label>

                        </div>
                    </div> -->


                    <hr class="my-3">

                    <button type="button" class="btn btn-primary w-100" onclick="confirmSettingPackage()">
                        <i class="bi bi-check-lg me-2"></i>
                        Simpan
                    </button>

                </form>
            </div>
        </div>
    </div>
    
    <!-- Main Content: Package List -->
    <div class="col-lg-9 col-md-8 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="bi bi-collection me-2"></i>
                    Daftar Paket Soal
                </div>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPackageModal">
                    <i class="bi bi-plus-circle me-1"></i>
                    Tambah Paket
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Nama Paket</th>
                                <th>Jumlah Soal</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($packages as $package)
                            <tr>
                                <td data-label="Nama Paket">
                                    <div class="fw-bold">{{ $package->name }}</div>
                                    @if($package->description)
                                        <small class="text-muted">{{ $package->description }}</small>
                                    @endif
                                </td>
                                <td data-label="Jumlah Soal">
                                    <span class="">{{ $package->examPackageQuestions()->count() }}</span>
                                </td>
                                <td data-label="Status">
                                    @if($package->is_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='{{ route('admin.exam.package.detail', [$exam->exam_code, $package->id]) }}'"
                                            title="Lihat Detail">
                                            <i class="bi bi-eye"></i>
                                        </button>

                                        <button class="btn btn-outline-warning"
                                            title="Edit Paket"
                                            data-bs-toggle="modal"
                                            data-bs-target="#editPackageModal"
                                            onclick="loadPackageData(
                                                {{ $package->id }},
                                                '{{ $package->name }}',
                                                {{ $package->is_active ? 'true' : 'false' }},
                                                '{{ route('admin.exam.package.update', [$exam->exam_code, $package->id]) }}'
                                            )">
                                            <i class="bi bi-pencil"></i>
                                        </button>

                                        <button type="button"
                                            class="btn btn-outline-danger"
                                            onclick="deletePackage('delete-form-{{ $package->id }}','{{ $package->name }}')"
                                            title="Hapus Paket">
                                            <i class="bi bi-trash"></i>
                                        </button>

                                    </div>

                                    <form id="delete-form-{{ $package->id }}"
                                        action="{{ route('admin.exam.package.destroy', [$exam->exam_code, $package->id]) }}"
                                        method="POST"
                                        style="display:none">

                                        @csrf
                                        @method('DELETE')

                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-5" data-label="">
                                    <i class="bi bi-inbox display-4 text-muted"></i>
                                    <p class="text-muted mt-3">Belum ada paket soal</p>
                                    <button class="btn btn-primary btn-sm mt-2" data-bs-toggle="modal" data-bs-target="#createPackageModal">
                                        <i class="bi bi-plus-circle me-1"></i>
                                        Buat Paket Pertama
                                    </button>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-center mt-3">
                        {{ $packages->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Edit Paket -->
<div class="modal fade" id="editPackageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-pencil me-2"></i>
                    Edit Paket Soal
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editPackageForm" method="POST" action="">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="package_id" id="editPackageId">
                    <div class="mb-3">
                        <label class="form-label">Nama Paket</label>
                        <input type="text" class="form-control" name="name" id="editPackageName" required>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="hidden" name="is_active" value="0">
                            <input class="form-check-input" type="checkbox" name="is_active" id="editPackageActive" value="1">
                            <label class="form-check-label" for="editPackageActive">
                                Paket Aktif
                            </label>
                        </div>
                        <small class="text-muted">Paket tidak aktif tidak akan ditampilkan ke siswa</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" onclick="confirmUpdatePackage()">
                        <i class="bi bi-check-lg me-2"></i>
                        Update Paket
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Tambah Paket -->
<div class="modal fade" id="createPackageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-plus-circle me-2"></i>
                    Tambah Paket Soal
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="createPackageForm" method="POST" action="{{ route('admin.exam.package.store', $exam->exam_code) }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Paket</label>
                        <input type="text" class="form-control" name="name" placeholder="Contoh: Paket D" required autofocus>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="hidden" name="is_active" value="0">
                            <input class="form-check-input" type="checkbox" name="is_active" id="packageActive" value="1">
                            <label class="form-check-label" for="packageActive">
                                Paket Aktif
                            </label>
                        </div>
                        <small class="text-muted">Paket tidak aktif tidak akan ditampilkan ke siswa</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" onclick="confirmCreatePackage()">
                        <i class="bi bi-plus-lg me-2"></i>
                        Buat Paket
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function loadPackageData(id, name, isActive, routeUrl) {
    document.getElementById('editPackageId').value = id;
    document.getElementById('editPackageName').value = name;
    document.getElementById('editPackageActive').checked = isActive;
    document.getElementById('editPackageForm').action = routeUrl;
    document.getElementById('editPackageForm').method = 'POST';
}

function confirmSettingPackage() {
    if (typeof Swal === 'undefined') {
        alert('SweetAlert2 tidak tersedia. Menggunakan konfirmasi browser default.');
        document.getElementById('examSettingsForm').submit();
        return;
    }

    AppAlert.update(
        'Update Setting?',
        `Apakah Anda yakin ingin mengupdate setting paket ini?`,
        () => document.getElementById('examSettingsForm').submit()
    )
}

function confirmCreatePackage() {
    if (typeof Swal === 'undefined') {
        alert('SweetAlert2 tidak tersedia. Menggunakan konfirmasi browser default.');
        document.getElementById('createPackageForm').submit();
        return;
    }
    
    var packageName = document.querySelector('#createPackageForm input[name="name"]').value;
    
    if (!packageName) {
        AppAlert.warning(
            'Silakan masukkan nama paket terlebih dahulu.'
        )
        return;
    }
    
    AppAlert.create(
        'Buat Paket Baru?',
        `Apakah Anda yakin ingin membuat paket "${packageName}"?`,
        () => document.getElementById('createPackageForm').submit()
    )
}

function confirmUpdatePackage() {
    if (typeof Swal === 'undefined') {
        alert('SweetAlert2 tidak tersedia. Menggunakan konfirmasi browser default.');
        document.getElementById('editPackageForm').submit();
        return;
    }
    
    var packageName = document.querySelector('#editPackageForm input[name="name"]').value;
    
    if (!packageName) {
        AppAlert.update(
            'Silakan masukkan nama paket terlebih dahulu.',
        );
        return;
    }
    
    AppAlert.update(
        'Update Paket?',
        `Apakah Anda yakin ingin mengupdate paket "${packageName}"?`,
        () => document.getElementById('editPackageForm').submit()
    )
}

function deletePackage(formId, packageName) {
    if (typeof Swal === 'undefined') {
        alert('SweetAlert2 tidak tersedia. Menggunakan konfirmasi browser default.');
        document.getElementById(formId).submit();
        return;
    }
    
    AppAlert.delete(
        'Hapus Paket?',
        `Apakah Anda yakin ingin menghapus paket "${packageName}"? Semua soal dalam paket akan terhapus.`,
        () => document.getElementById(formId).submit()
    )
}
</script>

@endsection