@extends('layouts.app')

@section('content')

<style>
/* =========================
   GLOBAL OVERFLOW & BOX-SIZING FIX
========================= */
*, ::before, ::after {
    box-sizing: border-box;
    max-width: 100%;
}

/* =========================
   ANIMATION & BASE
========================= */
.fade-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    will-change: opacity, transform;
}

.fade-section.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   CARDS & CONTAINERS
========================= */
.doc-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
    width: 100%;
}

@media (min-width: 640px) {
    .doc-card {
        border-radius: 24px;
    }
}

.doc-card:hover {
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
    border-color: rgba(203, 213, 225, 1);
}

.doc-header {
    padding: 1.15rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

@media (min-width: 640px) {
    .doc-header {
        padding: 1.5rem 1.75rem 1.25rem;
    }
}

.doc-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.doc-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    color: #2563eb;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .doc-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }
}

.doc-body {
    padding: 1rem;
    overflow-x: hidden;
}

@media (min-width: 640px) {
    .doc-body {
        padding: 1.5rem;
    }
}

.doc-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.15rem;
    line-height: 1.5;
}

@media (min-width: 640px) {
    .doc-desc {
        font-size: 0.875rem;
    }
}

/* =========================
   BADGES
========================= */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.badge.get {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.badge.post {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* =========================
   TABS & TERMINAL (MOBILE SCROLL FIX)
========================= */
.tabs-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.85rem;
    padding-bottom: 4px;
}

.tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.tabs {
    display: flex;
    gap: 0.4rem;
    width: max-content;
}

@media (min-width: 640px) {
    .tabs-wrapper {
        overflow-x: visible;
    }
    .tabs {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

.tab {
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
    color: #64748b;
    background: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab:hover {
    border-color: #93c5fd;
    color: #2563eb;
    background: #eff6ff;
}

.tab.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active {
    display: block;
    position: relative;
    margin-top: 0.5rem;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #1e293b;
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* MacOS Terminal Header */
.tab-content.active::before {
    content: '';
    display: block;
    height: 38px;
    background: linear-gradient(to bottom, #1e293b, #0f172a);
    border-bottom: 1px solid #1e293b;
}

/* MacOS Buttons */
.tab-content.active::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 14px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 18px 0 0 #f59e0b, 36px 0 0 #22c55e;
}

/* Code Area */
.tab-content.active .code {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 1rem;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

@media (min-width: 640px) {
    .tab-content.active .code {
        font-size: 0.8125rem;
        padding: 1.15rem;
        word-break: normal;
    }
}

/* Standalone Code Blocks & Tables */
.code {
    position: relative;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 16px;
    padding: 1rem;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.7;
    border: 1px solid #1e293b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    white-space: pre-wrap;
    word-break: break-all;
}

@media (min-width: 640px) {
    .code {
        font-size: 0.8125rem;
        padding: 1.15rem;
        word-break: normal;
    }
}

/* Table Wrapper inside code */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    min-width: 450px; /* Lebar minimum aman untuk tabel */
}

.table-responsive th {
    text-align: left;
    padding: 8px 10px;
    color: #93c5fd;
    border-bottom: 1px solid #334155;
    font-weight: 700;
}

.table-responsive td {
    padding: 8px 10px;
    border-bottom: 1px solid #1e293b;
    color: #e2e8f0;
}

/* Copy Button */
.copy-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 30;
    height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: #334155;
    color: #ffffff;
}
</style>

<div class="max-w-5xl mx-auto px-2 sm:px-6 py-4 sm:py-8 space-y-5 sm:space-y-6 font-['Inter',sans-serif] overflow-x-hidden">

    <!-- 1. AUTHENTICATION -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">key</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Authentication</h2>
                        <p class="doc-desc">Semua request API membutuhkan Bearer API KEY.</p>
                    </div>
                </div>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="auth1">Authorization</div>
                    </div>
                </div>

                <div id="auth1" class="tab-content active">
                    <div class="code">Authorization: Bearer YOUR_API_KEY</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 2. BASE URL -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">link</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Base URL</h2>
                        <p class="doc-desc">Base endpoint utama API.</p>
                    </div>
                </div>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="baseurl">Base URL</div>
                    </div>
                </div>

                <div id="baseurl" class="tab-content active">
                    <div class="code">https://nusaotp.site/api</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 3. RESPONSE FORMAT -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">code</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Response Format</h2>
                        <p class="doc-desc">Format response sukses dan error.</p>
                    </div>
                </div>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="res1">Success</div>
                        <div class="tab" data-tab="res2">Error</div>
                    </div>
                </div>

                <div id="res1" class="tab-content active">
                    <div class="code">{
  "success": true,
  "data": { ... }
}</div>
                </div>

                <div id="res2" class="tab-content">
                    <div class="code">{
  "success": false,
  "error": {
    "code": "ERROR_CODE",
    "message": "Human-readable message"
  }
}</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. BALANCE -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">account_balance_wallet</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Balance</h2>
                        <p class="doc-desc">Melihat saldo akun API.</p>
                    </div>
                </div>
                <span class="badge get">GET</span>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="b1">Endpoint</div>
                        <div class="tab" data-tab="b2">cURL</div>
                        <div class="tab" data-tab="b3">JavaScript</div>
                        <div class="tab" data-tab="b4">Python</div>
                        <div class="tab" data-tab="b5">Success</div>
                        <div class="tab" data-tab="b6">Error</div>
                    </div>
                </div>

                <div id="b1" class="tab-content active">
                    <div class="code">/balance</div>
                </div>

                <div id="b2" class="tab-content">
                    <div class="code">curl -X GET https://nusaotp.site/api/balance \
-H "Authorization: Bearer YOUR_API_KEY"</div>
                </div>

                <div id="b3" class="tab-content">
                    <div class="code">fetch("https://nusaotp.site/api/balance", {
  method: "GET",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Accept": "application/json"
  }
})
.then(res => res.json())
.then(data => console.log(data));</div>
                </div>

                <div id="b4" class="tab-content">
                    <div class="code">import requests
url = "https://nusaotp.site/api/balance"
headers = {
  "Authorization": "Bearer YOUR_API_KEY"
}
response = requests.get(url, headers=headers)
print(response.json())</div>
                </div>

                <div id="b5" class="tab-content">
                    <div class="code">{
  "success": true,
  "data": {
    "balance": 25145,
    "currency": "IDR"
  }
}</div>
                </div>

                <div id="b6" class="tab-content">
                    <div class="code">{
  "success": false,
  "message": "API key required"
}

OR

{
  "success": false,
  "message": "Invalid API key"
}</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. COUNTRIES -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">public</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Countries</h2>
                        <p class="doc-desc">Mendapatkan daftar negara yang tersedia.</p>
                    </div>
                </div>
                <span class="badge get">GET</span>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="s1">Endpoint</div>
                        <div class="tab" data-tab="s2">Params</div>
                        <div class="tab" data-tab="s3">cURL</div>
                        <div class="tab" data-tab="s4">JavaScript</div>
                        <div class="tab" data-tab="s5">Python</div>
                        <div class="tab" data-tab="s6">Success</div>
                        <div class="tab" data-tab="s7">Error</div>
                        <div class="tab" data-tab="s8">Field Explanation</div>
                    </div>
                </div>

                <div id="s1" class="tab-content active">
                    <div class="code">/v2/country</div>
                </div>

                <div id="s2" class="tab-content">
                    <div class="code">-</div>
                </div>

                <div id="s3" class="tab-content">
                    <div class="code">curl -X GET https://nusaotp.site/api/v2/country \
-H "Authorization: Bearer YOUR_API_KEY"</div>
                </div>

                <div id="s4" class="tab-content">
                    <div class="code">fetch("https://nusaotp.site/api/v2/country", {
  method: "GET",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Accept": "application/json"
  }
})
.then(res => res.json())
.then(data => console.log(data));</div>
                </div>

                <div id="s5" class="tab-content">
                    <div class="code">import requests
url = "https://nusaotp.site/api/v2/country"
headers = {
  "Authorization": "Bearer YOUR_API_KEY"
}
response = requests.get(url, headers=headers)
print(response.json())</div>
                </div>

                <div id="s6" class="tab-content">
                    <div class="code">{
  "success": true,
  "data": [
    {
      "id": 7,
      "code": "ID",
      "name": "Indonesia",
      "dial_code": "+62"
    }
  ]
}</div>
                </div>

                <div id="s7" class="tab-content">
                    <div class="code">{
  "success": false,
  "message": "Failed to fetch countries"
}

OR

{
  "message": "Unauthenticated."
}</div>
                </div>

                <div id="s8" class="tab-content">
                    <div class="code">
                        <div class="table-responsive">
                            <table>
                                <thead>
                                    <tr>
                                        <th>FIELD</th>
                                        <th>TYPE</th>
                                        <th>DESCRIPTION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>id</td>
                                        <td>Number</td>
                                        <td>Country ID (used in other endpoints)</td>
                                    </tr>
                                    <tr>
                                        <td>code</td>
                                        <td>String</td>
                                        <td>ISO country code</td>
                                    </tr>
                                    <tr>
                                        <td>name</td>
                                        <td>String</td>
                                        <td>Country Name</td>
                                    </tr>
                                    <tr>
                                        <td>dial_code</td>
                                        <td>String</td>
                                        <td>Phone dialing code</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. SERVICES -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">category</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Services</h2>
                        <p class="doc-desc">Mendapatkan daftar layanan OTP berdasarkan negara.</p>
                    </div>
                </div>
                <span class="badge get">GET</span>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="sv1">Endpoint</div>
                        <div class="tab" data-tab="sv2">Params</div>
                        <div class="tab" data-tab="sv3">cURL</div>
                        <div class="tab" data-tab="sv4">JavaScript</div>
                        <div class="tab" data-tab="sv5">Python</div>
                        <div class="tab" data-tab="sv6">Success</div>
                        <div class="tab" data-tab="sv7">Error</div>
                        <div class="tab" data-tab="sv8">Field Explanation</div>
                    </div>
                </div>

                <div id="sv1" class="tab-content active">
                    <div class="code">/v2/services</div>
                </div>

                <div id="sv2" class="tab-content">
                    <div class="code">{
  "country_id": 7
}</div>
                </div>

                <div id="sv3" class="tab-content">
                    <div class="code">curl -X GET "https://nusaotp.site/api/v2/services?country_id=7" \
-H "Authorization: Bearer YOUR_API_KEY"</div>
                </div>

                <div id="sv4" class="tab-content">
                    <div class="code">fetch("https://nusaotp.site/api/v2/services?country_id=7", {
  method: "GET",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Accept": "application/json"
  }
})
.then(res => res.json())
.then(data => console.log(data));</div>
                </div>

                <div id="sv5" class="tab-content">
                    <div class="code">import requests
url = "https://nusaotp.site/api/v2/services"
params = {
  "country_id": 7
}
headers = {
  "Authorization": "Bearer YOUR_API_KEY"
}
response = requests.get(url, headers=headers, params=params)
print(response.json())</div>
                </div>

                <div id="sv6" class="tab-content">
                    <div class="code">{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "WhatsApp"
    },
    {
      "id": 2,
      "name": "Telegram"
    }
  ]
}</div>
                </div>

                <div id="sv7" class="tab-content">
                    <div class="code">{
  "success": false,
  "message": "Failed to fetch services"
}</div>
                </div>

                <div id="sv8" class="tab-content">
                    <div class="code">
                        <div class="table-responsive">
                            <table>
                                <thead>
                                    <tr>
                                        <th>FIELD</th>
                                        <th>TYPE</th>
                                        <th>DESCRIPTION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>id</td>
                                        <td>Number</td>
                                        <td>Service ID (used in /products endpoint)</td>
                                    </tr>
                                    <tr>
                                        <td>code</td>
                                        <td>String</td>
                                        <td>Internal service code</td>
                                    </tr>
                                    <tr>
                                        <td>name</td>
                                        <td>String</td>
                                        <td>Application name</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 7. PRODUCTS (SERVER) -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">dns</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Server (Products)</h2>
                        <p class="doc-desc">Mendapatkan daftar produk server layanan yang tersedia.</p>
                    </div>
                </div>
                <span class="badge get">GET</span>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="p1">Endpoint</div>
                        <div class="tab" data-tab="p2">Params</div>
                        <div class="tab" data-tab="p3">cURL</div>
                        <div class="tab" data-tab="p4">JavaScript</div>
                        <div class="tab" data-tab="p5">Python</div>
                        <div class="tab" data-tab="p6">Success</div>
                        <div class="tab" data-tab="p7">Error</div>
                        <div class="tab" data-tab="p8">Field Explanation</div>
                    </div>
                </div>

                <div id="p1" class="tab-content active">
                    <div class="code">/v2/products</div>
                </div>

                <div id="p2" class="tab-content">
                    <div class="code">{
  "country_id": 7,
  "service_id": 1
}</div>
                </div>

                <div id="p3" class="tab-content">
                    <div class="code">curl -X GET "https://nusaotp.site/api/v2/products?country_id=7&service_id=1" \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Accept: application/json"</div>
                </div>

                <div id="p4" class="tab-content">
                    <div class="code">fetch("https://nusaotp.site/api/v2/products?country_id=7&service_id=1", {
  method: "GET",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Accept": "application/json"
  }
})
.then(res => res.json())
.then(data => console.log(data));</div>
                </div>

                <div id="p5" class="tab-content">
                    <div class="code">import requests
