@extends('layouts.guru')

@section('title', 'Kelola Kelas - SIPENA Guru')
@section('page_title', 'Kelola Kelas')

@section('content')
<!-- Page Header -->
<div class="page-header" style="margin-bottom: 28px;">
    <h1 style="font-size: 1.75rem; font-weight: 700; color: var(--text-dark); margin-bottom: 6px;">Kelola Kelas Mengajar</h1>
    <p style="color: var(--text-gray); font-size: 0.95rem;">Berikut adalah daftar kelas yang Anda ajar. Kelas telah diurutkan berdasarkan skala prioritas jam mengajar hari ini.</p>
</div>

<!-- Grid Kelas -->
<div class="class-grid">
    @forelse($classes as $kelas)
        @php
            // Assign gradient color codes and visual variables based on priority
            if ($kelas->priority === 1) {
                $gradient = 'linear-gradient(135deg, #059669, #10b981)'; // Emerald/Teal
                $btnColor = '#10b981';
                $btnHover = '#059669';
                $btnShadow = 'rgba(16, 185, 129, 0.2)';
            } elseif ($kelas->priority === 2) {
                $gradient = 'linear-gradient(135deg, #d97706, #f59e0b)'; // Orange/Amber
                $btnColor = '#f59e0b';
                $btnHover = '#d97706';
                $btnShadow = 'rgba(245, 158, 11, 0.2)';
            } elseif ($kelas->priority === 3) {
                $gradient = 'linear-gradient(135deg, #1d4ed8, #3b82f6)'; // Blue/Indigo
                $btnColor = '#3b82f6';
                $btnHover = '#1d4ed8';
                $btnShadow = 'rgba(59, 130, 246, 0.2)';
            } else {
                $gradient = 'linear-gradient(135deg, #475569, #64748b)'; // Slate/Gray
                $btnColor = '#64748b';
                $btnHover = '#475569';
                $btnShadow = 'rgba(100, 116, 139, 0.2)';
            }
        @endphp

        <div class="class-card priority-{{ $kelas->priority }}">
            <!-- Card Header with Gradient Accent -->
            <div class="class-card-header" style="background: {{ $gradient }};">
                <div class="badge-container">
                    <span class="status-badge badge-p-{{ $kelas->priority }}">
                        @if($kelas->priority === 1)
                            <i class="fa-solid fa-circle-dot fa-beat-fade"></i> {{ $kelas->badge_label }}
                        @elseif($kelas->priority === 2)
                            <i class="fa-solid fa-clock-rotate-left"></i> {{ $kelas->badge_label }}
                        @elseif($kelas->priority === 3)
                            <i class="fa-solid fa-calendar-day"></i> {{ $kelas->badge_label }}
                        @else
                            <i class="fa-solid fa-calendar-days"></i> {{ $kelas->badge_label }}
                        @endif
                    </span>
                    
                    @if($kelas->countdown)
                        <span class="countdown-badge">
                            <i class="fa-solid fa-hourglass-half fa-spin"></i> {{ $kelas->countdown }}
                        </span>
                    @endif
                </div>
                <h2 class="class-title">Kelas {{ $kelas->nama_kelas }}</h2>
                <p class="subject-title">
                    <i class="fa-solid fa-book-bookmark"></i> {{ $kelas->subject_list->count() }} Mata Pelajaran
                </p>
            </div>

            <!-- Card Body with Details -->
            <div class="class-card-body">
                <div class="info-row">
                    <span class="info-label"><i class="fa-solid fa-book"></i> Mata Pelajaran</span>
                    <span class="info-value subject-list">
                        @forelse($kelas->subject_list as $mapel)
                            <span class="subject-chip">{{ $mapel->nama_mapel }}</span>
                        @empty
                            -
                        @endforelse
                    </span>
                </div>
                
                <div class="info-row">
                    <span class="info-label"><i class="fa-solid fa-user-graduate"></i> Jumlah Siswa</span>
                    <span class="info-value">{{ $kelas->siswa_count }} Siswa</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label"><i class="fa-solid fa-calendar-day"></i> Hari Mengajar</span>
                    <span class="info-value">{{ $kelas->hari_list->isNotEmpty() ? $kelas->hari_list->implode(', ') : '-' }}</span>
                </div>

                <div class="info-row">
                    <span class="info-label"><i class="fa-solid fa-clock"></i> Jumlah Jadwal</span>
                    <span class="info-value">{{ $kelas->schedule_count }} Jadwal</span>
                </div>
            </div>

            <!-- Card Footer with Action Button -->
            <div class="class-card-footer">
                <a href="{{ route('guru.kelas.show', $kelas->id) }}" class="btn-enter-class btn-ent-{{ $kelas->priority }}" style="--btn-color: {{ $btnColor }}; --btn-hover: {{ $btnHover }}; --btn-shadow: {{ $btnShadow }};">
                    Masuk Kelas <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
        </div>
    @empty
        <div class="empty-state-card">
            <i class="fa-solid fa-school-circle-exclamation"></i>
            <h3>Anda belum terdaftar mengajar di kelas manapun</h3>
            <p>Silakan hubungi Admin Akademik untuk memperbarui jadwal mengajar Anda di sistem.</p>
        </div>
    @endforelse
