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

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

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

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

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

if (!$station) {
    redirect('soal.php');
}

// 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="debug-info" style="background: #f0f0f0; padding: 10px; margin: 10px 0; border-radius: 4px;">
    <strong>Debug Info:</strong>
    Station ID: <?php echo $station['id']; ?> | 
    Total Images in Content: 
    <?php 
    $total_images = substr_count($station['deskripsi'], '<img') + 
                   substr_count($station['instruksi_peserta'], '<img') + 
                   substr_count($station['instruksi_penguji'], '<img');
    echo $total_images;
    ?>
</div>

<div class="content">
    <div class="page-header">
        <h2>Preview Station: <?php echo htmlspecialchars($station['nama_station']); ?></h2>
        <div class="header-actions">
            <a href="soal.php" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali ke Daftar
            </a>
            <a href="edit_station.php?id=<?php echo $station['id']; ?>" class="btn btn-primary">
                <i class="fas fa-edit"></i> Edit Station
            </a>
            <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 htmlspecialchars($station['nama_station']); ?></h3>
            <div class="station-meta">
                <span class="meta-item">
                    <i class="fas fa-list-alt"></i>
                    <?php echo count($aspeks); ?> Aspek Penilaian
                </span>
                <span class="meta-item">
                    <i class="fas fa-calendar"></i>
                    Dibuat: <?php echo formatTanggal($station['created_at']); ?>
                </span>
            </div>
        </div>

        <!-- Deskripsi/Skenario -->
        <div class="preview-section">
            <h4 class="section-title">
                <i class="fas fa-scroll"></i>
                Deskripsi/Skenario
            </h4>
            <div class="preview-content">
                <?php if (!empty($station['deskripsi'])): ?>
                    <?php echo $station['deskripsi']; ?>
                <?php else: ?>
                    <p class="text-muted">Tidak ada deskripsi</p>
                <?php endif; ?>
            </div>
        </div>

        <!-- Instruksi Peserta -->
        <div class="preview-section">
            <h4 class="section-title">
                <i class="fas fa-user-graduate"></i>
                Instruksi untuk Peserta
            </h4>
            <div class="preview-content">
                <?php if (!empty($station['instruksi_peserta'])): ?>
                    <?php echo $station['instruksi_peserta']; ?>
                <?php else: ?>
                    <p class="text-muted">Tidak ada instruksi untuk peserta</p>
                <?php endif; ?>
            </div>
        </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 untuk penguji</p>
                <?php endif; ?>
            </div>
        </div>

        <!-- Aspek Penilaian -->
        <div class="preview-section">
            <h4 class="section-title">
                <i class="fas fa-clipboard-check"></i>
                Aspek Penilaian
            </h4>
            
            <?php if (empty($aspeks)): ?>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    Belum ada aspek penilaian yang ditambahkan
                </div>
            <?php else: ?>
                <div class="aspek-list">
                    <?php foreach ($aspeks as $index => $aspek): ?>
                        <div class="aspek-preview-item">
                            <div class="aspek-header">
                                <div class="aspek-number"><?php echo $aspek['nomor_urut']; ?></div>
                                <h5><?php echo htmlspecialchars($aspek['nama_aspek']); ?></h5>
                            </div>
                            
                            <!-- ========== ITEM VERIFIKASI - TAMBAHKAN DI SINI ========== -->
                            <?php if (!empty($aspek['item_verifikasi'])): ?>
                                <div class="item-verifikasi-preview">
                                    <div class="verifikasi-header">
                                        <i class="fas fa-list-check"></i> 
                                        <strong>Item Verifikasi:</strong>
                                        <small class="text-muted">(Hanya alat bantu penguji, tidak mempengaruhi nilai)</small>
                                    </div>
                                    <div class="verifikasi-items">
                                        <?php 
                                        // Parse item verifikasi (satu item per baris)
                                        $items = explode("\n", $aspek['item_verifikasi']);
                                        $item_counter = 0;
                                        foreach ($items as $item):
                                            $item = trim($item);
                                            if (!empty($item)):
                                                $item_counter++;
                                        ?>
                                            <div class="verifikasi-item">
                                                <input type="checkbox" disabled class="verifikasi-checkbox">
                                                <span><?php echo htmlspecialchars($item); ?></span>
                                            </div>
                                        <?php 
                                            endif;
                                        endforeach; 
                                        ?>
                                        <?php if ($item_counter === 0): ?>
                                            <p class="text-muted">Tidak ada item verifikasi</p>
                                        <?php endif; ?>
                                    </div>
                                    <div class="verifikasi-note">
                                        <small><i class="fas fa-info-circle"></i> Checklist ini hanya alat bantu penguji untuk verifikasi, tidak mempengaruhi nilai akhir.</small>
                                    </div>
                                </div>
                            <?php endif; ?>
                            <!-- ========== END ITEM VERIFIKASI ========== -->
                            
                            <div class="skor-preview">
                                <?php if ($aspek['skor_0']): ?>
                                    <div class="skor-item-preview skor-0">
                                        <div class="skor-header">
                                            <span class="skor-badge skor-0-badge">Skor 0</span>
                                        </div>
                                        <div class="skor-description">
                                            <?php if (!empty($aspek['deskripsi_0'])): ?>
                                                <?php echo $aspek['deskripsi_0']; ?>
                                            <?php else: ?>
                                                <span class="text-muted">Tidak ada deskripsi</span>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                                
                                <?php if ($aspek['skor_1']): ?>
                                    <div class="skor-item-preview skor-1">
                                        <div class="skor-header">
                                            <span class="skor-badge skor-1-badge">Skor 1</span>
                                        </div>
                                        <div class="skor-description">
                                            <?php if (!empty($aspek['deskripsi_1'])): ?>
                                                <?php echo $aspek['deskripsi_1']; ?>
                                            <?php else: ?>
                                                <span class="text-muted">Tidak ada deskripsi</span>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                                
                                <?php if ($aspek['skor_2']): ?>
                                    <div class="skor-item-preview skor-2">
                                        <div class="skor-header">
                                            <span class="skor-badge skor-2-badge">Skor 2</span>
                                        </div>
                                        <div class="skor-description">
                                            <?php if (!empty($aspek['deskripsi_2'])): ?>
                                                <?php echo $aspek['deskripsi_2']; ?>
                                            <?php else: ?>
                                                <span class="text-muted">Tidak ada deskripsi</span>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons-preview">
        <a href="soal.php" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Kembali ke Daftar
        </a>
        <a href="edit_station.php?id=<?php echo $station['id']; ?>" class="btn btn-primary">
            <i class="fas fa-edit"></i> Edit Station
        </a>
        <button onclick="window.print()" class="btn btn-info">
            <i class="fas fa-print"></i> Cetak Preview
        </button>
    </div>