url = "https://nusaotp.site/api/v2/products"
params = {
  "country_id": 7,
  "service_id": 1
}
headers = {
  "Authorization": "Bearer YOUR_API_KEY"
}
response = requests.get(url, headers=headers, params=params)
print(response.json())</div>
                </div>

                <div id="p6" class="tab-content">
                    <div class="code">{
  "success": true,
  "data": [
    {
      "id": 765693933,
      "name": "Server 1",
      "price": 3829
    },
    {
      "id": 760385044,
      "name": "Server 2",
      "price": 3836
    }
  ]
}</div>
                </div>

                <div id="p7" class="tab-content">
                    <div class="code">{
  "success": false,
  "message": "country_id & service_id wajib"
}

OR

{
  "success": false,
  "message": "Failed to fetch products"
}</div>
                </div>

                <div id="p8" class="tab-content">
                    <div class="code">
                        <div class="table-responsive">
                            <table>
                                <thead>
                                    <tr>
                                        <th>FIELD</th>
                                        <th>TYPE</th>
                                        <th>DESCRIPTION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>id</td>
                                        <td>Number</td>
                                        <td>Product ID (used when creating an order)</td>
                                    </tr>
                                    <tr>
                                        <td>name</td>
                                        <td>String</td>
                                        <td>Server name (e.g. Server 1, Server 2)</td>
                                    </tr>
                                    <tr>
                                        <td>price</td>
                                        <td>Number</td>
                                        <td>Final price (deducted from balance)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 8. CREATE ORDER -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">shopping_cart</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Create Order</h2>
                        <p class="doc-desc">Membuat order nomor baru.</p>
                    </div>
                </div>
                <span class="badge post">POST</span>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="o1">Endpoint</div>
                        <div class="tab" data-tab="o2">Params</div>
                        <div class="tab" data-tab="o3">cURL</div>
                        <div class="tab" data-tab="o4">JavaScript</div>
                        <div class="tab" data-tab="o5">Python</div>
                        <div class="tab" data-tab="o6">Success</div>
                        <div class="tab" data-tab="o7">Error</div>
                        <div class="tab" data-tab="o8">Field Explanation</div>
                        <div class="tab" data-tab="o9">Status Explanation</div>
                    </div>
                </div>

                <div id="o1" class="tab-content active">
                    <div class="code">/v2/order</div>
                </div>

                <div id="o2" class="tab-content">
                    <div class="code">{
  "country_id": 7,
  "service_id": 1,
  "product_id": 765693933
}</div>
                </div>

                <div id="o3" class="tab-content">
                    <div class="code">curl -X POST "https://nusaotp.site/api/v2/order" \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "country_id": 7,
  "service_id": 1,
  "product_id": 765693933
}'</div>
                </div>

                <div id="o4" class="tab-content">
                    <div class="code">fetch("https://nusaotp.site/api/v2/order", {
  method: "POST",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    country_id: 7,
    service_id: 1,
    product_id: 765693933
  })
})
.then(res => res.json())
.then(data => console.log(data));</div>
                </div>

                <div id="o5" class="tab-content">
                    <div class="code">import requests
