<?php // app/Views/guru/assessment/index.php ?>
<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="container-fluid py-4">

    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold">Asesmen Saya</h4>
            <small class="text-muted">
                <?php if ($activePeriod): ?>
                    <i class="bi bi-calendar-event me-1"></i> Periode Akademik Aktif: <strong><?= esc($activePeriod['year_name']) ?> — Semester <?= esc($activePeriod['semester']) ?></strong>
                <?php else: ?>
                    <i class="bi bi-exclamation-triangle me-1 text-danger"></i> Belum ada periode akademik aktif
                <?php endif; ?>
            </small>
        </div>
        <?php if ($activePeriod): ?>
        <a href="/guru/assessment/create-ash" class="btn btn-success px-4 py-2 shadow-sm rounded-3">
            <i class="bi bi-plus-lg me-1"></i> Buat Event ASH
        </a>
        <?php endif; ?>
    </div>

    <?php if (session()->getFlashdata('success')): ?>
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4">
            <i class="bi bi-check-circle-fill me-2"></i><?= session()->getFlashdata('success') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4">
            <i class="bi bi-exclamation-triangle-fill me-2"></i><?= session()->getFlashdata('error') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <?php if ($activePeriod): ?>
    <!-- Dashboard Stats -->
    <div class="row g-3 mb-4">
        <!-- Total Tasks -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm text-white overflow-hidden rounded-3" style="background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute end-0 top-50 translate-middle-y me-3 opacity-25">
                        <i class="bi bi-journal-text" style="font-size: 3.5rem;"></i>
                    </div>
                    <small class="text-white-50 text-uppercase fw-semibold tracking-wider">Total Penugasan</small>
                    <h2 class="display-6 fw-bold mb-1 mt-1"><?= esc($stats['total']) ?></h2>
                    <span class="small text-white-50">Tugas koreksi kelas-mapel</span>
                </div>
            </div>
        </div>
        <!-- Selesai -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm text-white overflow-hidden rounded-3" style="background: linear-gradient(135deg, #198754 0%, #157347 100%);">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute end-0 top-50 translate-middle-y me-3 opacity-25">
                        <i class="bi bi-check2-all" style="font-size: 3.5rem;"></i>
                    </div>
                    <small class="text-white-50 text-uppercase fw-semibold tracking-wider">Selesai Koreksi</small>
                    <h2 class="display-6 fw-bold mb-1 mt-1"><?= esc($stats['done']) ?></h2>
                    <span class="small text-white-50">Semua siswa dinilai (100%)</span>
                </div>
            </div>
        </div>
        <!-- Belum Selesai -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm text-white overflow-hidden rounded-3" style="background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute end-0 top-50 translate-middle-y me-3 opacity-25">
                        <i class="bi bi-clock-history text-dark" style="font-size: 3.5rem;"></i>
                    </div>
                    <small class="text-dark-50 text-uppercase fw-semibold tracking-wider text-dark">Belum Selesai</small>
                    <h2 class="display-6 fw-bold mb-1 mt-1 text-dark"><?= esc($stats['pending']) ?></h2>
                    <span class="small text-dark-50 text-dark">Koreksi tertunda/sebagian</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Tab & Search -->
    <div class="card shadow-sm border-0 mb-4 rounded-3">
        <div class="card-body p-4">
            <div class="row g-3 align-items-center justify-content-between mb-4">
                <div class="col-auto">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary filter-btn px-4 py-2 active" data-status="all">
                            <i class="bi bi-grid-fill me-1"></i> Semua <span class="badge bg-white text-primary ms-1 rounded-pill"><?= esc($stats['total']) ?></span>
                        </button>
                        <button type="button" class="btn btn-outline-primary filter-btn px-4 py-2" data-status="pending">
                            <i class="bi bi-hourglass-split me-1"></i> Belum Selesai <span class="badge bg-warning text-dark ms-1 rounded-pill"><?= esc($stats['pending']) ?></span>
                        </button>
                        <button type="button" class="btn btn-outline-primary filter-btn px-4 py-2" data-status="done">
                            <i class="bi bi-check-circle-fill me-1"></i> Selesai <span class="badge bg-success text-white ms-1 rounded-pill"><?= esc($stats['done']) ?></span>
                        </button>
                    </div>
                </div>
            </div>
            
            <hr class="my-3 text-muted opacity-25">
            
            <div class="row g-3">
                <div class="col-md-4 col-12">
                    <label for="filter_event" class="form-label fw-semibold small text-muted">
                        <i class="bi bi-calendar3 me-1"></i> Filter Event Asesmen
                    </label>
                    <select id="filter_event" class="form-select border-2">
                        <option value="">-- Semua Event --</option>
                        <?php foreach ($filterEvents as $name): ?>
                            <option value="<?= esc($name) ?>"><?= esc($name) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-4 col-12">
                    <label for="filter_subject" class="form-label fw-semibold small text-muted">
                        <i class="bi bi-book me-1"></i> Filter Mata Pelajaran
                    </label>
                    <select id="filter_subject" class="form-select border-2">
                        <option value="">-- Semua Mapel --</option>
                        <?php foreach ($filterSubjects as $name): ?>
                            <option value="<?= esc($name) ?>"><?= esc($name) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-4 col-12">
                    <label for="filter_class" class="form-label fw-semibold small text-muted">
                        <i class="bi bi-door-open me-1"></i> Filter Kelas
                    </label>
                    <select id="filter_class" class="form-select border-2">
                        <option value="">-- Semua Kelas --</option>
                        <?php foreach ($filterClasses as $name): ?>
                            <option value="<?= esc($name) ?>"><?= esc($name) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Unified Tasks Table -->
    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-body p-3">
            <div class="table-responsive">
                <table id="tasksTable" class="table table-striped table-hover align-middle mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3" style="width: 5%">#</th>
                            <th style="width: 25%">Event Asesmen</th>
                            <th style="width: 25%">Mata Pelajaran</th>
                            <th style="width: 15%">Kelas</th>
                            <th style="width: 20%">Progress Koreksi</th>
                            <th class="text-center" style="width: 10%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $no = 1; foreach ($tasks as $task): ?>
                        <tr>
                            <td class="ps-3 text-muted"><?= $no++ ?></td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge <?= $task['assessment_type_code'] === 'ASH' ? 'bg-success-subtle text-success' : 'bg-primary-subtle text-primary' ?> fw-semibold py-1.5 px-2.5">
                                        <?= esc($task['assessment_type_code']) ?>
                                    </span>
                                    <span class="fw-bold text-dark"><?= esc($task['assessment_name']) ?></span>
                                </div>
                            </td>
                            <td>
                                <div class="fw-semibold text-primary"><?= esc($task['subject_name']) ?></div>
                            </td>
                            <td>
                                <span class="badge bg-secondary-subtle text-secondary fw-medium fs-6 py-1 px-2.5">
                                    <?= esc($task['grade_name']) ?> — <?= esc($task['classroom_name']) ?>
                                </span>
                            </td>
                            <td>
                                <?php 
                                $pct = $task['progress_percent'];
                                $total = $task['total_students'];
                                $graded = $task['graded_students'];
                                if ($pct == 100) {
                                    $barClass = 'bg-success';
                                } elseif ($pct >= 50) {
                                    $barClass = 'bg-info';
                                } else {
                                    $barClass = 'bg-warning';
                                }
                                ?>
                                <span class="d-none"><?= $pct == 100 ? 'status-done' : 'status-pending' ?></span>
                                <div style="min-width: 150px;">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <small class="fw-semibold text-muted"><?= $graded ?> / <?= $total ?> Siswa</small>
                                        <span class="small fw-bold <?= $pct == 100 ? 'text-success' : 'text-dark' ?>"><?= $pct ?>%</span>
                                    </div>
                                    <div class="progress" style="height: 6px; border-radius: 4px; background-color: var(--border-color);">
                                        <div class="progress-bar <?= $barClass ?> progress-bar-striped progress-bar-animated" 
                                             role="progressbar" 
                                             style="width: <?= $pct ?>%" 
                                             aria-valuenow="<?= $pct ?>" 
                                             aria-valuemin="0" 
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="d-flex gap-1 justify-content-center">
                                    <!-- Koreksi -->
                                    <a href="/guru/assessment/koreksi/<?= $task['assessment_id'] ?>/<?= $task['classroom_id'] ?>/<?= $task['subject_id'] ?>"
                                       class="btn btn-sm btn-primary px-3 rounded-2"
                                       title="Mulai Koreksi">
                                        <i class="bi bi-pencil-square me-1"></i> Koreksi
                                    </a>
                                    <!-- Export Excel -->
                                    <a href="/guru/assessment/export/<?= $task['assessment_id'] ?>/<?= $task['classroom_id'] ?>/<?= $task['subject_id'] ?>"
                                       class="btn btn-sm btn-outline-success px-2 rounded-2"
                                       title="Export Excel">
                                        <i class="bi bi-file-earmark-excel"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <?php else: ?>
        <div class="card shadow-sm border-0 rounded-3">
            <div class="card-body text-center py-5 text-muted">
                <i class="bi bi-clipboard2-x fs-1 d-block mb-3 opacity-50"></i>
                <div class="fw-semibold">Belum ada periode akademik aktif</div>
                <small>Silakan hubungi administrator untuk mengaktifkan periode akademik.</small>
            </div>
        </div>
    <?php endif; ?>

</div>

<?= $this->section('scripts') ?>
<script>
$(document).ready(function() {
    var table = $('#tasksTable').DataTable({
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.13.8/i18n/id.json"
        },
        "order": [[ 0, "asc" ]],
        "columnDefs": [
            { "orderable": false, "targets": [4, 5] }
        ],
        "pageLength": 15,
        "lengthMenu": [[15, 30, 50, -1], [15, 30, 50, "Semua"]]
    });

    // Custom filtering for tab buttons
    $('.filter-btn').on('click', function() {
        $('.filter-btn').removeClass('active btn-primary').addClass('btn-outline-primary');
        $(this).addClass('active btn-primary').removeClass('btn-outline-primary');
        
        var status = $(this).data('status');
        
        if (status === 'all') {
            table.column(4).search('').draw();
        } else if (status === 'done') {
            table.column(4).search('status-done').draw();
        } else if (status === 'pending') {
            table.column(4).search('status-pending').draw();
        }
    });

    // Filter Event change
    $('#filter_event').on('change', function() {
        table.column(1).search(this.value).draw();
    });

    // Filter Subject change
    $('#filter_subject').on('change', function() {
        table.column(2).search(this.value).draw();
    });

    // Filter Class change
    $('#filter_class').on('change', function() {
        table.column(3).search(this.value).draw();
    });
});
</script>
<?= $this->endSection() ?>
<?= $this->endSection() ?>