@extends('layouts.app')

@section('title', 'Tích hợp API | GreenCard.vn')

@section('content')
<main class="container dev-hub">
    <div class="eyebrow">&lt;/&gt; Developer Hub</div>
    <h1>Tài liệu kết nối API Hệ thống</h1>
    <p class="lede">
        Kết nối cổng thanh toán tự động với độ trễ thấp (<b>dưới 3 giây</b>). Hỗ trợ nạp thẻ, mua gói game, xả thẻ cào
        cấu trúc Callback thời gian thực tương thích hoàn toàn như cổng TheSieuRe.
    </p>

    <div class="doc-tabs">
        <button type="button" class="active" onclick="showDoc(0, this)">&#128241; API Nạp Thẻ Điện Thoại</button>
        <button type="button" onclick="showDoc(1, this)">&#127918; API Nạp Game Tự Động</button>
        <button type="button" onclick="showDoc(2, this)">&#128179; Đổi Thẻ Cào (Gạch Thẻ)</button>
    </div>

    {{-- Tab 1: API nạp thẻ điện thoại --}}
    <section class="card-panel doc-card doc-pane" id="doc0">
        <h2>API Gửi Thẻ Cào / Nạp Tiền Điện Thoại</h2>
        <p class="desc">Endpoint này cho phép bạn đẩy thông tin thẻ cào mạng Viettel, Vinaphone, Mobifone hoặc thẻ dữ liệu lên hệ thống để nạp trực tiếp vào số tài khoản điện thoại khách hàng.</p>

        <span class="method-pill">METHOD POST</span>
        <div class="endpoint"><span class="verb">POST</span>https://api.greencard.vn/v1/charging/phone</div>

        <div class="code-label">Cấu trúc dữ liệu gửi đi (Request Body)</div>
        <div class="code-block">
            <div class="code-head"><span>JSON</span><button type="button" onclick="copyCode(this)">&#128203; Sao chép</button></div>
            <pre>{
  <span class="k">"api_key"</span>: <span class="s">"YOUR_PARTNER_API_KEY"</span>,
  <span class="k">"sign"</span>: <span class="s">"md5(api_key + telco + amount + pin + serial + secret_key)"</span>,
  <span class="k">"telco"</span>: <span class="s">"VIETTEL"</span>,
  <span class="k">"amount"</span>: 100000,
  <span class="k">"pin"</span>: <span class="s">"1234567890123"</span>,
  <span class="k">"serial"</span>: <span class="s">"1000098765432"</span>,
  <span class="k">"request_id"</span>: <span class="s">"YOUR_UNIQUE_ORDER_ID_01"</span>
}</pre>
        </div>

        <div class="code-label">Tham số</div>
        <table class="param-table">
            <thead><tr><th>Tham số</th><th>Kiểu</th><th>Mô tả</th></tr></thead>
            <tbody>
                <tr><td><code>api_key</code></td><td>string</td><td>Khóa định danh đối tác, lấy trong trang Cấu hình API</td></tr>
                <tr><td><code>sign</code></td><td>string</td><td>Chữ ký MD5 chống giả mạo dữ liệu</td></tr>
                <tr><td><code>telco</code></td><td>string</td><td>Nhà mạng: VIETTEL, VINAPHONE, MOBIFONE...</td></tr>
                <tr><td><code>amount</code></td><td>integer</td><td>Mệnh giá thẻ (VNĐ)</td></tr>
                <tr><td><code>pin</code> / <code>serial</code></td><td>string</td><td>Mã thẻ và số serial in trên thẻ cào</td></tr>
                <tr><td><code>request_id</code></td><td>string</td><td>Mã đơn hàng duy nhất phía đối tác</td></tr>
            </tbody>
        </table>
    </section>

    {{-- Tab 2: API nạp game --}}
    <section class="card-panel doc-card doc-pane" id="doc1" style="display:none;">
        <h2>API Mua Gói &amp; Nạp Game Trực Tiếp</h2>
        <p class="desc">Hỗ trợ tích hợp nạp tài khoản vật phẩm trực tiếp thông qua Player ID của các dòng game hot trên thị trường (Garena, Zing, Gate, Razer...). Hệ thống xử lý thông lượng API lớn mà không bị treo hàng đợi.</p>

        <span class="method-pill">METHOD POST</span>
        <div class="endpoint"><span class="verb">POST</span>https://api.greencard.vn/v1/charging/game</div>

        <div class="code-label">Cấu trúc dữ liệu gửi đi (Request Body)</div>
        <div class="code-block">
            <div class="code-head"><span>JSON</span><button type="button" onclick="copyCode(this)">&#128203; Sao chép</button></div>
            <pre>{
  <span class="k">"api_key"</span>: <span class="s">"YOUR_PARTNER_API_KEY"</span>,
  <span class="k">"sign"</span>: <span class="s">"md5(api_key + game_type + package_id + player_id + secret_key)"</span>,
  <span class="k">"game_type"</span>: <span class="s">"GARENA"</span>,
  <span class="k">"package_id"</span>: <span class="s">"diamonds_500"</span>,
  <span class="k">"player_id"</span>: <span class="s">"player_id_99214"</span>,
  <span class="k">"request_id"</span>: <span class="s">"GAME_REQ_88124"</span>
}</pre>
        </div>

        <div class="code-label">Tham số</div>
        <table class="param-table">
            <thead><tr><th>Tham số</th><th>Kiểu</th><th>Mô tả</th></tr></thead>
            <tbody>
                <tr><td><code>game_type</code></td><td>string</td><td>Nhà phát hành / hệ game: GARENA, ZING, GATE, RAZER...</td></tr>
                <tr><td><code>package_id</code></td><td>string</td><td>Mã gói nạp (ví dụ: diamonds_500)</td></tr>
                <tr><td><code>player_id</code></td><td>string</td><td>ID nhân vật / UID người chơi cần nạp</td></tr>
                <tr><td><code>request_id</code></td><td>string</td><td>Mã đơn hàng duy nhất phía đối tác</td></tr>
            </tbody>
        </table>
    </section>

    {{-- Tab 3: webhook gạch thẻ --}}
    <section class="card-panel doc-card doc-pane" id="doc2" style="display:none;">
        <h2>Webhook Callback Nhận Kết Quả Gạch Thẻ</h2>
        <p class="desc">Khi bạn gửi dữ liệu nạp thẻ cào (qua API gạch thẻ), hệ thống sẽ xử lý không đồng bộ. Sau khi nhà mạng trả về kết quả Thành công/Thất bại, máy chủ của chúng tôi sẽ gọi một `POST Request` trả ngược dữ liệu về đường dẫn URL Webhook của bạn.</p>

        <div class="callout">
            <b>Lưu ý quan trọng:</b> Máy chủ của bạn bắt buộc phải phản hồi lại trạng thái `HTTP 200` kèm chuỗi JSON phản hồi hợp lệ để hệ thống ngừng gửi lại Callback. Nếu không nhận được HTTP 200, hệ thống sẽ tự động gọi lại 3 lần sau các khoảng 5 phút, 15 phút, 30 phút.
        </div>

        <div class="code-label">Dữ liệu Callback hệ thống bắn về Webhook của bạn</div>
        <p class="desc" style="margin-bottom:10px;">Đường dẫn nhận kết quả cấu hình trong Profile API của bạn.</p>
        <div class="code-block">
            <div class="code-head"><span>JSON</span><button type="button" onclick="copyCode(this)">&#128203; Sao chép</button></div>
            <pre>{
  <span class="k">"status"</span>: <span class="s">"success"</span>, <span class="c">// hoặc "error" nếu thẻ lỗi</span>
  <span class="k">"message"</span>: <span class="s">"Thẻ đúng mệnh giá"</span>,
  <span class="k">"request_id"</span>: <span class="s">"YOUR_UNIQUE_ORDER_ID_01"</span>,
  <span class="k">"declared_value"</span>: 100000,
  <span class="k">"real_value"</span>: 100000,
  <span class="k">"amount_received"</span>: 86000,
  <span class="k">"sign"</span>: <span class="s">"md5(secret_key + request_id + real_value)"</span>
}</pre>
        </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
function showDoc(index, btn) {
    document.querySelectorAll('.doc-pane').forEach(function (p, i) { p.style.display = i === index ? '' : 'none'; });
    document.querySelectorAll('.doc-tabs button').forEach(function (b) { b.classList.remove('active'); });
    btn.classList.add('active');
}
function copyCode(btn) {
    var pre = btn.closest('.code-block').querySelector('pre');
    navigator.clipboard.writeText(pre.textContent).then(function () { showToast('Đã sao chép vào bộ nhớ tạm!'); });
}
</script>
@endpush