@extends('layouts.app')

@section('title', 'Cấu hình API | GreenCard.vn')

@section('content')
<main class="container dash-layout">
    @include('partials.dash-sidebar')

    <section class="dash-main card-panel">
        <h1>Cấu hình API</h1>
        <p class="page-sub">Quản lý khóa kết nối API và đường dẫn Webhook nhận Callback</p>

        <div class="info-grid" style="max-width:640px;grid-template-columns:150px 1fr;">
            <label>API Key</label>
            <div class="secret-row" style="margin-top:0;">
                <input type="text" readonly value="GC-{{ strtoupper(substr(md5($user->id.'api'), 0, 24)) }}" id="apiKey">
                <button type="button" onclick="copyField('apiKey')">&#128203;</button>
            </div>

            <label>Secret Key</label>
            <div class="secret-row" style="margin-top:0;">
                <input type="password" readonly value="{{ strtoupper(substr(md5($user->id.'secret'), 0, 32)) }}" id="secretKey">
                <button type="button" onclick="toggleSecret()">&#128065;</button>
            </div>

            <label>URL Webhook</label>
            <input class="input" placeholder="https://your-server.com/webhook/greencard" id="webhookUrl">

            <span></span>
            <span style="display:flex;gap:12px;">
                <button type="button" class="btn btn-green" onclick="showToast('Đã lưu cấu hình API!')">Lưu cấu hình</button>
                <a href="{{ route('tich-hop') }}" class="btn btn-outline">Xem tài liệu API</a>
            </span>
        </div>

        <div class="notice-box" style="margin-top:28px;max-width:640px;">
            - Không chia sẻ Secret Key cho bất kỳ ai. Khóa này dùng để ký chữ ký MD5 chống giả mạo dữ liệu.<br>
            - Máy chủ Webhook của bạn phải phản hồi HTTP 200 để hệ thống ngừng gửi lại Callback.<br>
            - Kết nối API mua thẻ, topup game, topup tiền điện thoại giá gốc.
        </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
function copyField(id) {
    var el = document.getElementById(id);
    navigator.clipboard.writeText(el.value).then(function () { showToast('Đã sao chép!'); });
}
function toggleSecret() {
    var el = document.getElementById('secretKey');
    el.type = el.type === 'password' ? 'text' : 'password';
}
</script>
@endpush