</div>

<style>
    /* Grid Layout */
    .class-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
        margin-top: 8px;
    }

    /* Premium Card Design */
    .class-card {
        background-color: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .class-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Card Header */
    .class-card-header {
        padding: 24px;
        color: #ffffff;
        position: relative;
    }

    .badge-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
        align-items: center;
    }

    .status-badge {
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 9999px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
    }

    .countdown-badge {
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 9999px;
        background-color: #fee2e2;
        color: #991b1b;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        animation: pulse-countdown 2s infinite ease-in-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    @keyframes pulse-countdown {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.9;
            transform: scale(0.97);
        }
    }

    .class-title {
        font-size: 1.6rem;
        font-weight: 800;
        margin: 0 0 6px 0;
        letter-spacing: -0.02em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .subject-title {
        font-size: 0.92rem;
        margin: 0;
        opacity: 0.92;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
    }

    /* Card Body */
    .class-card-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        flex-grow: 1;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f1f5f9;
    }

    .info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .info-label {
        font-size: 0.88rem;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .info-label i {
        color: #94a3b8;
        width: 16px;
        text-align: center;
    }

    .info-value {
        font-size: 0.92rem;
        font-weight: 600;
        color: #1e293b;
        text-align: right;
    }

    .subject-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        max-width: 58%;
    }

    .subject-chip {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 9999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.2;
    }

    /* Card Footer & Button */
    .class-card-footer {
        padding: 0 24px 24px 24px;
        background-color: #ffffff;
    }

    .btn-enter-class {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        background-color: var(--btn-color);
        color: #ffffff;
        text-decoration: none;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.95rem;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px var(--btn-shadow);
        border: none;
        cursor: pointer;
    }

    .btn-enter-class:hover {
        background-color: var(--btn-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px var(--btn-shadow);
    }

    .btn-enter-class:active {
        transform: translateY(1px);
    }

    .btn-enter-class i {
        transition: transform 0.2s ease;
    }

    .btn-enter-class:hover i {
        transform: translateX(4px);
    }

    /* Empty State */
    .empty-state-card {
        grid-column: 1 / -1;
        background-color: #ffffff;
        border: 2px dashed #cbd5e1;
        border-radius: 16px;
        padding: 48px 24px;
        text-align: center;
        color: #64748b;
    }

    .empty-state-card i {
        font-size: 3.5rem;
        color: #94a3b8;
        margin-bottom: 16px;
    }

    .empty-state-card h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8px;
    }

    .empty-state-card p {
        font-size: 0.95rem;
        max-width: 400px;
        margin: 0 auto;
        line-height: 1.5;
    }
</style>
@endsection