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

@section('content')
<style>
    .card-matkul {
        transition: all 0.2s ease;
        cursor: pointer;
        border-radius: 16px;
        border: 1px solid #e5e7eb;
    }
    .card-matkul:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        border-color: #0d9488;
    }
    .stat-number {
        font-size: 1.5rem;
        font-weight: 800;
    }
</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" style="font-size: 0.7rem; letter-spacing: 1px;">
                    <i class="bi bi-qr-code-scan me-1"></i> MANAJEMEN KELAS
                </div>
                <h1 class="fw-900 mb-1" style="font-size: 1.8rem;">Manajemen Absensi</h1>
                <p class="text-muted m-0">Pilih kelas untuk mengelola kehadiran seluruh pertemuan (1-16)</p>
            </div>
        </div>
    </div>

    {{-- SEARCH FORM --}}
    <div class="card mb-4 border-0 shadow-sm" style="border-radius: 20px;">
        <div class="card-body p-4">
            <form method="GET" action="{{ route('dosen.absensi.index') }}" class="row g-3">
                <div class="col-md-8">
                    <label class="form-label fw-bold">CARI MATA KULIAH</label>
                    <input type="text" name="search" class="form-control form-control-lg" 
                           placeholder="Ketik nama atau kode mata kuliah..." 
                           value="{{ request('search') }}"
                           style="border-radius: 14px;">
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn w-100" style="background: #0d9488; color: white; border-radius: 14px; padding: 10px;">
                        <i class="bi bi-search me-2"></i> Cari
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- DAFTAR MATA KULIAH --}}
    <div class="row g-4">
        @forelse($statistikMatkul as $mk)
        <div class="col-md-6 col-lg-4">
            <div class="card-matkul card h-100 shadow-sm" onclick="window.location='{{ route('dosen.absensi.show', $mk['id']) }}'">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h5 class="fw-900 mb-1" style="font-size: 1.1rem;">{{ $mk['nama'] }}</h5>
                            <div class="text-muted" style="font-size: 0.7rem;">{{ $mk['kode'] }} | {{ $mk['sks'] }} SKS</div>
                        </div>
                        <span class="badge bg-teal bg-opacity-10 text-teal px-3 py-2 rounded-pill">
                            {{ $mk['hari'] }}, {{ $mk['jam_mulai'] }} WIB
                        </span>
                    </div>

                    <div class="row g-2 mt-3">
                        <div class="col-6">
                            <div class="p-2 rounded-3" style="background: #f0fdfa;">
                                <div class="stat-number text-success">{{ $mk['rata_kehadiran'] }}%</div>
                                <div class="text-muted" style="font-size: 0.65rem;">Rata-rata Hadir</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded-3" style="background: #f0fdfa;">
                                <div class="stat-number text-teal">{{ $mk['total_pertemuan'] }}</div>
                                <div class="text-muted" style="font-size: 0.65rem;">Pertemuan</div>
                            </div>
                        </div>
                    </div>

                    <div class="row g-2 mt-2">
                        <div class="col-4">
                            <div class="text-center">
                                <div class="fw-900 text-success">{{ $mk['total_hadir'] }}</div>
                                <div class="text-muted" style="font-size: 0.6rem;">Hadir</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div class="fw-900 text-danger">{{ $mk['total_alpha'] }}</div>
                                <div class="text-muted" style="font-size: 0.6rem;">Alpha</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="text-center">
                                <div class="fw-900 text-info">{{ $mk['total_mahasiswa'] }}</div>
                                <div class="text-muted" style="font-size: 0.6rem;">Mahasiswa</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="text-center py-5">
                <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                <span class="text-muted">Tidak ada mata kuliah yang ditemukan.</span>
            </div>
        </div>
        @endforelse
    </div>
</div>

<script>
    // Optional: add click handler
    document.querySelectorAll('.card-matkul').forEach(card => {
        card.addEventListener('click', function(e) {
            if (!e.target.closest('a')) {
                // sudah ada onclick di parent
            }
        });
    });
</script>
@endsection