@extends('layouts.app')

@section('content')
<div class="page-heading">
    <h3>Manajemen Token Ujian</h3>
</div>

@if(session('success'))
    <script>
        Swal.fire({
            position: 'top-center',
            icon: 'success',
            title: '{{ session("success") }}',
            showConfirmButton: false,
            timer: 1500
        });
    </script>
@endif

<section class="section">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <h4>Token Ujian Aktif</h4>
            <form action="{{ route('token_ujian.generate') }}" method="POST" 
                  onsubmit="return confirm('Apakah Anda yakin ingin membuat token ujian baru? Token lama akan dihapus.')">
                @csrf
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-key"></i> Generate Token Baru
                </button>
            </form>
        </div>
        <div class="card-body">
            @if($token)
                <p class="mb-2">Token Saat Ini:</p>
                <div class="d-flex align-items-center">
                    <span class="text-monospace fs-4 fw-bold" id="token-text">{{ $token->token }}</span>
                    <button class="btn btn-sm btn-outline-primary ms-2 copy-token">
                        <i class="bi bi-clipboard"></i>
                    </button>
                </div>
                <p class="mt-2 text-muted">
                    Berlaku dari: <strong>{{ $token->time_start }}</strong> sampai <strong>{{ $token->time_end }}</strong>
                </p>
            @else
                <p class="text-muted">Belum ada token ujian yang dibuat.</p>
            @endif
        </div>
    </div>
</section>

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelector('.copy-token').addEventListener('click', function () {
        let tokenText = document.getElementById('token-text').innerText;
        navigator.clipboard.writeText(tokenText).then(() => {
            Swal.fire({
                position: 'top-center',
                icon: 'success',
                title: 'Token berhasil disalin!',
                showConfirmButton: false,
                timer: 1000
            });
        }).catch(err => {
            Swal.fire({
                position: 'top-center',
                icon: 'error',
                title: "Gagal menyalin token!",
                showConfirmButton: false,
                timer: 1000
            });
        });
    });
});
</script>
@endsection