@extends('layouts.guru')

@section('title', 'Dashboard Guru')
@section('page_title', 'Dashboard Guru')

@section('content')
<!-- Welcome Section -->
<div class="welcome-section">
    <div class="welcome-text">
        <h1>Selamat Datang, Pak/Bu Guru! 👋</h1>
        <p>Pantau jadwal mengajar, kelola kelas, materi, serta aktivitas pembelajaran Anda di dashboard ini.</p>
    </div>
    <div class="welcome-image">
        <i class="fa-solid fa-chalkboard-user"></i>
    </div>
</div>

<!-- Stats Cards -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon bg-blue">
            <i class="fa-solid fa-users-rectangle"></i>
        </div>
        <div class="stat-details">
            <h3>Total Kelas</h3>
            <p class="stat-value">{{ $totalKelas }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-purple">
            <i class="fa-solid fa-calendar-days"></i>
        </div>
        <div class="stat-details">
            <h3>Total Jadwal</h3>
            <p class="stat-value">{{ $totalJadwal }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-green">
            <i class="fa-solid fa-user-graduate"></i>
        </div>
        <div class="stat-details">
            <h3>Total Siswa</h3>
            <p class="stat-value">{{ $totalSiswa }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-purple">
            <i class="fa-solid fa-book"></i>
        </div>
        <div class="stat-details">
            <h3>Total Materi</h3>
            <p class="stat-value">{{ $totalMateri }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-orange">
            <i class="fa-solid fa-clipboard-list"></i>
        </div>
        <div class="stat-details">
            <h3>Tugas Aktif</h3>
            <p class="stat-value">{{ $totalTugasAktif }}</p>
        </div>
    </div>
</div>
<div class="main-grid">
    <!-- Left Column: Jadwal Mengajar -->
    <div class="left-column">
        <!-- Jadwal Hari Ini -->
        <div class="card today-schedule-card">
            <div class="card-header">
                <h3>Jadwal Mengajar Hari Ini</h3>
            </div>
            <div class="card-body">
                @forelse($todaySchedules as $sched)
                    @php
                        if ($sched->priority === 1) {
                            $timeBg = '#d1fae5'; $timeColor = '#065f46';
                        } elseif ($sched->priority === 2) {
                            $timeBg = '#ffedd5'; $timeColor = '#c2410c';
                        } else {
                            if ($sched->time_status === 'selesai') {
                                $timeBg = '#f1f5f9'; $timeColor = '#475569';
                            } else {
                                $timeBg = '#dbeafe'; $timeColor = '#1d4ed8';
                            }
                        }
                    @endphp
                    <div class="schedule-item">
                        <div class="schedule-time" style="background-color: {{ $timeBg }}; color: {{ $timeColor }};">
                            <span class="time">{{ \Carbon\Carbon::parse($sched->jam_mulai)->format('H:i') }}</span>
                            <span class="meridian">{{ \Carbon\Carbon::parse($sched->jam_mulai)->format('A') }}</span>
                        </div>
                        <div class="schedule-details" style="flex: 1;">
                            <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;">
                                <h4 style="margin: 0; font-size: 1rem; font-weight: 600;">{{ $sched->mataPelajaran->nama_mapel }}</h4>
                                @if($sched->priority === 1)
                                    <span style="background-color: #d1fae5; color: #065f46; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; text-transform: uppercase;">
                                        Sedang Berlangsung
                                    </span>
                                @elseif($sched->priority === 2)
                                    <span style="background-color: #ffedd5; color: #c2410c; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; text-transform: uppercase;">
                                        Berikutnya {{ $sched->countdown ? '(' . $sched->countdown . ')' : '' }}
                                    </span>
                                @else
                                    <span style="background-color: #dbeafe; color: #1d4ed8; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; text-transform: uppercase;">
                                        Hari Ini
                                    </span>
                                @endif
                            </div>
                            
                            <p style="margin-bottom: 8px; font-size: 0.88rem; color: var(--text-gray);"><i class="fa-solid fa-users"></i> Kelas {{ $sched->kelas }} ({{ \Carbon\Carbon::parse($sched->jam_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($sched->jam_selesai)->format('H:i') }})</p>
                            
                            @if($sched->kelas_id)
                                @if($sched->time_status === 'aktif')
                                    <a href="{{ route('guru.kelas.show', $sched->kelas_id) }}" class="btn" style="text-align: center; text-decoration: none; display: block; background-color: #10b981; color: #fff; font-weight: 600; font-size: 0.9rem; padding: 8px 12px; border-radius: 6px;">
                                        <i class="fa-solid fa-play"></i> Masuk Kelas
                                    </a>
                                @elseif($sched->time_status === 'terjadwal')
                                    <a href="{{ route('guru.kelas.show', $sched->kelas_id) }}" class="btn" style="text-align: center; text-decoration: none; display: block; background-color: #f59e0b; color: #fff; font-weight: 600; font-size: 0.9rem; padding: 8px 12px; border-radius: 6px;">
                                        <i class="fa-solid fa-clock"></i> Terjadwal
                                    </a>
                                @else
                                    <a href="{{ route('guru.kelas.show', $sched->kelas_id) }}" class="btn" style="text-align: center; text-decoration: none; display: block; background-color: #94a3b8; color: #fff; font-weight: 600; font-size: 0.9rem; padding: 8px 12px; border-radius: 6px;">
                                        <i class="fa-solid fa-circle-check"></i> Selesai
                                    </a>
                                @endif
                            @else
                                <button class="btn btn-primary w-100 mt-2" disabled>Masuk Kelas</button>
                            @endif
                        </div>
                    </div>
                @empty
                    <p style="text-align: center; color: var(--text-light); padding: 20px 0; font-size: 0.9rem;">Tidak ada jadwal mengajar hari ini.</p>
                @endforelse
            </div>
        </div>

        <div class="card jadwal-card mt-4">
            <div class="card-header">
                <h3>Jadwal Mengajar Anda</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th>Hari</th>
                                <th>Jam</th>
                                <th>Mata Pelajaran</th>
                                <th>Kelas</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($allSchedules as $sched)
                                @php
                                    $kelasRecord = \App\Models\Kelas::where('nama_kelas', $sched->kelas)->first();
                                @endphp
                                <tr>
                                    <td><strong>{{ $sched->hari }}</strong></td>
                                    <td>{{ \Carbon\Carbon::parse($sched->jam_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($sched->jam_selesai)->format('H:i') }}</td>
                                    <td>{{ $sched->mataPelajaran->nama_mapel }}</td>
                                    <td>Kelas {{ $sched->kelas }}</td>
                                    <td>
                                        @if($kelasRecord)
                                            <a href="{{ route('guru.kelas.show', $kelasRecord->id) }}" class="btn-sm btn-primary" style="text-decoration: none; display: inline-block; padding: 6px 12px; border-radius: 4px; font-size: 0.8rem; background-color: var(--primary); color: #fff; font-weight: 600;">Masuk Kelas</a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" style="text-align: center; color: var(--text-light);">Belum ada jadwal mengajar.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column: Aktivitas Terbaru -->
    <div class="right-column">
        <!-- Aktivitas Terbaru -->
        <div class="card activities-card">
            <div class="card-header">
                <h3>Aktivitas Terbaru</h3>
            </div>
            <div class="card-body">
                <ul class="activity-list">
                    @forelse($activities as $act)
                        <li>
                            <div class="activity-icon {{ $act['bg_icon'] }}">
                                <i class="{{ $act['icon'] }}"></i>
                            </div>
                            <div class="activity-info">
                                <h4>{{ $act['title'] }}</h4>
                                <p>{{ $act['desc'] }}</p>
                                <span class="time-ago">{{ \Carbon\Carbon::parse($act['time'])->diffForHumans() }}</span>
                            </div>
                        </li>
                    @empty
                        <li style="font-size: 0.88rem; color: var(--text-light); text-align: center; padding: 20px 0; list-style: none;">Belum ada aktivitas terbaru.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection