<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airtime USSD API Documentation</title>
    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light text-dark">

    <div class="container py-5" style="max-width: 960px;">
        
        <!-- Header -->
        <div class="card shadow-sm mb-4">
            <div class="card-body p-4">
                <h1 class="display-6 fw-bold text-primary">Airtime USSD API</h1>
                <p class="text-muted mb-3">API Documentation for managing merchants, customer top-ups, dealers, and transactions[cite: 1].</p>
                <div>
                    <span class="badge bg-info text-dark">Base URL: http://localhost:8131/api[cite: 1]</span>
                </div>
            </div>
        </div>

        <!-- Endpoints List -->
        <div class="vstack gap-4">

            <!-- 1. Create App Token -->
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-3">
                        <h2 class="h5 mb-0 fw-bold">Create App Token</h2>
                        <span class="badge bg-success">POST</span>
                    </div>
                    <p class="small text-muted mb-2"><strong>Endpoint:</strong> <code>/login</code>[cite: 1]</p>
                    <div class="bg-dark text-light p-3 rounded mt-3">
                        <span class="text-uppercase small fw-bold text-secondary d-block mb-1">Request Body (JSON)</span>
                        <pre class="mb-0 text-success<code>">{
  "email" : "kwesi@click-mobile.com",
  "password" : "password"
}</pre>
                    </div>
                </div>
            </div>

            <!-- 2. Merchant Login -->
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-3">
                        <h2 class="h5 mb-0 fw-bold">Merchant Login</h2>
                        <span class="badge bg-success">POST</span>
                    </div>
                    <p class="small text-muted mb-1"><strong>Endpoint:</strong> <code>/merchant/login</code>[cite: 1]</p>
                    <p class="small text-muted mb-2"><strong>Authentication:</strong> Bearer Token[cite: 1]</p>
                    <div class="bg-dark text-light p-3 rounded mt-3">
                        <span class="text-uppercase small fw-bold text-secondary d-block mb-1">Request Body (JSON)</span>
                        <pre class="mb-0 text-success<code>">{
  "phone_number" : "265881161942",
  "pin" : "1234"
}</pre>
                    </div>
                </div>
            </div>

            <!-- 3. Merchant Transactions -->
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-3">
                        <h2 class="h5 mb-0 fw-bold">Merchant Transactions</h2>
                        <span class="badge bg-success">POST</span>
                    </div>
                    <p class="small text-muted mb-1"><strong>Endpoint:</strong> <code>/merchant/transactions</code>[cite: 1]</p>
                    <p class="small text-muted mb-1"><strong>Headers:</strong> Accept: application/json[cite: 1]</p>
                    <p class="small text-muted mb-2"><strong>Authentication:</strong> Bearer Token[cite: 1]</p>
                    <div class="bg-dark text-light p-3 rounded mt-3">
                        <span class="text-uppercase small fw-bold text-secondary d-block mb-1">Request Body (JSON)</span>
                        <pre class="mb-0 text-success<code>">{
  "merchant_id": 1,
  "keyword": "Baldwin",
  "start_date": "2025-07-20",
  "end_date": "2026-05-10",
  "per_page": 20
}</pre>
                    </div>
                </div>
            </div>

            <!-- 4. Customer Top Up -->
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-3">
                        <h2 class="h5 mb-0 fw-bold">Customer Top Up</h2>
                        <span class="badge bg-success">POST</span>
                    </div>
                    <p class="small text-muted mb-1"><strong>Endpoint:</strong> <code>/merchant/customertopup</code>[cite: 1]</p>
                    <p class="small text-muted mb-1"><strong>Headers:</strong> Accept: application/json[cite: 1]</p>
                    <p class="small text-muted mb-2"><strong>Authentication:</strong> Bearer Token[cite: 1]</p>
                    <div class="bg-dark text-light p-3 rounded mt-3">
                        <span class="text-uppercase small fw-bold text-secondary d-block mb-1">Request Body (JSON)</span>
                        <pre class="mb-0 text-success<code>">{
  "phone_number" : "265881161942",
  "amount" : "20",
  "merchant_id" : "1"
}</pre>
                    </div>
                </div>
            </div>

            <!-- 5. Dealer List -->
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-3">
                        <h2 class="h5 mb-0 fw-bold">Dealer List</h2>
                        <span class="badge bg-primary">GET</span>
                    </div>
                    <p class="small text-muted mb-1"><strong>Endpoint:</strong> <code>/merchant/dealers?per_page=5</code>[cite: 1]</p>
                    <p class="small text-muted mb-2"><strong>Authentication:</strong> Bearer Token[cite: 1]</p>
                </div>
            </div>

            <!-- 6. Merchant To Dealer Refund -->
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between border-bottom pb-3 mb-3">
                        <h2 class="h5 mb-0 fw-bold">Merchant To Dealer Refund</h2>
                        <span class="badge bg-success">POST</span>
                    </div>
                    <p class="small text-muted mb-1"><strong>Endpoint:</strong> <code>/merchant/refund</code>[cite: 1]</p>
                    <p class="small text-muted mb-1"><strong>Headers:</strong> Accept: application/json[cite: 1]</p>
                    <p class="small text-muted mb-2"><strong>Authentication:</strong> Bearer Token[cite: 1]</p>
                    <div class="bg-dark text-light p-3 rounded mt-3">
                        <span class="text-uppercase small fw-bold text-secondary d-block mb-1">Request Body (JSON)</span>
                        <pre class="mb-0 text-success<code>">{
  "dealer_id" : "40",
  "merchant_id" : "1",
  "amount" : "2",
  "reason" : "Testing Mic"
}</pre>
                    </div>
                </div>
            </div>

        </div>

        <!-- Footer -->
        <div class="text-center text-muted small mt-5">
            &copy; {{ date('Y') }} Airtime USSD API Documentation[cite: 1]. All rights reserved.
        </div>

    </div>

    <!-- Bootstrap 5 JS Bundle CDN (Optional) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>