url = "https://nusaotp.site/api/v2/order"
headers = {
  "Authorization": "Bearer YOUR_API_KEY",
  "Content-Type": "application/json"
}
payload = {
  "country_id": 7,
  "service_id": 1,
  "product_id": 765693933
}
response = requests.post(url, json=payload, headers=headers)
print(response.json())</div>
                </div>

                <div id="o6" class="tab-content">
                    <div class="code">{
  "success": true,
  "data": {
    "order_id": 79994,
    "number": "6283857979325",
    "status": "PENDING",
    "otp_code": null,
    "expires_at": "2026-05-03 02:55:10"
  }
}</div>
                </div>

                <div id="o7" class="tab-content">
                    <div class="code">{
  "success": false,
  "message": "Saldo tidak cukup"
}

OR

{
  "success": false,
  "message": "Service tidak ditemukan"
}

OR

{
  "success": false,
  "message": "Product tidak ditemukan"
}

OR

{
  "success": false,
  "message": "Provider error"
}</div>
                </div>

                <div id="o8" class="tab-content">
                    <div class="code">
                        <div class="table-responsive">
                            <table>
                                <thead>
                                    <tr>
                                        <th>FIELD</th>
                                        <th>TYPE</th>
                                        <th>DESCRIPTION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>order_id</td>
                                        <td>Number</td>
                                        <td>Order ID (used for canceling & tracking)</td>
                                    </tr>
                                    <tr>
                                        <td>number</td>
                                        <td>String</td>
                                        <td>Assigned phone number</td>
                                    </tr>
                                    <tr>
                                        <td>status</td>
                                        <td>String</td>
                                        <td>Initial status (PENDING)</td>
                                    </tr>
                                    <tr>
                                        <td>otp_code</td>
                                        <td>String / null</td>
                                        <td>OTP code (if received)</td>
                                    </tr>
                                    <tr>
                                        <td>expires_at</td>
                                        <td>Datetime</td>
                                        <td>Order expiration time</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="o9" class="tab-content">
                    <div class="code">
                        <div class="table-responsive">
                            <table>
                                <thead>
                                    <tr>
                                        <th>STATUS</th>
                                        <th>DESCRIPTION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>PENDING</td>
                                        <td>Waiting for OTP</td>
                                    </tr>
                                    <tr>
                                        <td>SUCCESS</td>
                                        <td>OTP received</td>
                                    </tr>
                                    <tr>
                                        <td>FAILED</td>
                                        <td>Number expired</td>
                                    </tr>
                                    <tr>
                                        <td>CANCELED</td>
                                        <td>Order canceled</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 9. CANCEL ORDER -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">cancel</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Cancel Order</h2>
                        <p class="doc-desc">Membatalkan orderan (3 menit setelah orderan dibuat)</p>
                    </div>
                </div>
                <span class="badge post">POST</span>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="co1">Endpoint</div>
                        <div class="tab" data-tab="co2">Params</div>
                        <div class="tab" data-tab="co3">cURL</div>
                        <div class="tab" data-tab="co4">JS</div>
                        <div class="tab" data-tab="co5">Python</div>
                        <div class="tab" data-tab="co6">Success</div>
                        <div class="tab" data-tab="co7">Error</div>
                    </div>
                </div>

                <div id="co1" class="tab-content active">
                    <div class="code">/v2/cancel</div>
                </div>

                <div id="co2" class="tab-content">
                    <div class="code">{
  "order_id": 12345
}</div>
                </div>

                <div id="co3" class="tab-content">
                    <div class="code">curl -X POST https://nusaotp.site/api/v2/cancel \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-H "Accept: application/json" \
