@php use App\Enums\ControlType; @endphp
@php use App\Enums\ExamStatus; @endphp
@php $hasTimerConfigured = !empty($exam->start_time) && !empty($exam->end_time); @endphp
@php $isLockedDueToPast = !empty($exam->is_locked_due_to_past); @endphp

{{-- Control Center --}}
<div class="col-lg-4">
    <div class="card shadow-sm border-0 border-radius-xl h-100 overflow-hidden">
        <div class="card-header bg-gray-50 text-center p-4 border-bottom">
            <h6 class="text-secondary opacity-8 text-xxs font-weight-bolder text-uppercase mb-2 tracking-widest">
                Global Session Timer</h6>
            <h1 class="text-dark mb-0 display-4 timer-font" id="timerDisplay"
                style="font-weight: 800; color: #344767 !important;">{{ $exam->time_remaining }}</h1>
            <div class="mt-2">
                @if (($exam->control_type ?? null) === ControlType::TIMER->value)
                    <span class="badge bg-soft-info text-info text-xxs font-weight-bolder text-uppercase px-3 py-2">
                        Auto Timer Mode
                    </span>
                @else
                    <span class="badge bg-soft-secondary text-secondary text-xxs font-weight-bolder text-uppercase px-3 py-2">
                        Manual Control Mode
                    </span>
                @endif
            </div>
        </div>
        <div class="card-body p-4 bg-white">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-xxs font-weight-bolder text-secondary text-uppercase">Submission
                    Progress</span>
                <span class="text-xxs font-weight-bolder text-dark" id="progressLabel">{{ $exam->progress_percent }}%
                    ({{ $exam->submitted_count }}/{{ $exam->total_count }})</span>
            </div>
            <div class="progress mb-4" style="height: 8px; border-radius: 4px; background-color: #f1f3f5;">
                <div class="progress-bar bg-primary" role="progressbar" id="mainProgressBar"
                    style="width: {{ $exam->progress_percent }}%;"></div>
            </div>

            <div class="d-grid gap-2" id="controlButtons">
                @if ($exam->status == ExamStatus::SCHEDULED->value)
                    @if ($isLockedDueToPast)
                        <div class="alert alert-warning text-dark mb-0 py-3">
                            <div class="d-flex align-items-start gap-3">
                                <i class="fas fa-lock mt-1 text-dark"></i>
                                <div>
                                    <div class="font-weight-bolder text-sm mb-1">Control terkunci karena schedule sudah lewat.</div>
                                    <div class="text-xs mb-0">Perbarui tanggal/jam di TRN lalu refresh halaman ini untuk membuka start / auto timer.</div>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div id="btnGroupManual">
                        <button type="button"
                            class="btn btn-primary btn-lg border-radius-lg shadow-sm py-3 mb-0 w-100"
                            {{ $hasTimerConfigured || $isLockedDueToPast ? 'disabled' : '' }}
                            onclick="handleAction('start')">
                            <i class="fas fa-play me-2"></i> START EXAMINATION
                        </button>
                    </div>
                    <div id="btnGroupAuto" class="d-none">
                        <button type="button"
                            class="btn btn-primary btn-lg border-radius-lg shadow-sm py-3 mb-0 w-100"
                            {{ $hasTimerConfigured || $isLockedDueToPast ? 'disabled' : '' }}
                            onclick="handleAction('save_timer')">
                            <i class="fas fa-save me-2"></i> {{ $hasTimerConfigured ? 'TIMER SUDAH AKTIF' : 'ACTIVATE TIMER' }}
                        </button>
                    </div>
                @elseif($exam->status == ExamStatus::ON_PROGRESS->value)
                    @if ($exam->control_type === ControlType::MANUAL->value)
                        <button type="button" class="btn btn-danger btn-lg border-radius-lg shadow-sm py-3 mb-0"
                            onclick="handleAction('stop')">
                            <i class="fas fa-stop me-2"></i> CLOSE SESSION MANUALLY
                        </button>
                        <small class="text-xs text-secondary text-center d-block mt-2">
                            Session hanya bisa dihentikan oleh admin.
                        </small>
                    @else
                        <button type="button" class="btn btn-secondary btn-lg border-radius-lg shadow-sm py-3 mb-0" disabled>
                            <i class="fas fa-clock me-2"></i> SESSION CLOSES AUTOMATICALLY
                        </button>
                        <small class="text-xs text-secondary text-center d-block mt-2">
                            Auto Timer aktif. Session akan selesai sesuai jadwal yang diset.
                        </small>
                    @endif
                    <button type="button"
                        class="btn btn-outline-info btn-sm mt-3 border-radius-lg shadow-none"
                        data-bs-toggle="modal" data-bs-target="#modalProgress">
                        <i class="fas fa-chart-line me-2"></i> MONITOR LIVE PROGRESS
                    </button>
                @elseif($exam->status == ExamStatus::FINISHED->value)
                    <button type="button" class="btn btn-success btn-lg border-radius-lg shadow-sm py-3 mb-0"
                        data-bs-toggle="modal" data-bs-target="#modalResult">
                        <i class="fas fa-poll-h me-2"></i> VIEW FINAL REPORT
                    </button>
                    <button type="button"
                        class="btn btn-outline-secondary btn-sm mt-3 border-radius-lg shadow-none"
                        onclick="window.location.reload()">
                        <i class="fas fa-sync-alt me-2"></i> REFRESH DATA
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>