@extends('layouts.siswa')

@section('title', 'Presensi Siswa')
@section('page_title', 'Kehadiran')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/presensi.css') }}">
<style>
    /* Prevent table container background overlap in presensi.css */
    .table-container {
        background: transparent;
        padding: 0;
        box-shadow: none;
        border: none;
        margin-bottom: 24px;
    }
</style>
@endpush

@section('content')
<!-- TITLE CARD -->
<div class="card" style="margin-bottom: 24px;">
    <div class="card-body">
        <h3 style="color: var(--text-dark); margin-bottom: 8px;">Presensi Kehadiran Siswa</h3>
        <p style="color: var(--text-gray); margin-bottom: 0;">Pantau kehadiranmu untuk setiap mata pelajaran selama satu semester.</p>
    </div>
</div>

<!-- STATISTIC CARDS -->
<div class="presensi-stats-grid">
    <div class="p-stat-card">
        <div class="p-stat-icon" style="background: #dcfce7; color: #16a34a;">
            <i class="fa-solid fa-user-check"></i>
        </div>
        <div class="p-stat-info">
            <h3 id="statHadir">0</h3>
            <p>Total Hadir</p>
        </div>
    </div>

    <div class="p-stat-card">
        <div class="p-stat-icon" style="background: #e0e7ff; color: #4f46e5;">
            <i class="fa-solid fa-envelope-open-text"></i>
        </div>
        <div class="p-stat-info">
            <h3 id="statIzin">0</h3>
            <p>Total Izin</p>
        </div>
    </div>

    <div class="p-stat-card">
        <div class="p-stat-icon" style="background: #ffedd5; color: #ea580c;">
            <i class="fa-solid fa-briefcase-medical"></i>
        </div>
        <div class="p-stat-info">
            <h3 id="statSakit">0</h3>
            <p>Total Sakit</p>
        </div>
    </div>

    <div class="p-stat-card">
        <div class="p-stat-icon" style="background: #fee2e2; color: #dc2626;">
            <i class="fa-solid fa-user-xmark"></i>
        </div>
        <div class="p-stat-info">
            <h3 id="statAlpha">0</h3>
            <p>Total Alpha</p>
        </div>
    </div>
</div>

<!-- LEGEND -->
<div class="legend-section">
    <div class="legend-title">Keterangan Simbol</div>
    <div class="legend-items">
        <div class="legend-item"><div class="symbol-box status-hadir">✓</div> Hadir</div>
        <div class="legend-item"><div class="symbol-box status-izin">i</div> Izin</div>
        <div class="legend-item"><div class="symbol-box status-sakit">+</div> Sakit</div>
        <div class="legend-item"><div class="symbol-box status-absen">×</div> Tidak Hadir (Alpha)</div>
    </div>
</div>

<!-- TABLE CONTAINER CARD -->
<div class="card" style="margin-bottom: 40px;">
    <div class="card-body" style="padding: 0;">
        <div class="table-container">
            <div class="table-responsive">
                <table class="presensi-table">
                    <thead>
                        <tr>
                            <th>Mata Pelajaran</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                            <th>7</th>
                            <th>UTS</th>
                            <th>8</th>
                            <th>9</th>
                            <th>10</th>
                            <th>11</th>
                            <th>12</th>
                            <th>13</th>
                            <th>14</th>
                            <th>UAS</th>
                        </tr>
                    </thead>
                    <tbody id="presensiTableBody">
                        <!-- Data will be rendered here by JS -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Data Presensi dinamis dari database
    const dummyPresensiData = @json($presensiData);

    // Function to render the table and calculate stats
    function renderPresensi() {
        const tbody = document.getElementById('presensiTableBody');
        if (!tbody) return;
        tbody.innerHTML = '';
        
        let totalHadir = 0;
        let totalIzin = 0;
        let totalSakit = 0;
        let totalAlpha = 0;

        if (!dummyPresensiData || dummyPresensiData.length === 0) {
            tbody.innerHTML = `<tr><td colspan="17" style="text-align: center; color: var(--text-gray); padding: 32px;">Belum ada data presensi yang tercatat untuk kelas Anda.</td></tr>`;
            document.getElementById('statHadir').innerText = '0';
            document.getElementById('statIzin').innerText = '0';
            document.getElementById('statSakit').innerText = '0';
            document.getElementById('statAlpha').innerText = '0';
            return;
        }

        dummyPresensiData.forEach(item => {
            const tr = document.createElement('tr');
            
            // Calculate mapel specific stats for the progress bar
            let mapelHadir = 0;
            let mapelTotalPertemuan = 0;

            item.data.forEach(status => {
                if(status !== '') mapelTotalPertemuan++;
                if(status === '✓') { totalHadir++; mapelHadir++; }
                else if(status === 'i') totalIzin++;
                else if(status === '+') totalSakit++;
                else if(status === '×') totalAlpha++;
            });

            const percentage = mapelTotalPertemuan === 0 ? 0 : Math.round((mapelHadir / mapelTotalPertemuan) * 100);

            // Add Mapel Cell with Progress Bar
            let html = `
                <td>
                    <div class="mapel-name-wrapper">
                        <span style="font-weight: 600; color: var(--text-dark);">${item.mapel}</span>
                        <div class="progress-text">${percentage}% Kehadiran</div>
                        <div class="progress-container">
                            <div class="progress-bar" style="width: ${percentage}%"></div>
                        </div>
                    </div>
                </td>
            `;

            // Add Status Cells
            item.data.forEach(status => {
                let className = 'status-empty';
                if(status === '✓') className = 'status-hadir';
                else if(status === '×') className = 'status-absen';
                else if(status === '+') className = 'status-sakit';
                else if(status === 'i') className = 'status-izin';

                html += `<td><div class="symbol-box ${className}">${status}</div></td>`;
            });

            tr.innerHTML = html;
            tbody.appendChild(tr);
        });

        // Update Global Stats
        document.getElementById('statHadir').innerText = totalHadir;
        document.getElementById('statIzin').innerText = totalIzin;
        document.getElementById('statSakit').innerText = totalSakit;
        document.getElementById('statAlpha').innerText = totalAlpha;
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', renderPresensi);
</script>
@endpush
