@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description d-flex align-items-center justify-content-between">
                <h1>Generate API Key</h1>
                <a href="{{ route('api-management.index') }}" class="btn btn-outline-secondary">
                    <i class="material-icons-outlined">arrow_back</i> Kembali
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('api-management.store') }}" method="POST">
                        @csrf

                        <div class="mb-3">
                            <label for="name" class="form-label">Nama API Key <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" placeholder="Contoh: LIMS Integration, ERP Sync" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Nama deskriptif untuk mengidentifikasi key ini.</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Scopes (Hak Akses)</label>
                            <div class="card bg-light">
                                <div class="card-body">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="scope_all" name="scopes[]" value="all" {{ old('scopes') === null ? 'checked' : '' }} onchange="toggleAllScopes(this)">
                                        <label class="form-check-label fw-bold" for="scope_all">
                                            All Access (Semua endpoint)
                                        </label>
                                    </div>
                                    <hr>
                                    @foreach($availableScopes as $scope => $description)
                                    <div class="form-check mb-2">
                                        <input class="form-check-input scope-checkbox" type="checkbox" id="scope_{{ str_replace(':', '_', $scope) }}" name="scopes[]" value="{{ $scope }}" {{ is_array(old('scopes')) && in_array($scope, old('scopes')) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="scope_{{ str_replace(':', '_', $scope) }}">
                                            <code>{{ $scope }}</code> — {{ $description }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="rate_limit" class="form-label">Rate Limit (requests/menit)</label>
                                <input type="number" class="form-control @error('rate_limit') is-invalid @enderror" id="rate_limit" name="rate_limit" value="{{ old('rate_limit', 60) }}" min="1" max="1000" required>
                                @error('rate_limit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Default: 60 requests per menit.</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="expiry_duration" class="form-label">Masa Berlaku</label>
                                <select class="form-select" id="expiry_duration" name="expiry_duration" onchange="handleExpiryChange(this)">
                                    <option value="" {{ old('expiry_duration') === null ? 'selected' : '' }}>Tidak pernah kedaluwarsa</option>
                                    <option value="30" {{ old('expiry_duration') === '30' ? 'selected' : '' }}>30 hari</option>
                                    <option value="90" {{ old('expiry_duration') === '90' ? 'selected' : '' }}>90 hari</option>
                                    <option value="365" {{ old('expiry_duration') === '365' ? 'selected' : '' }}>1 tahun</option>
                                    <option value="custom" {{ old('expiry_duration') === 'custom' ? 'selected' : '' }}>Custom</option>
                                </select>
                                <input type="datetime-local" class="form-control mt-2 {{ old('expiry_duration') === 'custom' ? '' : 'd-none' }} @error('expires_at') is-invalid @enderror" id="expires_at" name="expires_at" value="{{ old('expires_at') }}">
                                @error('expires_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                            <button type="submit" class="btn btn-primary" onclick="return confirm('Generate API key baru?')">
                                <i class="material-icons-outlined">vpn_key</i> Generate Key
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0"><i class="material-icons-outlined">info</i> Informasi</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2"><i class="material-icons-outlined text-warning" style="font-size:16px;vertical-align:middle;">warning</i> API Key hanya ditampilkan <strong>sekali</strong> saat pembuatan.</li>
                        <li class="mb-2"><i class="material-icons-outlined text-info" style="font-size:16px;vertical-align:middle;">lock</i> Key disimpan dalam bentuk hash (SHA-256).</li>
                        <li class="mb-2"><i class="material-icons-outlined text-success" style="font-size:16px;vertical-align:middle;">speed</i> Rate limit membatasi jumlah request per menit.</li>
                        <li><i class="material-icons-outlined text-danger" style="font-size:16px;vertical-align:middle;">timer</i> Key tanpa expiry berlaku selamanya sampai dicabut.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleAllScopes(checkbox) {
    const scopeCheckboxes = document.querySelectorAll('.scope-checkbox');
    scopeCheckboxes.forEach(cb => {
        cb.checked = false;
        cb.disabled = checkbox.checked;
    });
}

function handleExpiryChange(select) {
    const customInput = document.getElementById('expires_at');
    if (select.value === 'custom') {
        customInput.classList.remove('d-none');
        customInput.required = true;
    } else {
        customInput.classList.add('d-none');
        customInput.value = '';
        customInput.required = false;
    }
}

// Initialize on load
document.addEventListener('DOMContentLoaded', function() {
    const allCheckbox = document.getElementById('scope_all');
    if (allCheckbox.checked) {
        toggleAllScopes(allCheckbox);
    }
});
</script>
@endsection