<?php include 'header_siswa.php'; ?>
<?php 
include 'koneksi.php';

// Query untuk mendapatkan data nilai siswa dengan nama siswa dan mata pelajaran
$query = "
    SELECT n.id_nilai, n.nilai_angka, n.nilai_huruf, n.semester, n.tahun_ajaran, 
           s.nama_siswa, m.nama_mapel 
    FROM nilai n 
    JOIN siswa s ON n.id_siswa = s.id_siswa 
    JOIN mata_pelajaran m ON n.id_mapel = m.id_mapel
";

$data = mysqli_query($koneksi, $query);

// Mengecek apakah ada data yang ditemukan
$jumlah_data = mysqli_num_rows($data);
?>


<div class="container mt-5">
    <h2 class="text-center mb-4">Daftar Nilai</h2>
    
    <?php if ($jumlah_data > 0): ?>
        <div class="table-wrapper">
            <table class="table custom-table">
                <thead>
                    <tr>
                        <th>Mata Pelajaran</th>
                        <th>Nila angka</th>
                        <th>Nilai huruf</th>
                        <th>Semester</th>
                        <th>Tahun ajaran</th>
                    
                    </tr>
                </thead>
                <tbody>
                    <?php while ($d = mysqli_fetch_array($data)) { ?>
                        <tr>
                            <td><?php echo $d['nama_mapel']; ?></td>
                            <td><?php echo $d['nilai_angka']; ?></td>
                            <td><?php echo $d['nilai_huruf']; ?></td>
                            <td> <?php echo $d['semester']; ?></td>
                            <td><?php echo $d['tahun_ajaran']; ?></td>
    
                        </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
    <?php else: ?>
        <div class="alert alert-info text-center" role="alert">
          belum ada data nilai siswa
        </div>
    <?php endif; ?>
</div>

<style>
:root {
    --primary-color: #007bff;
    --border-color: #dee2e6;
    --hover-bg: #f8f9fa;
    --header-bg: #007bff;
    --header-color: #ffffff;
}

/* Container Styles */
.container {
    padding: 15px;
    width: 100%;
    margin: 0 auto;
}

/* Table Wrapper */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    background-color: white;
}

/* Table Styles */
.custom-table {
    width: 100%;
    min-width: 1000px; /* Adjusted for more columns */
    margin-bottom: 0;
    background-color: white;
    border-collapse: collapse;
}

.custom-table thead {
    background-color: var(--header-bg);
}

.custom-table th {
    color: var(--header-color);
    font-weight: 500;
    padding: 15px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.custom-table td {
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    max-width: 200px; /* Prevent cells from becoming too wide */
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-table tbody tr:hover {
    background-color: var(--hover-bg);
    cursor: pointer;
}

/* Hover tooltip for truncated content */
.custom-table td:hover {
    position: relative;
}

.custom-table td:hover::after {
    content: attr(data-full-text);
    position: absolute;
    left: 0;
    top: 100%;
    background: white;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2;
    white-space: normal;
    max-width: 300px;
    word-break: break-word;
}

/* Custom Scrollbar */
.table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    .container {
        padding: 10px;
    }

    h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .table-wrapper {
        margin: 0px;
        border-radius: 0;
    }

    .custom-table th,
    .custom-table td {
        padding: 10px;
        font-size: 0.9rem;
    }
}

/* Scroll Indicator */
.table-wrapper::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    animation: scrollIndicator 1.5s infinite;
    display: none;
}

@media screen and (max-width: 768px) {
    .table-wrapper::after {
        display: block;
    }
}

@keyframes scrollIndicator {
    0% { opacity: 0; right: 10px; }
    50% { opacity: 1; right: 5px; }
    100% { opacity: 0; right: 10px; }
}

/* Alert Styling */
.alert {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 8px;
    background-color: #cce5ff;
    border-color: #b8daff;
    color: #004085;
}
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
