@extends('layouts.app')

@section('title', 'Qiz WhatsApp API Documentation')

@section('content')
<div class="container py-5 mt-3">
    <div class="mb-5 text-center">
        <h1 class="display-5 fw-bold mb-2"><i class="fab fa-whatsapp text-success me-2"></i>Qiz WhatsApp Messaging API Documentation</h1>
        <p>
            Welcome to the Qiz WhatsApp Messaging API documentation. This guide will help you integrate WhatsApp messaging into your applications. With Qiz, you can easily Automate, send and receive WhatsApp messages, manage groups, and handle real-time events using webhooks.
        </p>
        <span class="badge bg-primary">API Version 1.0.0</span>
        <hr>
        <strong>Base URL:</strong> <code>https://qiz-wa.alphaflare.co.ke</code>
    </div>

    <div class="accordion" id="apiDocsAccordion">

        <!-- Get Started -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingStart">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStart" aria-expanded="true" aria-controls="collapseStart">
                    Get Started
                </button>
            </h2>
            <div id="collapseStart" class="accordion-collapse collapse show" aria-labelledby="headingStart" data-bs-parent="#apiDocsAccordion">
                <div class="accordion-body">
                    <ol>
                        <li>Sign up at <a href="https://qiz.alphaflare.co.ke" target="_blank">Qiz Dashboard</a></li>
                        <li>On the Dashboard, create a WhatsApp instance and scan the QR code</li>
                        <li>Click on API Key on the left sidebar to copy/regenerate your API key</li>
                        <li>Use your API key in the <code>Authorization</code> header for all requests</li>
                    </ol>
                    <div class="alert alert-info mt-3">
                        <strong>Note:</strong> All API requests require your API key in the <code>Authorization</code> header.
                    </div>
                </div>
            </div>
        </div>

        <!-- Messaging Endpoints -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingMessaging">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMessaging" aria-expanded="false" aria-controls="collapseMessaging">
                    Messaging Endpoints
                </button>
            </h2>
            <div id="collapseMessaging" class="accordion-collapse collapse" aria-labelledby="headingMessaging" data-bs-parent="#apiDocsAccordion">
                <div class="accordion-body">
                    <!-- Send Message -->
                    <h5>Send Message</h5>
                    <p>Send <strong>text</strong>, <strong>image</strong>, <strong>video</strong>, <strong>audio</strong>, or <strong>document</strong> messages to WhatsApp recipients. For media, you can send a file (multipart/form-data) or a URL.</p>
                    <ul>
                        <li><strong>Endpoint:</strong> <code>POST /send-message</code></li>
                        <li><strong>Headers:</strong>
                            <pre><code>Authorization: Bearer your-api-key
        Content-Type: application/json (for text) or multipart/form-data (for media)</code></pre>
                        </li>
                        <li><strong>Text Message Request Body:</strong>
                            <pre><code>{
        "recipients": ["254712345678", "254798765432"],
        "type": "text",
        "text": "Hello from Qiz!"
        }</code></pre>
                        </li>
                        <li><strong>Image Message Request Body (URL):</strong>
                            <pre><code>{
        "recipients": ["254712345678"],
        "type": "image",
        "url": "https://example.com/image.jpg",
        "caption": "Check this out!"
        }</code></pre>
                        </li>
                        <li><strong>Image Message Request Body (File Upload):</strong>
                            <pre><code>Form Data:
        - recipients: ["254712345678"]
        - type: image
        - caption: "Check this out!"
        - file: (select image file)</code></pre>
                        </li>
                        <li><strong>Video Message Request Body:</strong>
                            <pre><code>{
        "recipients": ["254712345678"],
        "type": "video",
        "url": "https://example.com/video.mp4",
        "caption": "Watch this!"
        }</code></pre>
                        </li>
                        <li><strong>Audio Message Request Body:</strong>
                            <pre><code>{
        "recipients": ["254712345678"],
        "type": "audio",
        "url": "https://example.com/audio.mp3"
        }</code></pre>
                        </li>
                        <li><strong>Document Message Request Body:</strong>
                            <pre><code>{
        "recipients": ["254712345678"],
        "type": "document",
        "url": "https://example.com/file.pdf",
        "fileName": "Report.pdf"
        }</code></pre>
                        </li>
                        <li><strong>Success Response (200):</strong>
                            <pre><code>{
        "success": true,
        "message": "Message sending completed: 2 successful, 0 failed",
        "sent_at": "2023-12-01T12:01:00Z",
        "total_recipients": 2,
        "successful_recipients": ["254712345678@s.whatsapp.net", "254798765432@s.whatsapp.net"],
        "failed_recipients": [],
        "invalid_recipients": []
        }</code></pre>
                        </li>
                        <li><strong>Error Response (400/425/500):</strong>
                            <pre><code>{
        "success": false,
        "message": "Recipients array is required"
        }</code></pre>
                            <pre><code>{
        "success": false,
        "message": "Instance not ready for messaging",
        "status": "not_loaded"
        }</code></pre>
                        </li>
                    </ul>
                    <hr>

                    <!-- Check Number -->
                    <h5>Check Number</h5>
                    <p>Verify if a mobile number is registered on WhatsApp.</p>
                    <ul>
                        <li><strong>Endpoint:</strong> <code>POST /check-number</code></li>
                        <li><strong>Headers:</strong>
                            <pre><code>Authorization: Bearer your-api-key
        Content-Type: application/json</code></pre>
                        </li>
                        <li><strong>Request Body:</strong>
                            <pre><code>{
        "number": "254712345678"
        }</code></pre>
                        </li>
                        <li><strong>Success Response (200):</strong>
                            <pre><code>{
        "success": true,
        "number": "254712345678",
        "exists": true
        }</code></pre>
                        </li>
                        <li><strong>Error Response (400/425/500):</strong>
                            <pre><code>{
        "success": false,
        "message": "No WhatsApp instance found. Please scan your QR code first."
        }</code></pre>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Group Management -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingGroups">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGroups" aria-expanded="false" aria-controls="collapseGroups">
                    Group Management
                </button>
            </h2>
            <div id="collapseGroups" class="accordion-collapse collapse" aria-labelledby="headingGroups" data-bs-parent="#apiDocsAccordion">
                <div class="accordion-body">
                    <!-- Create Group -->
                    <h5>Create Group</h5>
                    <p>Create a new WhatsApp group with a subject and participants.</p>
                    <ul>
                        <li><strong>Endpoint:</strong> <code>POST /groups</code></li>
                        <li><strong>Headers:</strong>
                            <pre><code>Authorization: Bearer your-api-key
