@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        @php use App\Enums\ExamStatus; use App\Enums\TestType; @endphp
        {{-- ── Banner: Today's Exams ──────────────────────────────────────────── --}}
        @if(isset($todayExams) && $todayExams->isNotEmpty())
        <div class="row mx-1 mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm border-radius-xl mb-0 overflow-hidden">
                    {{-- Card header --}}
                    <div class="card-header d-flex align-items-center justify-content-between py-2 px-4"
                         style="background: linear-gradient(135deg,#00b7bd 0%,#007b80 100%); border-bottom:0;">
                        <div class="d-flex align-items-center gap-2">
                            <i class="fas fa-calendar-check text-white" style="font-size:1rem;"></i>
                            <span class="text-white font-weight-bolder mb-0" style="font-size:.85rem;letter-spacing:.03em;">
                                Today's Exams
                            </span>
                            <span class="badge bg-white text-dark ms-1" style="font-size:.68rem;">
                                {{ $todayExams->count() }}
                            </span>
                        </div>
                        <span class="text-white opacity-8" style="font-size:.75rem;">
                            {{ now()->translatedFormat('l, d F Y') }}
                        </span>
                    </div>

                    {{-- Item list --}}
                    <div class="card-body p-0">
                        @foreach($todayExams as $loop_i => $todayItem)
                        @php
                            $idEnc      = encrypt($todayItem->id);
                            $testType   = TestType::tryFrom($todayItem->test_type);
                            $isProgress = $todayItem->status === ExamStatus::ON_PROGRESS->value;
                            $needAbsen  = !$todayItem->is_absen && !$isProgress;

                            if ($needAbsen) {
                                $rowBg       = '#fffbf0';
                                $accentColor = '#f59e0b';
                                $statusBadge = 'bg-gradient-warning';
                                $statusLabel = 'Needs Attendance';
                                $btnClass    = 'bg-gradient-danger';
                                $btnIcon     = 'fa-clipboard-check';
                                $btnLabel    = 'Take Attendance';
                                $btnHref     = url('trsatd') . '?open_schedule=' . $todayItem->schedule_id . '&redirect_back=trsexm';
                            } elseif ($isProgress) {
                                $rowBg       = '#fff8f0';
                                $accentColor = '#fb8c00';
                                $statusBadge = 'bg-gradient-warning';
                                $statusLabel = 'On Progress';
                                $btnClass    = 'bg-gradient-warning';
                                $btnIcon     = 'fa-desktop';
                                $btnLabel    = 'Monitor';
                                $btnHref     = url($url_menu . '/manage/' . $idEnc);
                            } else {
                                $rowBg       = '#f0feff';
                                $accentColor = '#00b7bd';
                                $statusBadge = 'bg-gradient-info';
                                $statusLabel = 'Scheduled';
                                $btnClass    = 'bg-gradient-primary';
                                $btnIcon     = 'fa-cog';
                                $btnLabel    = 'Settings';
                                $btnHref     = url($url_menu . '/manage/' . $idEnc);
                            }
                        @endphp
                        <div class="d-flex align-items-center px-4 py-3 gap-3
                                    {{ !$loop->last ? 'border-bottom' : '' }}"
                             style="background:{{ $rowBg }}; border-left: 4px solid {{ $accentColor }};">

                            {{-- Accent dot / pulse --}}
                            <div class="flex-shrink-0">
                                @if($isProgress)
                                    <span class="position-relative d-inline-block" style="width:10px;height:10px;">
                                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle bg-warning opacity-5"
                                              style="animation:pulse-ring 1.4s ease-out infinite;"></span>
                                        <span class="position-absolute top-0 start-0 w-100 h-100 rounded-circle bg-warning"
                                              style="width:10px;height:10px;display:inline-block;border-radius:50%;"></span>
                                    </span>
                                @elseif($needAbsen)
                                    <i class="fas fa-exclamation-triangle text-warning" style="font-size:.85rem;"></i>
                                @else
                                    <i class="fas fa-clock" style="color:{{ $accentColor }};font-size:.85rem;"></i>
                                @endif
                            </div>

                            {{-- Training info --}}
                            <div class="flex-grow-1 min-width-0">
                                <div class="font-weight-bolder text-dark text-sm mb-1"
                                     style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                    {{ $todayItem->training_name }}
                                </div>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <span class="badge {{ $statusBadge }} badge-sm" style="font-size:.63rem;">
                                        {{ $statusLabel }}
                                    </span>
                                    @if($testType)
                                        <span class="badge badge-sm {{ $testType->badgeClass() }}" style="font-size:.63rem;">
                                            {{ $testType->label() }}
                                        </span>
                                    @endif
                                    @if(
                                        ($todayItem->control_type ?? null) === 'TIMER' &&
                                        ($todayItem->status ?? null) === ExamStatus::ON_PROGRESS->value &&
                                        !empty($todayItem->end_time)
                                    )
                                        <span class="badge bg-gradient-danger text-white text-xxs js-admin-countdown"
                                              data-end-time="{{ \Carbon\Carbon::parse($todayItem->end_time)->format('Y-m-d H:i:s') }}">
                                            Sisa: 00:00:00
                                        </span>
                                    @endif
                                </div>
                            </div>

                            {{-- CTA --}}
                            <div class="flex-shrink-0">
                                <a href="{{ $btnHref }}"
                                   class="btn btn-sm {{ $btnClass }} mb-0 px-3 d-flex align-items-center gap-1"
                                   style="font-size:.75rem;white-space:nowrap;">
                                    <i class="fas {{ $btnIcon }}"></i>
                                    <span>{{ $btnLabel }}</span>
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <style>
            @keyframes pulse-ring {
                0%   { transform: scale(1);   opacity: .6; }
                80%  { transform: scale(2.4); opacity: 0;  }
                100% { transform: scale(2.4); opacity: 0;  }
            }
        </style>
        <script>
            (function () {
                const trsexmTodayCountdownUI = {
                    nodes: [],
                    syncUrl: '{{ route('trsexm.live_status') }}',
                    reloadTriggered: false,
                    serverNowAtLoad: {{ now()->getTimestampMs() }},
                    perfStart: performance.now(),

                    formatHms(totalSeconds) {
                        const sec = Math.max(0, totalSeconds);
                        const hh = String(Math.floor(sec / 3600)).padStart(2, '0');
                        const mm = String(Math.floor((sec % 3600) / 60)).padStart(2, '0');
                        const ss = String(sec % 60).padStart(2, '0');
                        return `${hh}:${mm}:${ss}`;
                    },

                    // Trigger server-side autoProcessTimerExams dengan dummy sync call
                    triggerServerSync() {
                        // Call ke live_status endpoint dengan exam_id=0 untuk trigger autoProcessTimerExams
                        return fetch(this.syncUrl + '?exam_id=0', {
                            headers: { 
                                'X-Requested-With': 'XMLHttpRequest', 
                                'Accept': 'application/json' 
                            }
                        }).catch(() => null);
                    },

                    hardReloadCurrentPage() {
                        const url = new URL(window.location.href);
                        url.searchParams.set('_ts', Date.now().toString());
                        window.location.replace(url.toString());
                    },

                    tick() {
                        const currentServerMs = this.serverNowAtLoad + (performance.now() - this.perfStart);
                        let shouldReload = false;

                        this.nodes.forEach((node) => {
                            const raw = node.getAttribute('data-end-time') || '';
                            const endAt = new Date(raw.replace(' ', 'T')).getTime();

                            if (!endAt || Number.isNaN(endAt)) {
                                node.textContent = 'Sisa: --:--:--';
                                return;
                            }

                            const remain = Math.floor((endAt - currentServerMs) / 1000);
                            if (remain <= 0) {
                                node.textContent = 'Sisa: 00:00:00';
                                node.classList.remove('bg-gradient-danger');
                                node.classList.add('bg-gradient-secondary');
                                
                                // Mark untuk reload jika timer habis
                                if (!this.reloadTriggered) {
                                    shouldReload = true;
                                }
                                return;
                            }

                            node.textContent = `Sisa: ${this.formatHms(remain)}`;
                        });

                        // Auto-reload saat timer habis
                        if (shouldReload && !this.reloadTriggered) {
                            this.reloadTriggered = true;
                            console.log('[trsexmToday] Timer habis, trigger server sync...');
                            
                            // Panggil server untuk trigger autoProcessTimerExams
                            this.triggerServerSync().finally(() => {
                                console.log('[trsexmToday] Auto-refresh dalam 2 detik...');
                                window.setTimeout(() => this.hardReloadCurrentPage(), 2000);
                            });
                        }
                    },

                    init() {
                        this.nodes = Array.from(document.querySelectorAll('.js-admin-countdown'));
                        if (!this.nodes.length) {
                            return;
                        }
                        this.tick();
                        setInterval(() => this.tick(), 1000);
                    }
                };

                window.trsexmTodayCountdownUI = trsexmTodayCountdownUI;
                trsexmTodayCountdownUI.init();
            })();
        </script>
        @endif
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card border-0 shadow-sm mt-3">
                        <div class="row align-items-center">
                            <div class="card-header col-md-auto bg-transparent">
                                <h5 class="mb-0">Exam Execution List</h5>
                                <p class="text-xs text-secondary mb-0 mt-1">Monitor exam status, countdown timer, and quick access to exam management.</p>
                            </div>
                            <div class="col mt-2 mt-md-0">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        @include('assesm.trsexm._partials.filter')
                        @include('assesm.trsexm._partials.data_table')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@include('assesm._partials.jsmenu_push')