<?php
require_once '../includes/auth.php';

if (!isPenguji()) {
    redirect('../login.php');
}

$station_id = $_GET['station_id'] ?? null;
$ujian_id = $_GET['ujian_id'] ?? null;

if (!$station_id) {
    redirect('dashboard.php');
}

// Ambil data station
$stmt = $pdo->prepare("SELECT * FROM stations WHERE id = ?");
$stmt->execute([$station_id]);
$station = $stmt->fetch();

if (!$station) {
    echo "Station tidak ditemukan!";
    exit;
}

// Ambil aspek penilaian
$stmt = $pdo->prepare("SELECT * FROM aspek_penilaian WHERE station_id = ? ORDER BY nomor_urut");
$stmt->execute([$station_id]);
$aspeks = $stmt->fetchAll();
?>

<?php include 'header.php'; ?>

<div class="content">
    <div class="page-header">
        <h2>Station: <?php echo $station['nama_station']; ?></h2>
        <div class="header-actions">
            <?php if ($ujian_id): ?>
                <a href="penilaian.php?ujian_id=<?php echo $ujian_id; ?>" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali ke Penilaian
                </a>
            <?php else: ?>
                <a href="dashboard.php" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali ke Dashboard
                </a>
            <?php endif; ?>
            <button onclick="window.print()" class="btn btn-info">
                <i class="fas fa-print"></i> Cetak
            </button>
        </div>
    </div>

    <!-- Card Station -->
    <div class="card station-preview">
        <div class="station-header">
            <h3><?php echo $station['nama_station']; ?></h3>
        </div>

        <!-- Instruksi Penguji -->
        <div class="preview-section">
            <h4 class="section-title">
                <i class="fas fa-chalkboard-teacher"></i>
                Instruksi untuk Penguji
            </h4>
            <div class="preview-content">
                <?php if (!empty($station['instruksi_penguji'])): ?>
                    <?php echo $station['instruksi_penguji']; ?>
                <?php else: ?>
                    <p class="text-muted">Tidak ada instruksi khusus untuk penguji</p>
                <?php endif; ?>
            </div>
        </div>

        <!-- Aspek Penilaian -->
        <div class="preview-section">
            <h4 class="section-title">
                <i class="fas fa-clipboard-check"></i>
                Checklist Penilaian
            </h4>
            
            <?php if (empty($aspeks)): ?>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    Belum ada aspek penilaian
                </div>
            <?php else: ?>
                <div class="checklist-container">
                    <?php foreach ($aspeks as $index => $aspek): ?>
                        <div class="checklist-item">
                            <div class="checklist-header">
                                <div class="checklist-number"><?php echo $aspek['nomor_urut']; ?></div>
                                <h5><?php echo $aspek['nama_aspek']; ?></h5>
                            </div>
                            
                            <div class="checklist-options">
                                <?php if ($aspek['skor_0']): ?>
                                    <label class="checklist-option">
                                        <input type="radio" name="skor_<?php echo $aspek['id']; ?>" value="0">
                                        <span class="checkmark skor-0-badge">0</span>
                                        <div class="option-description">
                                            <?php if (!empty($aspek['deskripsi_0'])): ?>
                                                <?php echo $aspek['deskripsi_0']; ?>
                                            <?php else: ?>
                                                <span class="text-muted">Skor 0</span>
                                            <?php endif; ?>
                                        </div>
                                    </label>
                                <?php endif; ?>
                                
                                <?php if ($aspek['skor_1']): ?>
                                    <label class="checklist-option">
                                        <input type="radio" name="skor_<?php echo $aspek['id']; ?>" value="1">
                                        <span class="checkmark skor-1-badge">1</span>
                                        <div class="option-description">
                                            <?php if (!empty($aspek['deskripsi_1'])): ?>
                                                <?php echo $aspek['deskripsi_1']; ?>
                                            <?php else: ?>
                                                <span class="text-muted">Skor 1</span>
                                            <?php endif; ?>
                                        </div>
                                    </label>
                                <?php endif; ?>
                                
                                <?php if ($aspek['skor_2']): ?>
                                    <label class="checklist-option">
                                        <input type="radio" name="skor_<?php echo $aspek['id']; ?>" value="2">
                                        <span class="checkmark skor-2-badge">2</span>
                                        <div class="option-description">
                                            <?php if (!empty($aspek['deskripsi_2'])): ?>
                                                <?php echo $aspek['deskripsi_2']; ?>
                                            <?php else: ?>
                                                <span class="text-muted">Skor 2</span>
                                            <?php endif; ?>
                                        </div>
                                    </label>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
/* Checklist Styles */
.checklist-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.checklist-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
}

.checklist-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f8f9fa;
}

.checklist-number {
    background: #3498db;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.checklist-header h5 {
    margin: 0;
    color: #2c3e50;
}

.checklist-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.checklist-option:hover {
    background: #f8f9fa;
    border-color: #3498db;
}

.checklist-option input[type="radio"] {
    display: none;
}

.checkmark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.checklist-option input[type="radio"]:checked + .checkmark {
    transform: scale(1.1);
}

.option-description {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Print styles untuk checklist */
@media print {
    .checklist-option {
        break-inside: avoid;
    }
    
    .checklist-option input[type="radio"] {
        display: inline-block;
    }
}
</style>

<?php include 'footer.php'; ?>