@extends('layouts.app')
@section('title', 'Rekap Absensi Lengkap')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
    
    .content-inner {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background: #f8fafc;
        min-height: 100vh;
    }
    
    .filter-card {
        background: white;
        border-radius: 20px;
        padding: 24px;
        margin-bottom: 24px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .table-absensi {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .table-absensi thead th {
        background: #0d9488;
        color: white;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 14px 16px;
        border: none;
    }
    
    .table-absensi tbody td {
        padding: 12px 16px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.85rem;
    }
    
    .table-absensi tbody tr:hover {
        background: #f8fafc;
    }
    
    .badge-hadir {
        background: #d1fae5;
        color: #065f46;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.75rem;
    }
    
    .badge-izin {
        background: #fed7aa;
        color: #92400e;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.75rem;
    }
    
    .badge-alpha {
        background: #fee2e2;
        color: #991b1b;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.75rem;
    }
    
    .stat-card {
        background: white;
        border-radius: 16px;
        padding: 16px 20px;
        text-align: center;
        border: 1px solid #e5e7eb;
        transition: all 0.2s;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.2;
    }
    
    .stat-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
    }
    
    .btn-teal {
        background: #0d9488;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 12px;
        font-weight: 600;
    }
    
    .btn-teal:hover {
        background: #0f766e;
        color: white;
    }
    
    .btn-outline-teal {
        background: white;
        color: #0d9488;
        border: 1px solid #0d9488;
        padding: 8px 20px;
        border-radius: 12px;
        font-weight: 600;
    }
    
    .btn-outline-teal:hover {
        background: #f0fdfa;
    }
    
    .pagination {
        justify-content: center;
        margin-top: 24px;
    }
</style>

<div class="content-inner p-4 p-md-5">
    {{-- HEADER --}}
    <div class="mb-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <div class="text-teal fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 1px;">
                    <i class="bi bi-table me-1"></i> DATA ABSENSI
                </div>
                <h1 class="fw-900 mb-1" style="font-size: 1.8rem; color: #111827;">Rekap Absensi Lengkap</h1>
                <p class="text-muted m-0" style="font-size: 0.85rem;">Filter berdasarkan mata kuliah, pertemuan, atau nama mahasiswa</p>
            </div>
            <a href="{{ route('dosen.dashboard') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> Kembali ke Dashboard
            </a>
        </div>
    </div>

    {{-- FILTER CARD --}}
    <div class="filter-card">
        <form method="GET" action="{{ route('dosen.absensi.rekap') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label fw-bold mb-1" style="font-size: 0.75rem;">MATA KULIAH</label>
                <select name="matkul_id" class="form-select form-select-sm" style="border-radius: 10px;">
                    <option value="">Semua Mata Kuliah</option>
                    @foreach($mataKuliahList as $mk)
                        <option value="{{ $mk->id }}" {{ request('matkul_id') == $mk->id ? 'selected' : '' }}>
                            {{ $mk->nama }} ({{ $mk->kode }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-bold mb-1" style="font-size: 0.75rem;">PERTEMUAN KE</label>
                <select name="pertemuan_ke" class="form-select form-select-sm" style="border-radius: 10px;">
                    <option value="">Semua</option>
                    @for($i = 1; $i <= 16; $i++)
                        <option value="{{ $i }}" {{ request('pertemuan_ke') == $i ? 'selected' : '' }}>
                            Pertemuan {{ $i }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-bold mb-1" style="font-size: 0.75rem;">NAMA MAHASISWA</label>
                <input type="text" name="nama" class="form-control form-control-sm" 
                       placeholder="Cari nama mahasiswa..." 
                       value="{{ request('nama') }}"
                       style="border-radius: 10px;">
            </div>
            <div class="col-md-3">
                <div class="d-flex gap-2">
                    <button type="submit" class="btn-teal w-100">
                        <i class="bi bi-search me-1"></i> Filter
                    </button>
                    <a href="{{ route('dosen.absensi.rekap') }}" class="btn-outline-teal">
                        <i class="bi bi-arrow-repeat"></i> Reset
                    </a>
                </div>
            </div>
        </form>
    </div>

    {{-- STATISTIK CARD --}}
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-success">{{ number_format($statistik['total_hadir']) }}</div>
                <div class="stat-label mt-1">Total Hadir</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-warning">{{ number_format($statistik['total_izin']) }}</div>
                <div class="stat-label mt-1">Total Izin</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-danger">{{ number_format($statistik['total_alpha']) }}</div>
                <div class="stat-label mt-1">Total Alpha</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-teal" style="color: #0d9488;">{{ $statistik['rata_kehadiran'] }}%</div>
                <div class="stat-label mt-1">Rata-rata Kehadiran</div>
            </div>
        </div>
    </div>

    {{-- TABEL DATA --}}
    <div class="table-responsive">
        <table class="table table-absensi w-100">
            <thead>
                <tr>
                    <th style="width: 50px;">No</th>
                    <th>Mata Kuliah</th>
                    <th style="width: 90px;">Pertemuan</th>
                    <th style="width: 100px;">Tanggal</th>
                    <th style="width: 100px;">Jam</th>
                    <th style="width: 110px;">NIM</th>
                    <th>Nama Mahasiswa</th>
                    <th style="width: 100px;">Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($absensis as $i => $item)
                <tr>
                    <td class="text-center">{{ $absensis->firstItem() + $i }}</td>
                    <td>
                        <strong>{{ $item->matkul_nama }}</strong><br>
                        <small class="text-muted">{{ $item->matkul_kode }}</small>
                    </td>
                    <td class="text-center">
                        <span class="fw-bold">{{ $item->pertemuan_ke }}</span>
                    </td>
                    <td>{{ \Carbon\Carbon::parse($item->tanggal)->format('d/m/Y') }}</td>
                    <td>{{ substr($item->jam_mulai,0,5) }} - {{ substr($item->jam_selesai,0,5) }}</td>
                    <td><span class="font-monospace">{{ $item->nim }}</span></td>
                    <td>{{ $item->nama_mahasiswa }}</td>
                    <td>
                        @php
                            $badgeClass = [
                                'hadir' => 'badge-hadir',
                                'izin' => 'badge-izin',
                                'alpha' => 'badge-alpha'
                            ][$item->status] ?? 'badge-alpha';
                            $badgeText = [
                                'hadir' => '✅ Hadir',
                                'izin' => '📝 Izin',
                                'alpha' => '❌ Alpha'
                            ][$item->status] ?? $item->status;
                        @endphp
                        <span class="{{ $badgeClass }}">{{ $badgeText }}</span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-5">
                        <div class="text-muted">
                            <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                            Tidak ada data absensi yang ditemukan.
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- PAGINATION --}}
    @if($absensis->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $absensis->appends(request()->query())->links() }}
    </div>
    @endif
</div>

<script>
    // Auto submit filter when enter key pressed
    document.querySelectorAll('select, input').forEach(el => {
        el.addEventListener('change', () => {
            if (el.tagName === 'SELECT') {
                el.closest('form').submit();
            }
        });
    });
</script>
@endsection