-d '{"order_id":12345}'</div>
                </div>

                <div id="co4" class="tab-content">
                    <div class="code">fetch("https://nusaotp.site/api/v2/cancel", {
  method: "POST",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  body: JSON.stringify({
    order_id: 12345
  })
})
.then(res => res.json())
.then(console.log);</div>
                </div>

                <div id="co5" class="tab-content">
                    <div class="code">import requests
url = "https://nusaotp.site/api/v2/cancel"
headers = {
  "Authorization": "Bearer YOUR_API_KEY",
  "Content-Type": "application/json"
}
data = {
  "order_id": 12345
}
response = requests.post(url, json=data, headers=headers)
print(response.json())</div>
                </div>

                <div id="co6" class="tab-content">
                    <div class="code">{
  "success": true,
  "data": {
    "order_id": 12345,
    "status": "CANCELED",
    "refund": 10000
  }
}</div>
                </div>

                <div id="co7" class="tab-content">
                    <div class="code">{
  "success": false,
  "message": "Order tidak ditemukan"
}

OR

{
  "success": false,
  "message": "Order sudah dibatalkan dan saldo direfund"
}

OR

{
  "success": false,
  "message": "Order tidak bisa dibatalkan"
}

OR

{
  "success": false,
  "message": "Order hanya bisa dibatalkan setelah 3 menit"
}</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 10. WEBHOOK -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">webhook</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Webhook</h2>
                        <p class="doc-desc">Mengatur webhook realtime untuk menerima update order & OTP.</p>
                    </div>
                </div>
                <span class="badge post">POST</span>
            </div>

            <div class="doc-body">
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <div class="tab active" data-tab="w1">Endpoint</div>
                        <div class="tab" data-tab="w2">cURL</div>
                        <div class="tab" data-tab="w3">JS</div>
                        <div class="tab" data-tab="w4">Python</div>
                        <div class="tab" data-tab="w5">Events</div>
                        <div class="tab" data-tab="w6">Success</div>
                        <div class="tab" data-tab="w7">Error</div>
                    </div>
                </div>

                <div id="w1" class="tab-content active">
                    <div class="code">/v2/set-webhook</div>
                </div>

                <div id="w2" class="tab-content">
                    <div class="code">curl -X POST https://nusaotp.site/api/v2/set-webhook \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "webhook_url": "https://yourdomain.com/webhook"
}'</div>
                </div>

                <div id="w3" class="tab-content">
                    <div class="code">fetch("https://nusaotp.site/api/v2/set-webhook", {
  method: "POST",
  headers: {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    webhook_url: "https://yourdomain.com/webhook"
  })
})
.then(res => res.json())
.then(console.log);</div>
                </div>

                <div id="w4" class="tab-content">
                    <div class="code">import requests
