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

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

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

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

// Ambil data ujian
$stmt = $pdo->prepare("SELECT * FROM ujian WHERE id = ? AND status = 'aktif'");
$stmt->execute([$ujian_id]);
$ujian = $stmt->fetch();

if (!$ujian) {
    echo "Ujian tidak ditemukan atau tidak aktif!";
    exit;
}

// Ambil stations untuk ujian ini
$stmt = $pdo->prepare("
    SELECT s.*, us.urutan 
    FROM stations s 
    INNER JOIN ujian_stations us ON s.id = us.station_id 
    WHERE us.ujian_id = ? 
    ORDER BY us.urutan
");
$stmt->execute([$ujian_id]);
$stations = $stmt->fetchAll();
?>

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

<div class="content">
    <div class="page-header">
        <h2>Stations - <?php echo $ujian['nama_ujian']; ?></h2>
        <div class="header-actions">
            <a href="dashboard.php" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
            <a href="penilaian.php?ujian_id=<?php echo $ujian_id; ?>" class="btn btn-primary">
                <i class="fas fa-play-circle"></i> Mulai Penilaian
            </a>
        </div>
    </div>

    <div class="stations-grid">
        <?php if (empty($stations)): ?>
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                Belum ada stations untuk ujian ini.
            </div>
        <?php else: ?>
            <?php foreach ($stations as $station): ?>
                <div class="station-card">
                    <div class="station-header">
                        <div class="station-number">Station <?php echo $station['urutan']; ?></div>
                        <h3><?php echo $station['nama_station']; ?></h3>
                    </div>
                    
                    <div class="station-preview">
                        <?php if (!empty($station['deskripsi'])): ?>
                            <div class="preview-section">
                                <h4><i class="fas fa-scroll"></i> Skenario</h4>
                                <div class="preview-content">
                                    <?php echo substr(strip_tags($station['deskripsi']), 0, 150) . '...'; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (!empty($station['instruksi_penguji'])): ?>
                            <div class="preview-section">
                                <h4><i class="fas fa-chalkboard-teacher"></i> Instruksi Penguji</h4>
                                <div class="preview-content">
                                    <?php echo substr(strip_tags($station['instruksi_penguji']), 0, 150) . '...'; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <div class="station-actions">
                        <a href="preview_station.php?station_id=<?php echo $station['id']; ?>&ujian_id=<?php echo $ujian_id; ?>" 
                           class="btn btn-info btn-sm" target="_blank">
                            <i class="fas fa-eye"></i> Preview Lengkap
                        </a>
                        <a href="penilaian.php?ujian_id=<?php echo $ujian_id; ?>&station_id=<?php echo $station['id']; ?>" 
                           class="btn btn-primary btn-sm">
                            <i class="fas fa-edit"></i> Nilai Station Ini
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>

<style>
.stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.station-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.station-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.station-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.station-number {
    background: #3498db;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.station-header h3 {
    margin: 0;
    color: #2c3e50;
}

.station-preview {
    margin-bottom: 1.5rem;
}

.preview-section {
    margin-bottom: 1rem;
}

.preview-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0 0 0.5rem 0;
}

.preview-section h4 i {
    color: #3498db;
}

.preview-content {
    background: #f8f9fa;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #495057;
}

.station-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .stations-grid {
        grid-template-columns: 1fr;
    }
    
    .station-actions {
        flex-direction: column;
    }
}
</style>

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