@php
use App\Enums\ExamStatus;
use App\Enums\ControlType;
@endphp

{{-- Management Info & Control --}}
<div class="col-lg-8">
    <div class="card shadow-sm border-0 border-radius-xl mb-4">
        <div class="card-header bg-gray-50 pb-0">
            <div class="d-flex align-items-center">
                <h6 class="mb-0 font-weight-bolder text-uppercase text-xs text-secondary tracking-wider">Detail
                    Training & Exercise</h6>
            </div>
        </div>
        <div class="card-body pt-3 pb-4">
            <div class="row g-4">
                <div class="col-md-6 border-end">
                    <div class="d-flex flex-column gap-3">
                        <div class="d-flex align-items-center">
                            <div class="bg-soft-primary p-2 border-radius-md me-3"><i
                                    class="fas fa-id-badge text-primary"></i></div>
                            <div>
                                <p class="text-xxs text-secondary text-uppercase font-weight-bolder mb-0 opacity-7">
                                    TRN Identifier</p>
                                <h6 class="text-sm font-weight-bold mb-0 text-dark">{{ $exam->trn_id }}</h6>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="bg-soft-primary p-2 border-radius-md me-3"><i
                                    class="far fa-calendar-alt text-primary"></i></div>
                            <div>
                                <p class="text-xxs text-secondary text-uppercase font-weight-bolder mb-0 opacity-7">
                                    Date & Venue</p>
                                <h6 class="text-sm font-weight-bold mb-0 text-dark">{{ $exam->date_full }} @
                                    {{ $exam->location }}</h6>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="bg-soft-primary p-2 border-radius-md me-3"><i
                                    class="fas fa-users text-primary"></i></div>
                            <div>
                                <p class="text-xxs text-secondary text-uppercase font-weight-bolder mb-0 opacity-7">
                                    Enrolled Participants</p>
                                <h6 class="text-sm font-weight-bold mb-0 text-dark">
                                    {{ $exam->participants_count }} Candidates Authorized</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 ps-md-4">
                    {{-- Timer Mode Select Only if Scheduled --}}
                    @if ($exam->status == ExamStatus::SCHEDULED->value)
                        @if (!empty($exam->is_locked_due_to_past))
                            <div class="alert alert-danger text-white mb-3 py-3">
                                <div class="d-flex align-items-start gap-3">
                                    <i class="fas fa-lock mt-1"></i>
                                    <div>
                                        <div class="font-weight-bolder text-sm mb-1">Action terkunci karena schedule sudah lewat.</div>
                                        <div class="text-xs mb-0">Silakan ubah tanggal/jam schedule di menu TRN terlebih dahulu untuk membuka kembali kontrol exam ini.</div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @php $hasTimerConfigured = !empty($exam->start_time) && !empty($exam->end_time); @endphp
                        <h6 class="text-xxs text-secondary text-uppercase font-weight-bolder mb-3 opacity-7">
                            Mode Pelaksanaan</h6>
                        <div class="nav-wrapper position-relative end-0">
                            <ul class="nav nav-pills nav-fill p-1 bg-gray-100 border-radius-lg" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link mb-0 px-0 py-1 active text-xs font-weight-bold"
                                        id="tabManual" data-bs-toggle="tab" href="javascript:void(0)"
                                        onclick="toggleTimerMode('manual')">Manual Control</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link mb-0 px-0 py-1 text-xs font-weight-bold" id="tabAuto"
                                        data-bs-toggle="tab" href="javascript:void(0)"
                                        onclick="toggleTimerMode('auto')">Auto Timer</a>
                                </li>
                            </ul>
                        </div>
                        <div id="autoTimerSettings" class="row mt-3 d-none animate__animated animate__fadeIn">
                            <div class="col-6">
                                <label class="form-label text-xxs font-weight-bolder text-uppercase mb-1">Start
                                    Time</label>
                                <input type="time" class="form-control form-control-sm border-radius-md"
                                    name="start_time"
                                    value="{{ !empty($exam->start_time) ? \Carbon\Carbon::parse($exam->start_time)->format('H:i') : '' }}"
                                    min="{{ now()->format('H:i') }}"
                                    {{ $hasTimerConfigured ? 'disabled' : '' }}>
                            </div>
                            <div class="col-6">
                                <label class="form-label text-xxs font-weight-bolder text-uppercase mb-1">End
                                    Time</label>
                                <input type="time" class="form-control form-control-sm border-radius-md"
                                    name="end_time"
                                    value="{{ !empty($exam->end_time) ? \Carbon\Carbon::parse($exam->end_time)->format('H:i') : '' }}"
                                    min="{{ now()->format('H:i') }}"
                                    {{ $hasTimerConfigured ? 'disabled' : '' }}>
                            </div>
                            @if ($hasTimerConfigured)
                                <div class="col-12 mt-2 text-end">
                                    <button type="button" class="btn btn-outline-danger btn-sm mb-0"
                                        onclick="handleAction('cancel_timer')">
                                        <i class="fas fa-ban me-1"></i> Batalkan Auto Timer
                                    </button>
                                </div>
                            @endif
                        </div>
                        <div id="manualInfo" class="mt-3 text-center p-2 bg-gray-50 border-radius-md border">
                            <small class="text-secondary opacity-7 text-xs font-weight-bold italic">Admin will
                                start & stop exam manually.</small>
                            @if ($hasTimerConfigured)
                                <div class="mt-2 pt-2 border-top">
                                    <small class="text-xxs text-secondary d-block">Auto timer terset:</small>
                                    <span class="badge bg-soft-info text-info text-xxs">
                                        {{ $exam->start_time }} - {{ $exam->end_time }}
                                    </span>
                                    <div class="mt-2">
                                        <button type="button" class="btn btn-outline-danger btn-sm mb-0"
                                            onclick="handleAction('cancel_timer')">
                                            <i class="fas fa-ban me-1"></i> Batalkan Auto Timer
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @else
                        <div
                            class="d-flex flex-column h-100 justify-content-center align-items-center bg-gray-100 border-radius-lg p-3">
                            <p class="text-xxs text-secondary text-uppercase font-weight-bolder mb-1">Session
                                Duration</p>
                            <h5 class="mb-0 text-dark font-weight-bolder">{{ $exam->schedule_time }}</h5>
                            <small class="text-primary text-xxs mt-2 font-weight-bold italic"><i
                                    class="fas fa-lock me-1"></i>
                                @if (!empty($exam->is_locked_due_to_past))
                                    Settings locked because schedule has passed. Update schedule in TRN first.
                                @else
                                    Settings Locked During Run
                                @endif
                            </small>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>