url = "https://nusaotp.site/api/v2/set-webhook"
headers = {
  "Authorization": "Bearer YOUR_API_KEY",
  "Content-Type": "application/json"
}
data = {
  "webhook_url": "https://yourdomain.com/webhook"
}
response = requests.post(url, json=data, headers=headers)
print(response.json())</div>
                </div>

                <div id="w5" class="tab-content">
                    <div class="code">OTP RECEIVED:

{
  "event": "otp.received",
  "data": {
    "order_id": 12345,
    "number": "628123456789",
    "otp_code": "123456",
    "status": "SUCCESS"
  }
}

ORDER UPDATE:

{
  "event": "order.update",
  "data": {
    "order_id": 12345,
    "status": "PENDING"
  }
}

ORDER CANCELED:

{
  "event": "order.canceled",
  "data": {
    "order_id": 12345,
    "status": "CANCELED",
    "refund": 10000
  }
}

ORDER FAILED:

{
  "event": "order.failed",
  "data": {
    "order_id": 12345,
    "status": "FAILED",
    "refund": 10000,
    "reason": "expired"
  }
}</div>
                </div>

                <div id="w6" class="tab-content">
                    <div class="code">{
  "success": true,
  "data": {
    "webhook_url": "https://yourdomain.com/webhook"
  }
}</div>
                </div>

                <div id="w7" class="tab-content">
                    <div class="code">{
  "message": "Unauthenticated."
}

