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

@section('content')
<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: 3rem; font-weight: 900; line-height: 1; letter-spacing: -1.5px; }
    .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.75rem; letter-spacing: 0.05em; color: #6b7280; font-weight: 800; }
    .card-modern { border-radius: 16px; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
    .table-container { border-radius: 12px; 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 24px; border: none; }
    .table-teal td { padding: 16px 24px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
    
    .pertemuan-tab {
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 8px;
    }
    .pertemuan-tab:hover {
        background-color: #f8fafc;
    }
    .pertemuan-tab.active {
        background-color: var(--arn-teal-light);
        border-left: 4px solid var(--arn-teal);
    }
    .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 99px;
        font-size: 0.7rem;
        font-weight: 700;
    }
    .status-hadir { background: #f0fdfa; color: #0d9488; border: 1px solid #ccfbf1; }
    .status-izin { background: #eff6ff; color: #3b82f6; border: 1px solid #dbeafe; }
    .status-alpha { background: #fef2f2; color: #ef4444; border: 1px solid #fee2e2; }
    
    .jadwal-filter {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
    .jadwal-filter-btn {
        padding: 8px 24px;
        border-radius: 30px;
        font-weight: 700;
        font-size: 0.85rem;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
    }
    .jadwal-filter-btn.active {
        background: var(--arn-teal);
        color: white;
        border: none;
    }
    .jadwal-filter-btn.inactive {
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
    }
    .jadwal-filter-btn.inactive:hover {
        background: #e2e8f0;
    }
</style>

<div class="content-inner p-4 p-md-5">
    {{-- Header --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-start mb-5 gap-3">
        <div>
            <div class="label-mono mb-2" style="color: var(--arn-teal);">REKAPITULASI KELAS</div>
            <h1 class="text-massive mb-2" style="font-size: 2.5rem;">{{ $mataKuliah->nama }}</h1>
            <div class="fw-bold text-muted d-flex flex-wrap gap-3 mt-2">
                <span style="background: #f1f5f9; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem;">
                    Kode: {{ $mataKuliah->kode }}
                </span>
                <span style="background: #f1f5f9; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem;">
                    SKS: {{ $mataKuliah->sks }}
                </span>
                <span style="background: #f1f5f9; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem;">
                    Mahasiswa: {{ $statistik['total_mahasiswa'] ?? 0 }} orang
                </span>
            </div>
        </div>
        <a href="{{ route('dosen.absensi.index') }}" class="btn fw-900 shadow-sm px-4" 
           style="background: #fff; border: 1px solid #e5e7eb; color: var(--arn-dark); border-radius: 12px; height: 50px; display: flex; align-items: center; text-decoration: none;">
            <i class="bi bi-arrow-left me-2"></i>Kembali
        </a>
    </div>

    {{-- 🔥 FILTER JADWAL (PENTING UNTUK MENGHILANGKAN DUPLIKASI PERTEMUAN) --}}
    @if(isset($jadwals) && $jadwals->count() > 0)
    <div class="card-modern p-4 mb-4 shadow-sm border-0" style="background: #f8fafc;">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <div class="label-mono">PILIH JADWAL KULIAH:</div>
            <div class="jadwal-filter">
                @foreach($jadwals as $jadwal)
                    <a href="{{ route('dosen.absensi.show', ['matkulId' => $mataKuliah->id, 'jadwal_id' => $jadwal->id]) }}" 
                       class="jadwal-filter-btn {{ (isset($selectedJadwalId) && $selectedJadwalId == $jadwal->id) ? 'active' : 'inactive' }}">
                        {{ $jadwal->hari }} ({{ substr($jadwal->jam_mulai,0,5) }} - {{ substr($jadwal->jam_selesai,0,5) }})
                    </a>
                @endforeach
            </div>
        </div>
        @if(isset($jadwals) && $jadwals->count() > 1)
        <div class="mt-3 small text-muted">
            <i class="bi bi-info-circle me-1"></i> Mata kuliah ini memiliki {{ $jadwals->count() }} jadwal. Pilih jadwal untuk melihat pertemuan masing-masing.
        </div>
        @endif
    </div>
    @endif

    {{-- Statistik Keseluruhan --}}
    <div class="row g-4 mb-5">
        <div class="col-md-3">
            <div class="card-modern p-4 text-start h-100 shadow-sm border-0" style="background: #f0fdfa; border-top: 5px solid #0d9488;">
                <div class="text-massive mb-2" style="font-size: 2rem; color: #0d9488;">{{ $rataKehadiran ?? 0 }}%</div>
                <div class="label-mono" style="color: #0f766e;">Rata-rata Kehadiran</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card-modern p-4 text-start h-100 shadow-sm border-0" style="background: #f0fdfa; border-top: 5px solid #10b981;">
                <div class="text-massive mb-2" style="font-size: 2rem; color: #15803d;">{{ $statistik['total_hadir'] ?? 0 }}</div>
                <div class="label-mono">Total Kehadiran (Hadir)</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card-modern p-4 text-start h-100 shadow-sm border-0" style="background: #eff6ff; border-top: 5px solid #3b82f6;">
                <div class="text-massive mb-2" style="font-size: 2rem; color: #1d4ed8;">{{ $statistik['total_izin'] ?? 0 }}</div>
                <div class="label-mono">Total Izin / Sakit</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card-modern p-4 text-start h-100 shadow-sm border-0" style="background: #fef2f2; border-top: 5px solid #ef4444;">
                <div class="text-massive mb-2" style="font-size: 2rem; color: #b91c1c;">{{ $statistik['total_alpha'] ?? 0 }}</div>
                <div class="label-mono">Total Alpha</div>
            </div>
        </div>
    </div>

    {{-- Daftar Pertemuan (Tab) --}}
    <div class="card-modern p-4 mb-5 shadow-sm border-0">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="text-heading m-0">Daftar Pertemuan</h5>
            @if(isset($jadwals) && isset($selectedJadwalId) && $selectedJadwalId)
                @php
                    $selectedJadwal = $jadwals->firstWhere('id', $selectedJadwalId);
                @endphp
                <span class="badge bg-teal text-white px-3 py-2 rounded-pill">
                    Jadwal {{ $selectedJadwal->hari ?? '' }} ({{ $statistik['total_pertemuan'] ?? 0 }} Pertemuan)
                </span>
            @else
                <span class="badge bg-teal text-white px-3 py-2 rounded-pill">
                    Total {{ $statistik['total_pertemuan'] ?? 0 }} Pertemuan
                </span>
            @endif
        </div>
        
        @if(isset($rekapPertemuan) && count($rekapPertemuan) > 0)
        <div class="row g-2">
            @foreach($rekapPertemuan as $index => $p)
            <div class="col-md-3 col-lg-2">
                <div class="pertemuan-tab p-3 text-center {{ $loop->first ? 'active' : '' }}" 
                     data-pertemuan-id="{{ $p['id'] }}"
                     onclick="showPertemuan({{ $p['id'] }}, this)">
                    <div class="fw-900" style="font-size: 1.1rem;">Pertemuan {{ $p['pertemuan_ke'] }}</div>
                    <div class="label-mono mt-1" style="font-size: 0.6rem;">{{ \Carbon\Carbon::parse($p['tanggal'])->format('d/m/Y') }}</div>
                    <div class="mt-2">
                        <span class="status-badge status-hadir px-2 py-1" style="font-size: 0.6rem;">H: {{ $p['hadir'] }}</span>
                        <span class="status-badge status-alpha px-2 py-1" style="font-size: 0.6rem;">A: {{ $p['alpha'] }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="text-center py-5">
            <div class="text-muted">Belum ada pertemuan untuk jadwal yang dipilih.</div>
            <div class="mt-3 small text-muted">
                <i class="bi bi-calendar-x"></i> Silakan pilih jadwal lain atau cek kembali jadwal mata kuliah.
            </div>
        </div>
        @endif
    </div>

    {{-- Tabel Absensi per Pertemuan (akan di-load via AJAX) --}}
    <div id="absensi-container">
        @if(isset($rekapPertemuan[0]['id']))
            @include('dosen.absensi.partials.table_absensi', ['pertemuanId' => $rekapPertemuan[0]['id']])
        @else
            <div class="card-modern p-5 text-center">
                <div class="text-muted">
                    <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                    Tidak ada data absensi untuk ditampilkan.
                </div>
            </div>
        @endif
    </div>
</div>

<script>
    let currentPertemuanId = null;
    
    function showPertemuan(pertemuanId, element) {
        // Update active tab
        document.querySelectorAll('.pertemuan-tab').forEach(el => el.classList.remove('active'));
        element.classList.add('active');
        
        if (currentPertemuanId === pertemuanId) return;
        currentPertemuanId = pertemuanId;
        
        // Load data absensi via AJAX
        const container = document.getElementById('absensi-container');
        container.innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-teal" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-3 text-muted">Memuat data absensi...</p>
            </div>
        `;
        
        fetch(`/dosen/absensi/pertemuan/${pertemuanId}/data`)
            .then(response => response.text())
            .then(html => {
                container.innerHTML = html;
            })
            .catch(error => {
                console.error('Error:', error);
                container.innerHTML = '<div class="alert alert-danger m-3">Gagal memuat data. Silakan coba lagi.</div>';
            });
    }
    
    // Load pertama kali
    @if(isset($rekapPertemuan[0]['id']))
        currentPertemuanId = {{ $rekapPertemuan[0]['id'] }};
    @endif
</script>
@endsection