</div>

<style>
/* Preview Styles */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

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

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

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

.station-header h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.station-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.meta-item i {
    color: #3498db;
}

.preview-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

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

.preview-content {
    background: white;
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

/* Aspek Preview Styles */
.aspek-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aspek-preview-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

.aspek-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;
}

.aspek-header h5 {
    margin: 0;
    color: #2c3e50;
    font-size: 1rem;
}

/* Item Verifikasi Styles */
.item-verifikasi-preview {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
    border: 2px solid #3498db;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.verifikasi-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.9rem;
}

.verifikasi-header i {
    color: #3498db;
    font-size: 1rem;
}

.verifikasi-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.verifikasi-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.2s;
}

.verifikasi-item:hover {
    border-color: #3498db;
    background: #f8f9fa;
}

.verifikasi-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: default;
    opacity: 0.7;
}

.verifikasi-item span {
    flex: 1;
    font-size: 0.9rem;
    color: #495057;
}

.verifikasi-note {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: #fff3cd;
    border-radius: 4px;
    border: 1px solid #ffeaa7;
    font-size: 0.75rem;
    color: #856404;
}

.verifikasi-note i {
    margin-right: 0.25rem;
}

.skor-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .skor-preview {
        grid-template-columns: repeat(3, 1fr);
    }
}

.skor-item-preview {
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #3498db;
    background: #f8f9fa;
}

.skor-item-preview.skor-0 {
    border-left-color: #e74c3c;
}

.skor-item-preview.skor-1 {
    border-left-color: #f39c12;
}

.skor-item-preview.skor-2 {
    border-left-color: #27ae60;
}

.skor-header {
    margin-bottom: 0.5rem;
}

.skor-description {
    font-size: 0.9rem;
    line-height: 1.5;
}

.skor-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.skor-0-badge {
    background: #e74c3c;
    color: white;
}

.skor-1-badge {
    background: #f39c12;
    color: white;
}

.skor-2-badge {
    background: #27ae60;
    color: white;
}

.action-buttons-preview {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 2rem 0;
    border-top: 1px solid #e9ecef;
}

/* Print Styles */
@media print {
    .page-header,
    .header-actions,
    .action-buttons-preview,
    .debug-info {
        display: none;
    }
    
    .station-preview {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .preview-section {
        break-inside: avoid;
    }
    
    .aspek-preview-item {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    .item-verifikasi-preview {
        break-inside: avoid;
    }
    
    .verifikasi-checkbox {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .header-actions {
        flex-wrap: wrap;
    }
    
    .station-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-buttons-preview {
        flex-direction: column;
    }
    
    .verifikasi-item {
        flex-wrap: wrap;
    }
}

/* Force images to display */
.preview-content img {
    max-width: 100%;
    height: auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Debug border for images */
.preview-content img {
    border: 2px solid #4CAF50;
    border-radius: 4px;
    margin: 10px 0;
}

/* Jika gambar broken, tampilkan placeholder */
.preview-content img[src=""],
.preview-content img:not([src]) {
    display: none;
}

/* Style untuk gambar yang gagal load */
.preview-content img {
    background: #f9f9f9;
    padding: 10px;
}

/* Di style, tambahkan untuk memastikan gambar di aspek tampil */
.aspek-item img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border: 2px solid #4CAF50;
    border-radius: 4px;
    margin: 5px 0;
}

/* Untuk preview di detail_station.php */
.aspek-preview-item img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 5px 0;
}

.text-muted {
    color: #6c757d !important;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 1rem;
    border-radius: 6px;
}
</style>

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