OR

{
  "message": "The webhook url field is required.",
  "errors": {
    "webhook_url": [
      "The webhook url field is required."
    ]
  }
}

OR

{
  "message": "The webhook url must be a valid URL.",
  "errors": {
    "webhook_url": [
      "The webhook url must be a valid URL."
    ]
  }
}</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 11. ERROR CODE TABLE -->
    <section class="fade-section">
        <div class="doc-card">
            <div class="doc-header">
                <div class="doc-title">
                    <div class="doc-icon">
                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">error</span>
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 truncate">Error Codes</h2>
                        <p class="doc-desc">Daftar kode error yang mungkin muncul pada API response.</p>
                    </div>
                </div>
            </div>

            <div class="doc-body">
                <div class="code">
                    <div class="table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th>CODE</th>
                                    <th>HTTP</th>
                                    <th>DESCRIPTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>AUTH_REQUIRED</td>
                                    <td>401</td>
                                    <td>API key is required</td>
                                </tr>
                                <tr>
                                    <td>INVALID_API_KEY</td>
                                    <td>401</td>
                                    <td>Invalid API key</td>
                                </tr>
                                <tr>
                                    <td>INSUFFICIENT_BALANCE</td>
                                    <td>400</td>
                                    <td>Insufficient balance</td>
                                </tr>
                                <tr>
                                    <td>FORBIDDEN</td>
                                    <td>403</td>
                                    <td>Authorization is required</td>
                                </tr>
                                <tr>
                                    <td>PRODUCT_NOT_FOUND</td>
                                    <td>404</td>
                                    <td>Product not found</td>
                                </tr>
                                <tr>
                                    <td>VALIDATION_ERROR</td>
                                    <td>422</td>
                                    <td>Validation failed</td>
                                </tr>
                                <tr>
                                    <td>PROVIDER_ERROR</td>
                                    <td>500</td>
                                    <td>Provider failed to respond</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('components.footer')

