@extends('adminlte::page')

@section('title', 'Live Monitoring KBM')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                <i class="fas fa-satellite-dish text-danger mr-2"></i> Live Monitoring KBM
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Pantauan real-time aktivitas belajar mengajar di seluruh cabang sekolah.
            </p>
        </div>
        <div>
            <a href="{{ route('dashboard') }}" class="btn btn-light rounded-pill px-3 shadow-sm border text-muted font-weight-bold">
                <i class="fas fa-arrow-left mr-1"></i> Kembali ke Dashboard
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid">
    <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
        <div class="card-header bg-dark text-white pt-3 pb-3 px-4 d-flex justify-content-between align-items-center">
            <h3 class="card-title font-weight-bold mb-0">
                Data KBM Berlangsung: <span class="text-warning">{{ \Carbon\Carbon::now()->format('H:i') }} WITA</span>
            </h3>
            <span class="badge badge-danger px-3 py-2 rounded-pill pulse-danger">
                <i class="fas fa-circle mr-1" style="font-size: 8px; vertical-align: middle;"></i> LIVE
            </span>
        </div>
        <div class="card-body table-responsive p-0">
            <table class="table table-hover table-striped mb-0 text-nowrap">
                <thead class="bg-light text-muted text-uppercase text-xs tracking-wide">
                    <tr>
                        <th class="pl-4">Nama Guru</th>
                        <th>Mata Pelajaran</th>
                        <th>Kelas</th>
                        <th>Cabang Sekolah</th>
                        <th class="text-center pr-4">Jam Pelajaran</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($kbmAktif as $kbm)
                    <tr>
                        <td class="pl-4 align-middle font-weight-bold text-dark">
                            <i class="fas fa-user-tie text-primary mr-2"></i> {{ $kbm->user->name ?? 'Unknown' }}
                        </td>
                        <td class="align-middle text-purple font-weight-bold">
                            {{ $kbm->mataPelajaran->nama_mapel ?? '-' }}
                        </td>
                        <td class="align-middle">
                            <span class="badge badge-info px-2 py-1">{{ $kbm->kelas->nama_kelas ?? '-' }}</span>
                        </td>
                        <td class="align-middle text-muted">
                            <i class="fas fa-building mr-1"></i> {{ $kbm->sekolah->nama_sekolah ?? '-' }}
                        </td>
                        <td class="text-center pr-4 align-middle">
                            <span class="badge badge-light border px-2 py-1 text-dark">
                                {{ \Carbon\Carbon::parse($kbm->jam_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($kbm->jam_selesai)->format('H:i') }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <i class="fas fa-bed fa-3x mb-3 text-light"></i><br>
                            Tidak ada aktivitas KBM (Kegiatan Belajar Mengajar) yang sedang berlangsung saat ini.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    .tracking-wide { letter-spacing: 0.05em; }
    .text-purple { color: #7C3AED !important; }
    .pulse-danger {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }
</style>
@stop

@section('js')
<script>
    // Refresh halaman otomatis setiap 1 menit (60000 ms) agar data selalu real-time
    setTimeout(function() {
        location.reload();
    }, 60000);
</script>
@stop