@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;
    }
    
    .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-sakit { background: #fef08a; color: #854d0e; 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; }
    .badge-secondary { background: #f1f5f9; color: #64748b; 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;
    }
    
    .stat-number { font-size: 2rem; font-weight: 800; }
    .stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #64748b; }
    
    .btn-teal {
        background: #0d9488;
        color: white;
        border: none;
        padding: 8px 24px;
        border-radius: 30px;
        font-weight: 600;
    }
    
    .btn-outline-teal {
        background: white;
        color: #0d9488;
        border: 1px solid #0d9488;
        padding: 8px 24px;
        border-radius: 30px;
        font-weight: 600;
        text-decoration: none;
    }

    .btn-outline-secondary {
        background: white;
        color: #94a3b8;
        border: 1px solid #e2e8f0;
        padding: 8px 24px;
        border-radius: 30px;
        font-weight: 600;
        cursor: not-allowed;
    }
</style>

<div class="content-inner p-4 p-md-5">
    <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">DATA ABSENSI</div>
                <h1 class="fw-900 mb-1">Rekap Absensi Lengkap</h1>
                <p class="text-muted">Filter berdasarkan mata kuliah, pertemuan, atau nama mahasiswa</p>
            </div>
            <a href="{{ route('dosen.dashboard') }}" class="btn btn-outline-secondary" style="border-radius: 30px; padding: 8px 20px;">
                <i class="bi bi-arrow-left me-1"></i> Kembali ke Dashboard
            </a>
        </div>
    </div>

    <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">MATA KULIAH</label>
                <select name="matkul_id" class="form-select form-select-sm">
                    <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">PERTEMUAN KE</label>
                <select name="pertemuan_ke" class="form-select form-select-sm">
                    <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">NAMA MAHASISWA</label>
                <input type="text" name="nama" class="form-control form-control-sm" 
                       placeholder="Cari nama mahasiswa..." value="{{ request('nama') }}">
            </div>
            <div class="col-md-3">
                <div class="d-flex gap-2">
                    <button type="submit" class="btn-teal w-100">Filter</button>
                    <a href="{{ route('dosen.absensi.rekap') }}" class="btn-outline-teal">Reset</a>
                </div>
            </div>
        </form>
    </div>

    {{-- STATISTIK CARD (5 CARD: Hadir, Izin, Sakit, Alpha, Rata-rata) --}}
    <div class="row g-3 mb-4">
        <div class="col-md-2">
            <div class="stat-card">
                <div class="stat-number text-success">{{ number_format($statistik['total_hadir']) }}</div>
                <div class="stat-label">Hadir</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stat-card">
                <div class="stat-number" style="color:#3b82f6;">{{ number_format($statistik['total_izin']) }}</div>
                <div class="stat-label">Izin</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stat-card">
                <div class="stat-number" style="color:#ca8a04;">{{ number_format($statistik['total_sakit'] ?? 0) }}</div>
                <div class="stat-label">Sakit</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stat-card">
                <div class="stat-number text-danger">{{ number_format($statistik['total_alpha']) }}</div>
                <div class="stat-label">Alpha</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-number text-teal">{{ $statistik['rata_kehadiran'] }}%</div>
                <div class="stat-label">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: 110px;">Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($absensis as $i => $item)
                @php
                    // 🔥 Parse tanggal dengan aman
                    try {
                        $tanggalPertemuan = \Carbon\Carbon::parse($item->tanggal);
                    } catch (\Exception $e) {
                        $tanggalPertemuan = \Carbon\Carbon::now();
                    }
                    $isFuture = $tanggalPertemuan->isFuture();
                    
                    // 🔥 Badge untuk status (4 jenis)
                    $badgeClasses = [
                        'hadir' => 'badge-hadir',
                        'izin' => 'badge-izin',
                        'sakit' => 'badge-sakit',
                        'alpha' => 'badge-alpha'
                    ];
                    $badgeTexts = [
                        'hadir' => '✅ Hadir',
                        'izin' => '📝 Izin',
                        'sakit' => '🤒 Sakit',
                        'alpha' => '❌ Alpha'
                    ];
                    $badgeClass = $badgeClasses[$item->status] ?? 'badge-alpha';
                    $badgeText = $badgeTexts[$item->status] ?? $item->status;
                @endphp
                <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>{{ $tanggalPertemuan->format('Y-m-d') }}</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>
                        <span class="{{ $badgeClass }}">{{ $badgeText }}</span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-5">Tidak ada data absensi yang ditemukan.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($absensis->hasPages())
    <div class="d-flex flex-column align-items-center mt-5">
        <div class="d-flex gap-3">
            @if($absensis->onFirstPage())
                <span class="btn-outline-secondary disabled">Sebelumnya</span>
            @else
                <a href="{{ $absensis->previousPageUrl() }}" class="btn-outline-teal">Sebelumnya</a>
            @endif
            
            @if($absensis->hasMorePages())
                <a href="{{ $absensis->nextPageUrl() }}" class="btn-teal">Selanjutnya</a>
            @else
                <span class="btn-outline-secondary disabled">Selanjutnya</span>
            @endif
        </div>
        <div class="mt-3 text-muted small">
            {{ $absensis->firstItem() }} - {{ $absensis->lastItem() }} dari {{ $absensis->total() }} data
        </div>
    </div>
    @endif
</div>
@endsection