</div>

<script>
/* Fade Intersection Observer */
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));

/* Tabs Logic */
document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
        const parent = tab.closest('.doc-card');

        parent.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        parent.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

        tab.classList.add('active');
        const targetContent = parent.querySelector('#' + tab.dataset.tab);
        if (targetContent) {
            targetContent.classList.add('active');
        }
    });
});

/* Copy Button Logic */
document.querySelectorAll('.code').forEach((codeBlock) => {
    const btn = document.createElement('button');
    btn.className = 'copy-btn';
    btn.innerText = 'Copy';

    const wrapper = codeBlock.closest('.tab-content');
    if (wrapper) {
        wrapper.appendChild(btn); 
    } else {
        codeBlock.appendChild(btn); 
    }

    btn.addEventListener('click', async (e) => {
        e.stopPropagation();

        const text = codeBlock.innerText
            .replace(/^Copy$/gm, '')
            .replace(/^Copied ✓$/gm, '')
            .trim();

        try {
            await navigator.clipboard.writeText(text);
            btn.innerText = 'Copied ✓';
            setTimeout(() => {
                btn.innerText = 'Copy';
            }, 2000);
        } catch {
            btn.innerText = 'Failed';
            setTimeout(() => {
                btn.innerText = 'Copy';
            }, 2000);
        }
    });
});
</script>

@endsection