Content-Type: application/json</code></pre>
                        </li>
                        <li><strong>Request Body:</strong>
                            <pre><code>{
  "subject": "Project Team",
  "participants": ["254712345678", "254798765432"]
}</code></pre>
                        </li>
                        <li><strong>Success Response (201):</strong>
                            <pre><code>{
  "success": true,
  "message": "Group created successfully",
  "group": {
    "id": "120363025988888888@g.us",
    "subject": "Project Team",
    "participants": [...]
  }
}</code></pre>
                        </li>
                        <li><strong>Error Response (400/425/500):</strong>
                            <pre><code>{
  "success": false,
  "message": "Group subject and participants are required"
}</code></pre>
                        </li>
                    </ul>
                    <hr>
                    <!-- List Groups -->
                    <h5>List Groups</h5>
                    <p>List all WhatsApp groups for your connected instance.</p>
                    <ul>
                        <li><strong>Endpoint:</strong> <code>GET /groups?page=1&limit=20</code></li>
                        <li><strong>Headers:</strong>
                            <pre><code>Authorization: Bearer your-api-key</code></pre>
                        </li>
                        <li><strong>Success Response (200):</strong>
                            <pre><code>{
  "success": true,
  "message": "Groups fetched successfully",
  "total": 2,
  "page": 1,
  "limit": 20,
  "groups": [
    {
      "id": "120363025988888888@g.us",
      "name": "Project Team",
      "participantsCount": 2
    }
  ]
}</code></pre>
                        </li>
                        <li><strong>Error Response (400/425/500):</strong>
                            <pre><code>{
  "success": false,
  "message": "No WhatsApp instance found. Please scan your QR code first."
}</code></pre>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Helpful Info -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingInfo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">
                    Helpful Information
                </button>
            </h2>
            <div id="collapseInfo" class="accordion-collapse collapse" aria-labelledby="headingInfo" data-bs-parent="#apiDocsAccordion">
                <div class="accordion-body">
                    <ul>
                        <li>All endpoints require your API key in the Authorization header.</li>
                        <li>Error codes: <code>400</code> Bad Request, <code>401</code> Unauthorized, <code>403</code> Forbidden, <code>425</code> Instance Not Ready, <code>429</code> Rate Limit Exceeded, <code>500</code> Internal Server Error.</li>
                        <li>Set a webhook URL for your instance to receive real-time events (e.g., <code>message_received</code>, <code>message_sent</code>).</li>
                        <li>For help, contact <a href="mailto:support@alphaflare.co.ke">support@alphaflare.co.ke</a> or <a href="https://wa.me/254708920430?text=Hi%20Qiz%20team%2C%20I%20need%20help%20with%20the%20API" target="_blank">WhatsApp Support</a>.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@endpush