@extends('layouts.app')
@section('title', 'Riwayat Presensi')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap');

    :root { --arn-teal: #0d9488; --arn-teal-light: #f0fdfa; --arn-dark: #111827; }
    
    .content-inner { font-family: 'Plus Jakarta Sans', sans-serif; background: #fcfdfd; min-height: 100vh; }
    .text-massive { font-size: 2.8rem; font-weight: 900; line-height: 1; letter-spacing: -1.5px; color: var(--arn-dark); }
    .text-heading { font-size: 1.15rem; font-weight: 900; color: var(--arn-dark); letter-spacing: -0.5px; }
    .label-mono { font-family: monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: #6b7280; text-transform: uppercase; font-weight: 800; }
    
    .card-modern { border-radius: 20px; border: 1px solid #e5e7eb; background: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .table-container { border-radius: 16px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; }
    .table-teal th { 
        background-color: var(--arn-teal) !important; 
        color: #ffffff !important; 
        font-size: 0.85rem; 
        font-weight: 800; 
        padding: 16px 20px; 
        border: none; 
    }
    .table-teal td { padding: 16px 20px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }

    .chart-wrapper-riwayat { position: relative; height: 180px; width: 180px; margin: 0 auto; }
    .chart-center-text { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

    .pagination-custom {
        display: flex;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
    }
    .pagination-custom li { display: inline-block; }
    .pagination-custom a, .pagination-custom span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 14px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.85rem;
        text-decoration: none;
        background: white;
        color: #374151;
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }
    .pagination-custom a:hover { background: var(--arn-teal); color: white; border-color: var(--arn-teal); transform: translateY(-1px); }
    .pagination-custom .active span { background: var(--arn-teal); color: white; border-color: var(--arn-teal); box-shadow: 0 2px 8px rgba(13,148,136,0.2); }
    .pagination-custom .disabled span { background: #f9fafb; color: #d1d5db; cursor: not-allowed; border-color: #e5e7eb; }
</style>

@php
    $totalPertemuan = $totalPertemuan ?? 0;
    $totalHadir = $totalHadir ?? 0;
    $totalIzinSakit = $totalIzinSakit ?? 0;
    $totalAlpha = $totalAlpha ?? 0;
    $persenKehadiran = $totalPertemuan > 0 ? round(($totalHadir / $totalPertemuan) * 100) : 0;
@endphp

<div class="content-inner p-4 p-md-5">
    <div class="mb-5">
        <div class="label-mono mb-2" style="color: var(--arn-teal);">DATA AKADEMIK</div>
        <h1 class="text-massive mb-2">Riwayat Presensi</h1>
        <p class="text-muted fw-bold m-0">Pantau dan saring histori kehadiran Anda secara terperinci.</p>
    </div>

    {{-- FILTER --}}
    <div class="card-modern p-4 p-lg-5 mb-5 shadow-sm border-0" style="background: #f8fafc;">
        <h5 class="text-heading mb-4">FILTER PENCARIAN</h5>
        <form method="GET" action="{{ route('mahasiswa.absensi.riwayat') }}" class="row g-3 align-items-end">
            <div class="col-md-6">
                <label class="label-mono mb-2 text-dark">MATA KULIAH</label>
                <select name="matkul_id" class="form-select fw-bold border-0 shadow-sm" style="height: 50px; border-radius: 12px;">
                    <option value="">Semua Mata Kuliah</option>
                    @if(isset($mataKuliahList))
                        @foreach($mataKuliahList as $mk)
                            <option value="{{ $mk->id }}" {{ ($filterMatkulId ?? '') == $mk->id ? 'selected' : '' }}>
                                {{ $mk->nama }} ({{ $mk->kode }})
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-md-3">
                <label class="label-mono mb-2 text-dark">STATUS VALIDASI</label>
                <select name="status" class="form-select fw-bold border-0 shadow-sm" style="height: 50px; border-radius: 12px;">
                    <option value="">Semua Status</option>
                    <option value="hadir" {{ ($filterStatus ?? '') == 'hadir' ? 'selected' : '' }}>✅ Hadir</option>
                    <option value="izin" {{ ($filterStatus ?? '') == 'izin' ? 'selected' : '' }}>📝 Izin / Sakit</option>
                    <option value="alpha" {{ ($filterStatus ?? '') == 'alpha' ? 'selected' : '' }}>❌ Alpha</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2 mt-4 mt-md-0">
                <button type="submit" class="btn fw-900 text-white flex-grow-1 shadow-sm" style="background: var(--arn-teal); height: 50px; border-radius: 12px; letter-spacing: 1px;">TERAPKAN</button>
                @if(($filterMatkulId ?? '') || ($filterStatus ?? ''))
                <a href="{{ route('mahasiswa.absensi.riwayat') }}" class="btn btn-outline-secondary fw-900 d-flex align-items-center justify-content-center bg-white shadow-sm" style="height: 50px; border-radius: 12px; color: var(--arn-dark); border-color: transparent;">RESET</a>
                @endif
            </div>
        </form>
    </div>

    {{-- STATISTIK DENGAN CHART --}}
    <div class="card-modern p-4 p-lg-5 mb-5 shadow-sm border-0">
        <h5 class="text-heading mb-4">Statistik Hasil Filter</h5>
        
        @if($totalPertemuan > 0)
        <div class="row align-items-center">
            <div class="col-md-5 col-lg-4 text-center mb-4 mb-md-0">
                <div class="chart-wrapper-riwayat">
                    <canvas id="filterChart"></canvas>
                    <div class="chart-center-text">
                        <div class="text-massive" style="font-size: 2.5rem;">{{ $totalPertemuan }}</div>
                        <div class="label-mono mt-1" style="font-size: 0.6rem;">Data Ditemukan</div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-7 col-lg-8">
                <div class="row g-3">
                    <div class="col-sm-4">
                        <div class="p-3 rounded-4" style="background: #f0fdfa; border: 1px solid #ccfbf1;">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div style="width: 12px; height: 12px; border-radius: 50%; background: #0d9488;"></div>
                                <div class="label-mono m-0" style="color: #0d9488;">Hadir</div>
                            </div>
                            <div class="text-massive" style="font-size: 1.8rem; color: #0d9488;">{{ $totalHadir }}</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="p-3 rounded-4" style="background: #eff6ff; border: 1px solid #dbeafe;">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div style="width: 12px; height: 12px; border-radius: 50%; background: #3b82f6;"></div>
                                <div class="label-mono m-0" style="color: #3b82f6;">Izin/Sakit</div>
                            </div>
                            <div class="text-massive" style="font-size: 1.8rem; color: #3b82f6;">{{ $totalIzinSakit }}</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="p-3 rounded-4" style="background: #fef2f2; border: 1px solid #fee2e2;">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div style="width: 12px; height: 12px; border-radius: 50%; background: #ef4444;"></div>
                                <div class="label-mono m-0" style="color: #ef4444;">Alpha</div>
                            </div>
                            <div class="text-massive" style="font-size: 1.8rem; color: #ef4444;">{{ $totalAlpha }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4 p-3 rounded-4" style="background: #f8fafc; border: 1px solid #f1f5f9;">
                    <div class="d-flex justify-content-between mb-2">
                        <div class="label-mono">Rasio Kehadiran (Hanya Hadir Murni)</div>
                        <div class="fw-900" style="font-size: 0.8rem; color: {{ $persenKehadiran >= 75 ? '#0d9488' : '#ef4444' }};">{{ $persenKehadiran }}%</div>
                    </div>
                    <div style="width: 100%; background-color: #e2e8f0; border-radius: 99px; height: 8px; overflow: hidden;">
                        <div style="height: 100%; border-radius: 99px; transition: width 1s ease-in-out; width: {{ $persenKehadiran }}%; background-color: {{ $persenKehadiran >= 75 ? '#0d9488' : '#ef4444' }};"></div>
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="text-center py-4">
            <h3 class="text-massive" style="color: #e5e7eb;">KOSONG</h3>
            <p class="text-muted fw-bold">Tidak ada data riwayat yang sesuai dengan filter Anda.</p>
        </div>
        @endif
    </div>

    {{-- TABEL DETAIL --}}
    <div class="d-flex justify-content-between align-items-end mb-3">
        <div>
            <h5 class="text-heading m-0">Detail Presensi</h5>
            <div class="label-mono mt-1">Mengurutkan data dari yang paling terbaru</div>
        </div>
    </div>

    <div class="table-container shadow-sm mb-4">
        <div class="table-responsive">
            <table class="table table-teal mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">No</th>
                        <th>Mata Kuliah & Info</th>
                        <th>Pertemuan</th>
                        <th>Hari & Jam Sesi</th>
                        <th>Tanggal</th>
                        <th>Waktu Scan</th>
                        <th class="pe-4 text-end">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pertemuans as $i => $p)
                    @php
                        $status = $p->status_absensi ?? 'alpha';
                        $bg = ['hadir' => '#f0fdfa', 'izin' => '#eff6ff', 'sakit' => '#fefce8', 'alpha' => '#fef2f2'][$status] ?? '#f8fafc';
                        $clr = ['hadir' => '#0d9488', 'izin' => '#3b82f6', 'sakit' => '#ca8a04', 'alpha' => '#ef4444'][$status] ?? '#64748b';
                        $statusText = ['hadir' => '✅ Hadir', 'izin' => '📝 Izin', 'sakit' => '🤒 Sakit', 'alpha' => '❌ Alpha'][$status] ?? ucfirst($status);
                        $waktuAbsen = $p->absensis->first() ? $p->absensis->first()->waktu_absen : null;
                    @endphp
                    <tr>
                        <td class="ps-4" style="font-weight: 900; color: #94a3b8;">{{ $pertemuans->firstItem() + $i }}</td>
                        <td>
                            <div class="fw-900 text-dark" style="font-size: 0.95rem;">{{ $p->jadwal->mataKuliah->nama ?? '-' }}</div>
                            <div class="label-mono mt-1" style="font-size: 0.65rem;">{{ $p->jadwal->mataKuliah->kode ?? '-' }}</div>
                        </td>
                        <td class="text-center fw-900">#{{ $p->pertemuan_ke }}</td>
                        <td>
                            <div class="fw-800">{{ strtoupper($p->jadwal->hari ?? '-') }}</div>
                            <div class="small text-muted">{{ substr($p->jam_mulai, 0, 5) }} - {{ substr($p->jam_selesai, 0, 5) }} WIB</div>
                        </td>
                        <td>{{ \Carbon\Carbon::parse($p->tanggal)->format('d/m/Y') }}</td>
                        <td>
                            @if($waktuAbsen)
                                {{ $waktuAbsen->format('d/m/Y H:i:s') }}
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td class="pe-4 text-end">
                            <span class="px-3 py-1 fw-900" style="font-size: 0.7rem; border-radius: 20px; background: {{ $bg }}; color: {{ $clr }};">
                                {{ $statusText }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="text-muted">Tidak ada data pertemuan yang ditemukan.</div>
                        </td>
                    <tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    {{-- PAGINATION RAPI --}}
    @if($pertemuans->hasPages())
    <div class="d-flex justify-content-between align-items-center mt-4 flex-wrap gap-3">
        <div class="small text-muted">
            Menampilkan {{ $pertemuans->firstItem() }} sampai {{ $pertemuans->lastItem() }} dari {{ $pertemuans->total() }} hasil
        </div>
        <div>
            <ul class="pagination-custom">
                @if ($pertemuans->onFirstPage())
                    <li class="disabled"><span>« Sebelumnya</span></li>
                @else
                    <li><a href="{{ $pertemuans->previousPageUrl() }}" rel="prev">« Sebelumnya</a></li>
                @endif

                @foreach ($pertemuans->getUrlRange(1, $pertemuans->lastPage()) as $page => $url)
                    @if ($page == $pertemuans->currentPage())
                        <li class="active"><span>{{ $page }}</span></li>
                    @else
                        <li><a href="{{ $url }}">{{ $page }}</a></li>
                    @endif
                @endforeach

                @if ($pertemuans->hasMorePages())
                    <li><a href="{{ $pertemuans->nextPageUrl() }}" rel="next">Selanjutnya »</a></li>
                @else
                    <li class="disabled"><span>Selanjutnya »</span></li>
                @endif
            </ul>
        </div>
    </div>
    @endif
</div>

@if($totalPertemuan > 0)
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('filterChart').getContext('2d');
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Hadir', 'Izin/Sakit', 'Alpha'],
                datasets: [{
                    data: [{{ $totalHadir }}, {{ $totalIzinSakit }}, {{ $totalAlpha }}],
                    backgroundColor: ['#0d9488', '#3b82f6', '#ef4444'],
                    borderWidth: 4, borderColor: '#ffffff', hoverOffset: 6
                }]
            },
            options: {
                cutout: '75%',
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false }, tooltip: { backgroundColor: '#111827', padding: 10, cornerRadius: 8 } },
                animation: { animateScale: true, animateRotate: true }
            }
        });
    });
</script>
@endif
@endsection