@extends('adminlte::page')

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

@section('content_header')
@stop

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --font-main: 'Poppins', sans-serif;
        --apex-bg: #F2F4F8; 
        
        /* Gradients Apex Style */
        --grad-teal: linear-gradient(135deg, #1DE9B6 0%, #1DC4E9 100%);
        --grad-orange: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
        --grad-green: linear-gradient(135deg, #56AB2F 0%, #A8E063 100%);
        --grad-pink: linear-gradient(135deg, #F857A6 0%, #FF5858 100%);
        
        /* Tombol Aksi */
        --grad-action: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); 
        
        --text-dark: #2c3e50;
        --text-muted: #95a5a6;
    }

    body {
        font-family: var(--font-main) !important;
        background-color: var(--apex-bg);
        color: var(--text-dark);
    }

    /* --- 1. HEADER --- */
    .page-header-apex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-top: 1rem;
    }
    .header-title { font-size: 1.5rem; font-weight: 700; color: #343a40; margin: 0; }
    .header-subtitle { color: #98a6ad; font-size: 0.9rem; margin: 0; }

    /* --- 2. STATS CARDS --- */
    .apex-stat-card {
        border-radius: 15px;
        padding: 25px 20px;
        color: white;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.2);
        border: none;
        height: 150px;
        transition: transform 0.3s;
        display: flex; flex-direction: column; justify-content: flex-start;
    }
    .apex-stat-card:hover { transform: translateY(-5px); }

    .bg-g-teal { background: var(--grad-teal); }
    .bg-g-orange { background: var(--grad-orange); }
    .bg-g-green { background: var(--grad-green); }
    .bg-g-pink { background: var(--grad-pink); }

    .stat-value { font-size: 2.2rem; font-weight: 700; line-height: 1; z-index: 2; margin-bottom: 5px; }
    .stat-label { font-size: 0.9rem; font-weight: 500; opacity: 0.9; z-index: 2; text-transform: uppercase; letter-spacing: 1px; }
    .stat-icon-top { position: absolute; top: 20px; right: 20px; font-size: 1.5rem; opacity: 0.3; z-index: 2; }
    
    .stat-wave {
        position: absolute; bottom: -5px; left: 0; width: 100%; height: 60px;
        opacity: 0.4; pointer-events: none; z-index: 1;
    }

    /* --- 3. SECTION DIVIDER --- */
    .school-divider {
        display: flex; align-items: center; margin: 35px 0 20px 0;
    }
    .school-icon {
        width: 42px; height: 42px; border-radius: 12px; background: white;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05); color: #6a11cb; font-size: 1.2rem; margin-right: 15px;
    }
    .school-title { font-size: 1.25rem; font-weight: 700; color: #343a40; margin: 0; }
    .school-line { flex-grow: 1; height: 2px; background: #e9ecef; margin-left: 20px; border-radius: 2px; }
    .school-badge { background: #dee2e6; padding: 5px 15px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; color: #495057; }

    /* --- 4. KBM CARDS --- */
    .kbm-card-profile {
        background: white;
        border-radius: 20px;
        padding: 30px 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.02);
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .kbm-card-profile:hover {
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        transform: translateY(-5px);
    }

    .status-dot-corner {
        position: absolute; top: 20px; right: 20px;
        width: 12px; height: 12px; border-radius: 50%;
        z-index: 5;
    }
    .dot-live { background: #00E396; box-shadow: 0 0 0 4px rgba(0, 227, 150, 0.2); animation: pulse 2s infinite; }
    .dot-wait { background: #FEB019; }
    .dot-done { background: #E0E0E0; }

    .profile-avatar {
        width: 85px; height: 85px;
        border-radius: 50%;
        margin: 0 auto 15px;
        padding: 4px;
        background: white;
        border: 1px solid #f1f1f1;
        object-fit: cover;
    }
    .border-live { border: 3px solid #00E396; }

    .profile-name { font-size: 1.1rem; font-weight: 700; color: #2c304d; margin-bottom: 5px; line-height: 1.3; }
    .profile-mapel { font-size: 0.85rem; color: #99abb4; margin-bottom: 25px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
    
    /* Info Bar Update */
    .profile-info-bar {
        background: #F8F9FA;
        border-radius: 15px;
        padding: 12px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
    }
    .info-item { display: flex; flex-direction: column; font-weight: 700; color: #5b626b; line-height: 1.2; text-align: center; }
    .info-item small { font-weight: 600; color: #adb5bd; font-size: 0.65rem; text-transform: uppercase; margin-bottom: 4px; }

    .btn-profile-action {
        width: 100%;
        border-radius: 50px;
        padding: 12px;
        font-weight: 600;
        font-size: 0.9rem;
        border: none;
        color: white;
        background: var(--grad-action);
        box-shadow: 0 4px 15px rgba(37, 117, 252, 0.2);
        transition: all 0.3s;
        cursor: pointer;
    }
    .btn-profile-action:hover {
        box-shadow: 0 8px 25px rgba(37, 117, 252, 0.4);
        transform: translateY(-2px);
    }
    .btn-profile-action.btn-disabled {
        background: #e9ecef; color: #adb5bd; box-shadow: none; cursor: default;
    }
    
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(0, 227, 150, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(0, 227, 150, 0); }
        100% { box-shadow: 0 0 0 0 rgba(0, 227, 150, 0); }
    }
    
    /* Animasi Blink untuk Teks LIVE */
    .blink_me {
      animation: blinker 1.5s linear infinite;
    }
    @keyframes blinker {
      50% { opacity: 0; }
    }
</style>
@stop

@section('content')
<div class="container-fluid pb-5">

    {{-- 1. HEADER --}}
    <div class="page-header-apex">
        <div>
            <h1 class="header-title">Monitoring KBM</h1>
            <p class="header-subtitle">Dashboard Realtime Aktivitas Guru</p>
        </div>
        <div>
            {{-- Live Clock --}}
            <div class="bg-white rounded-pill px-4 py-2 shadow-sm d-flex align-items-center">
                <i class="far fa-clock text-primary mr-2"></i>
                <span class="font-weight-bold text-dark" id="liveClock">{{ date('H:i') }}</span>
            </div>
        </div>
    </div>

    {{-- 2. STATS CARDS --}}
    <div class="row mb-5">
        {{-- Total Sesi (Teal) --}}
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="apex-stat-card bg-g-teal">
                <i class="fas fa-layer-group stat-icon-top"></i>
                <div class="stat-value">{{ $jadwals->count() }}</div>
                <div class="stat-label">Total Sesi</div>
                <svg class="stat-wave" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#ffffff" fill-opacity="0.25" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
            </div>
        </div>

        {{-- Live Now (Green) --}}
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="apex-stat-card bg-g-green">
                <i class="fas fa-video stat-icon-top"></i>
                @php $liveCount = $jadwals->where('status_badge', 'live')->count(); @endphp
                <div class="stat-value">{{ $liveCount }}</div>
                <div class="stat-label">Sedang Live</div>
                <svg class="stat-wave" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#ffffff" fill-opacity="0.25" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
            </div>
        </div>

        {{-- Belum Hadir (Orange) --}}
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="apex-stat-card bg-g-orange">
                <i class="fas fa-clock stat-icon-top"></i>
                @php $waitCount = $jadwals->where('status_badge', 'warning')->count(); @endphp
                <div class="stat-value">{{ $waitCount }}</div>
                <div class="stat-label">Belum Hadir</div>
                <svg class="stat-wave" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#ffffff" fill-opacity="0.25" d="M0,224L48,213.3C96,203,192,181,288,154.7C384,128,480,96,576,112C672,128,768,192,864,202.7C960,213,1056,171,1152,149.3C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
            </div>
        </div>

        {{-- Selesai (Pink) --}}
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="apex-stat-card bg-g-pink">
                <i class="fas fa-check-circle stat-icon-top"></i>
                @php $doneCount = $jadwals->whereIn('status_badge', ['done', 'success'])->count(); @endphp
                <div class="stat-value">{{ $doneCount }}</div>
                <div class="stat-label">Selesai</div>
                <svg class="stat-wave" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#ffffff" fill-opacity="0.25" d="M0,64L48,85.3C96,107,192,149,288,160C384,171,480,149,576,128C672,107,768,85,864,101.3C960,117,1056,171,1152,181.3C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
            </div>
        </div>
    </div>

    {{-- SEARCH BAR --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="input-group bg-white rounded-pill shadow-sm px-2 border-0">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-transparent border-0 pl-3"><i class="fas fa-search text-muted"></i></span>
                </div>
                <input type="text" id="searchInput" class="form-control border-0 bg-transparent shadow-none" placeholder="Cari Nama Guru, Kelas, atau Mata Pelajaran..." style="height: 50px;">
            </div>
        </div>
    </div>

    {{-- 3. CONTENT GRID (GROUPED BY LEMBAGA) --}}
    <div id="cardContainer">
        @forelse($groupedJadwals as $namaSekolah => $items)
            
            {{-- DIVIDER PER SEKOLAH --}}
            <div class="school-divider" data-school="{{ strtolower($namaSekolah) }}">
                <div class="school-icon"><i class="fas fa-school"></i></div>
                <h4 class="school-title">{{ $namaSekolah }}</h4>
                <div class="school-line"></div>
                <div class="school-badge">{{ $items->count() }} Kelas</div>
            </div>

            {{-- GRID CARDS --}}
            <div class="row">
                @foreach($items as $jadwal)
                    @php
                        $isLive = ($jadwal->status_badge == 'live');
                        
                        $dotClass = $isLive ? 'dot-live' : ($jadwal->status_badge == 'warning' ? 'dot-wait' : 'dot-done');
                        $borderAvatar = $isLive ? 'border-live' : '';
                        
                        $btnLabel = $isLive ? 'Pantau Live' : 'Lihat Detail';
                        $btnClass = str_contains($jadwal->status_text, 'Selesai') ? 'btn-disabled' : '';

                        // === LOGIKA FOTO GURU ===
                        // Default fallback URL (Inisial)
                        $avatarUrl = 'https://ui-avatars.com/api/?name=' . urlencode($jadwal->user->name ?? 'Guru') . '&background=random&color=fff&size=128&bold=true';
                        
                        // Cek jika ada foto di database
                        // PENTING: Pastikan kolom di tabel users bernama 'foto'. 
                        // Jika namanya 'photo' atau 'avatar', ubah ->foto di bawah ini.
                        if (!empty($jadwal->user->foto)) {
                            // Menggunakan helper asset('storage/...')
                            $avatarUrl = asset('storage/' . $jadwal->user->foto);
                        }
                    @endphp

                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4 card-item" 
                         data-string="{{ strtolower($jadwal->user->name . ' ' . $jadwal->kelas->nama_kelas . ' ' . $jadwal->mataPelajaran->nama_mapel . ' ' . $namaSekolah) }}">
                        
                        <div class="kbm-card-profile">
                            
                            {{-- 1. Status Dot --}}
                            <div class="status-dot-corner {{ $dotClass }}" data-toggle="tooltip" title="{{ $jadwal->status_text }}"></div>

                            {{-- 2. Avatar & Nama Guru --}}
                            <div class="text-center">
                                {{-- Image Tag dengan Error Handling --}}
                                <img src="{{ $avatarUrl }}" 
                                     class="profile-avatar {{ $borderAvatar }}" 
                                     alt="Guru"
                                     {{-- Jika gambar 404/rusak, fallback ke UI Avatars --}}
                                     onerror="this.onerror=null;this.src='https://ui-avatars.com/api/?name={{ urlencode($jadwal->user->name ?? 'Guru') }}&background=red&color=fff';">
                                
                                <h5 class="profile-name text-truncate" title="{{ $jadwal->user->name }}">
                                    {{ $jadwal->user->name ?? 'Guru Kosong' }}
                                </h5>
                                <p class="profile-mapel text-truncate" title="{{ $jadwal->mataPelajaran->nama_mapel }}">
                                    {{ $jadwal->mataPelajaran->nama_mapel ?? '-' }}
                                </p>
                            </div>

                            {{-- 3. Info Bar (Waktu, Kelas, LOG GURU) --}}
                            <div class="profile-info-bar">
                                <div class="info-item">
                                    <small>Jadwal</small>
                                    {{ \Carbon\Carbon::parse($jadwal->jam_mulai)->format('H:i') }}
                                </div>
                                <div class="info-item">
                                    <small>Kelas</small>
                                    {{ $jadwal->kelas->nama_kelas ?? '-' }}
                                </div>
                                
                                {{-- Tampilan Log Jam Masuk/Keluar --}}
                                <div class="info-item" style="min-width: 85px;">
                                    <small>Log Guru</small>
                                    
                                    @if(isset($jadwal->waktu_masuk_guru) && $jadwal->waktu_masuk_guru && $jadwal->waktu_masuk_guru != '-')
                                        <span class="d-block font-weight-bold text-primary" style="font-size: 0.9rem; line-height: 1;">
                                            {{ $jadwal->waktu_masuk_guru }}
                                        </span>
                                        
                                        @if(isset($jadwal->waktu_keluar_guru) && $jadwal->waktu_keluar_guru != '-')
                                            <span class="d-block text-muted mt-1" style="font-size: 0.7rem;">
                                                s.d {{ $jadwal->waktu_keluar_guru }}
                                            </span>
                                        @else
                                            <div class="d-flex align-items-center justify-content-center mt-1 blink_me">
                                                <i class="fas fa-circle text-success mr-1" style="font-size: 6px;"></i>
                                                <span class="text-success font-weight-bold" style="font-size: 0.65rem;">LIVE</span>
                                            </div>
                                        @endif
                                    @else
                                        <span class="text-muted font-italic" style="font-size: 0.8rem;">-- : --</span>
                                    @endif
                                </div>
                            </div>

                            {{-- 4. Action Button --}}
                            <button onclick="showDetail({{ $jadwal->id }})" 
                                    class="btn-profile-action {{ $btnClass }}">
                                {{ $btnLabel }}
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>

        @empty
            <div class="col-12 text-center py-5">
                <div class="d-flex flex-column align-items-center">
                    <img src="https://cdn-icons-png.flaticon.com/512/7486/7486831.png" width="100" class="mb-3 opacity-25">
                    <h6 class="text-muted font-weight-bold">Tidak ada jadwal aktif hari ini.</h6>
                </div>
            </div>
        @endforelse
    </div>

    {{-- MODAL DETAIL --}}
    <div class="modal fade" id="modalDetail" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0" style="border-radius: 20px;">
                <div class="modal-body p-0" id="modalDetailContent">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
        
        // Search Filter (Support Grouping)
        $("#searchInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#cardContainer .card-item").filter(function() {
                $(this).toggle($(this).data('string').indexOf(value) > -1)
            });
        });

        // Live Clock
        setInterval(function() {
            var now = new Date();
            var hours = String(now.getHours()).padStart(2, '0');
            var minutes = String(now.getMinutes()).padStart(2, '0');
            $('#liveClock').text(hours + ':' + minutes);
        }, 10000);
    });

    function showDetail(jadwalId) {
        $('#modalDetail').modal('show');
        $('#modalDetailContent').html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>');
        
        // AJAX URL FIXED: Menambahkan prefix '/akademik'
        $.ajax({
            url: '/akademik/monitoring/detail/' + jadwalId, 
            type: 'GET',
            success: function(response) { $('#modalDetailContent').html(response); },
            error: function(xhr) { 
                console.log('Error:', xhr);
                $('#modalDetailContent').html('<div class="text-center py-5 text-danger">Gagal memuat data. <br><small>Cek Console Log</small></div>'); 
            }
        });
    }
</script>
@stop