@extends('layouts.app')

@section('content')
<div class="page-heading">
    <h3>Manajemen Token API</h3>
    <p>Generate token baru memaksa anda untuk mem-build aplikasi baru. Jika tidak diperlukan, generate Token API baru tidak perlu dilakukan.</p>
</div>

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

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.copy-token').forEach(button => {
        button.addEventListener('click', function () {
            let tokenId = this.getAttribute('data-token-id');
            let tokenText = document.getElementById(tokenId).innerText;

            navigator.clipboard.writeText(tokenText).then(() => {
                Swal.fire({
                    position: 'top-center',
                    icon: 'success',
                    title: 'Berhasil disalin!',
                    showConfirmButton: false,
                    timer: 1000
                });
            }).catch(err => {
                Swal.fire({
                    position: 'top-center',
                    icon: 'error',
                    title: "Gagal menyalin!",
                    showConfirmButton: false,
                    timer: 1000
                });
            });
        });
    });
});
</script>

<section class="section">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <h4></h4>
            <form action="{{ route('token_api.generate') }}" method="POST" 
                  onsubmit="return confirm('Apakah Anda yakin ingin membuat ulang token API? 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($tokens->isEmpty())
                <p class="text-muted">Belum ada token API yang dibuat.</p>
            @else
                <ul class="list-group">
                    @foreach($tokens as $token)
                        <label for="" class="mb-1">Token Aktif</label>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="text-monospace" id="token-{{ $loop->index }}">{{ $token->token }}</span>
                            <button class="btn btn-sm btn-outline-primary copy-token" data-token-id="token-{{ $loop->index }}">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </li>
                    @endforeach
                        
                    <label for="" class="mb-1 mt-3">URL</label>
                    <li class="list-group-item d-flex justify-content-between align-items-center mb-3">
                        <span class="text-monospace" id="url">{{ url('') }}</span>
                        <button class="btn btn-sm btn-outline-primary copy-token" data-token-id="url">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </li>
                </ul>
            @endif
        </div>
    </div>
</section>
@endsection