@extends('layouts.guru')

@php
    $selectedMapel = $selectedMapel ?? null;
    $pageLabel = 'Kelas ' . $kelas->nama_kelas . ($selectedMapel ? ' - ' . $selectedMapel->nama_mapel : '');
@endphp

@section('title', $pageLabel . ' - SIPENA Guru')

@section('content')
<!-- Back button -->
<div style="margin-bottom: 20px;">
    <a href="{{ route('guru.kelas.index') }}" style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #475569; font-weight: 600; font-size: 0.92rem;">
        <i class="fa-solid fa-arrow-left"></i> Kembali ke Daftar Kelas
    </a>
</div>

<!-- Class Header -->
<div class="card" style="margin-bottom: 24px; border-radius: 12px; border: 1px solid #cbd5e1; background: #fff; overflow: hidden;">
    <div style="background: linear-gradient(135deg, #1e3a8a, #2563eb); padding: 24px 32px; color: #fff; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
        <div>
            <h1 style="margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2;">{{ $pageLabel }}</h1>
            <div style="display: flex; gap: 20px; margin-top: 8px; font-size: 0.95rem; opacity: 0.9; flex-wrap: wrap;">
                <span style="display: inline-flex; align-items: center; gap: 6px;"><i class="fa-solid fa-book"></i> {{ $selectedMapel ? $selectedMapel->nama_mapel : ($subjects ?: '-') }}</span>
                <span style="display: inline-flex; align-items: center; gap: 6px;"><i class="fa-solid fa-users"></i> {{ $siswaCount }} Siswa</span>
                <span style="display: inline-flex; align-items: center; gap: 6px;"><i class="fa-solid fa-calendar-days"></i> {{ $scheduleCount }} Jadwal</span>
            </div>
        </div>
        <div style="font-size: 3rem; opacity: 0.25;">
            <i class="fa-solid fa-school"></i>
        </div>
    </div>
    
    <!-- Tab Navigation -->
    <div style="background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; overflow-x: auto;">
        @if($selectedMapel)
            <a href="{{ route('guru.kelas.mapel.materi', [$kelas->id, $selectedMapel->id]) }}" class="tab-link {{ request()->routeIs('guru.kelas.mapel.materi') ? 'active' : '' }}">
                <i class="fa-solid fa-book-open"></i> Materi
            </a>
            <a href="{{ route('guru.kelas.mapel.tugas', [$kelas->id, $selectedMapel->id]) }}" class="tab-link {{ request()->routeIs('guru.kelas.mapel.tugas') ? 'active' : '' }}">
                <i class="fa-solid fa-tasks"></i> Tugas
            </a>
            <a href="{{ route('guru.kelas.mapel.nilai', [$kelas->id, $selectedMapel->id]) }}" class="tab-link {{ request()->routeIs('guru.kelas.mapel.nilai') ? 'active' : '' }}">
                <i class="fa-solid fa-chart-line"></i> Nilai
            </a>
            <a href="{{ route('guru.kelas.mapel.absensi', [$kelas->id, $selectedMapel->id]) }}" class="tab-link {{ request()->routeIs('guru.kelas.mapel.absensi') ? 'active' : '' }}">
                <i class="fa-solid fa-user-check"></i> Absensi
            </a>
        @else
            <a href="{{ route('guru.kelas.show', $kelas->id) }}" class="tab-link {{ request()->routeIs('guru.kelas.show') ? 'active' : '' }}">
                <i class="fa-solid fa-book-open-reader"></i> Pilih Mapel
            </a>
            <a href="{{ route('guru.kelas.absensi', $kelas->id) }}" class="tab-link {{ request()->routeIs('guru.kelas.absensi') ? 'active' : '' }}">
                <i class="fa-solid fa-user-check"></i> Absensi
            </a>
        @endif
        <a href="{{ route('guru.kelas.anggota', $kelas->id) }}" class="tab-link {{ request()->routeIs('guru.kelas.anggota') ? 'active' : '' }}">
            <i class="fa-solid fa-users-line"></i> Anggota Kelas
        </a>
    </div>
</div>

<!-- Tab Content Area -->
<div class="tab-content-wrapper">
    @yield('tab_content')
</div>

<style>
    .tab-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        padding: 16px 24px;
        font-weight: 600;
        font-size: 0.95rem;
        color: #64748b;
        border-bottom: 3px solid transparent;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .tab-link:hover {
        color: #2563eb;
        background: #f1f5f9;
    }
    
    .tab-link.active {
        color: #2563eb;
        border-bottom-color: #2563eb;
        background: #fff;
    }
</style>
@endsection