<%- include('../partials/head') %>

<div class="topbar">
  <div>
    <h2>API Documentation</h2>
    <small>Dokumentasi kirim pesan dan media WhatsApp Gateway</small>
  </div>
  <a class="btn secondary" href="/dashboard">Dashboard</a>
</div>

<div class="content">
  <div class="card">
    <h2>Send Message API</h2>
    <p class="note">
      Endpoint kompatibel dengan format API kamu. Gunakan device yang sudah berstatus
      <b>connected</b>.
    </p>

    <div class="table-wrap">
      <table>
        <tr>
          <th>Method</th>
          <td>POST atau GET</td>
        </tr>
        <tr>
          <th>Endpoint</th>
          <td><code>/send-message</code></td>
        </tr>
      </table>
    </div>
  </div>

  <div class="card">
    <h2>Parameters</h2>

    <div class="table-wrap">
      <table>
        <tr>
          <th>Parameter</th>
          <th>Type</th>
          <th>Required</th>
          <th>Description</th>
        </tr>

        <tr>
          <td><code>api_key</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>API key user</td>
        </tr>

        <tr>
          <td><code>sender</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>Nomor device yang connected</td>
        </tr>

        <tr>
          <td><code>number</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>Nomor tujuan, contoh 62888xxxx</td>
        </tr>

        <tr>
          <td><code>message</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>Pesan yang dikirim</td>
        </tr>
      </table>
    </div>
  </div>

  <div class="card">
    <h2>POST JSON</h2>

    <pre class="code">POST /send-message
Content-Type: application/json

{
  "api_key": "1234567890",
  "sender": "62888xxxx",
  "number": "62888xxxx",
  "message": "Hello World"
}</pre>
  </div>

  <div class="card">
    <h2>GET URL</h2>

    <pre class="code">/send-message?api_key=1234567890&sender=62888xxxx&number=62888xxxx&message=Hello%20World</pre>
  </div>

  <div class="card api-section-title">
    <h2>Send Media API</h2>
    <p class="note">
      Endpoint ini digunakan untuk mengirim media dari URL direct link.
      Pastikan URL bukan link Google Drive, Dropbox preview, atau cloud storage yang butuh halaman perantara.
    </p>

    <div class="table-wrap">
      <table>
        <tr>
          <th>Method</th>
          <td>POST atau GET</td>
        </tr>
        <tr>
          <th>Endpoint</th>
          <td><code>/send-media</code></td>
        </tr>
      </table>
    </div>
  </div>

  <div class="card">
    <h2>Media Parameters</h2>

    <div class="table-wrap">
      <table>
        <tr>
          <th>Parameter</th>
          <th>Type</th>
          <th>Required</th>
          <th>Description</th>
        </tr>

        <tr>
          <td><code>api_key</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>API key user</td>
        </tr>

        <tr>
          <td><code>sender</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>Nomor device yang connected</td>
        </tr>

        <tr>
          <td><code>number</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>Nomor tujuan, contoh 62888xxxx</td>
        </tr>

        <tr>
          <td><code>media_type</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>
            Allowed:
            <code>image</code>,
            <code>video</code>,
            <code>audio</code>,
            <code>pdf</code>,
            <code>xls</code>,
            <code>xlsx</code>,
            <code>doc</code>,
            <code>docx</code>,
            <code>zip</code>
          </td>
        </tr>

        <tr>
          <td><code>caption</code></td>
          <td>string</td>
          <td>No</td>
          <td>Akan tampil untuk media type <code>image</code> dan <code>video</code>.</td>
        </tr>

        <tr>
          <td><code>url</code></td>
          <td>string</td>
          <td>Yes</td>
          <td>URL media. Wajib direct link.</td>
        </tr>

        <tr>
          <td><code>ppt</code></td>
          <td>boolean</td>
          <td>No</td>
          <td>
            Digunakan untuk type <code>audio</code>.
            <code>true</code> = voice note,
            <code>false</code> = audio biasa.
          </td>
        </tr>
      </table>
    </div>

    <p class="note">
      Note: Pastikan <code>url</code> adalah direct link, bukan link dari Google Drive atau cloud storage yang membuka halaman preview.
    </p>
  </div>

  <div class="card">
    <h2>Example JSON Request</h2>

    <pre class="code">POST /send-media
Content-Type: application/json

{
  "api_key": "1234567890",
  "sender": "62888xxxx",
  "number": "62888xxxx",
  "media_type": "image",
  "caption": "Hello World",
  "url": "https://example.com/image.jpg"
}</pre>
  </div>

  <div class="card">
    <h2>Example URL Request</h2>

    <pre class="code">/send-media?api_key=1234567890&sender=62888xxxx&number=62888xxxx&media_type=image&caption=Hello%20World&url=https%3A%2F%2Fexample.com%2Fimage.jpg</pre>
  </div>

  <div class="card">
    <h2>Example Audio Voice Note</h2>

    <pre class="code">POST /send-media
Content-Type: application/json

{
  "api_key": "1234567890",
  "sender": "62888xxxx",
  "number": "62888xxxx",
  "media_type": "audio",
  "url": "https://example.com/audio.mp3",
  "ppt": true
}</pre>
  </div>
</div>

<%- include('../partials/foot') %>