<div class="top-content" id="intro">
   <!-- Enhanced Hero Section -->
   <div class="row mb-5">
      <div class="col-12">
         <div class="text-center mb-5">
            <div class="bg-gradient bg-primary bg-opacity-10 rounded-4 p-5 mb-4">
               <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                  <i class="bi bi-rocket-takeoff display-6 text-primary"></i>
               </div>
               <h1 class="display-4 fw-bold text-primary mb-3">
                  Affiliate-Pro API Documentation
               </h1>
               <p class="lead text-muted fs-4 mb-4">
                  Professional affiliate tracking and commission management system with comprehensive REST API integration
               </p>
               <div class="d-flex justify-content-center gap-3 flex-wrap">
                  <span class="badge bg-success fs-6 px-3 py-2">
                     <i class="bi bi-check-circle me-2"></i>RESTful Design
                  </span>
                  <span class="badge bg-primary fs-6 px-3 py-2">
                     <i class="bi bi-shield-check me-2"></i>Secure Authentication
                  </span>
                  <span class="badge bg-info fs-6 px-3 py-2">
                     <i class="bi bi-lightning me-2"></i>High Performance
                  </span>
                  <span class="badge bg-warning text-dark fs-6 px-3 py-2">
                     <i class="bi bi-code-slash me-2"></i>Developer Friendly
                  </span>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Enhanced API Overview Cards -->
   <div class="row g-4 mb-5">
      <div class="col-lg-3 col-md-6">
         <div class="card h-100 border-0 shadow-sm hover-lift">
            <div class="card-body text-center p-4">
               <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3 mx-auto" style="width: 70px; height: 70px;">
                  <i class="bi bi-code-slash display-6 text-primary"></i>
               </div>
               <h5 class="card-title fw-bold mb-3">RESTful API</h5>
               <p class="card-text text-muted mb-3">Clean REST endpoints with JSON responses for seamless integration</p>
               <div class="d-flex justify-content-center gap-1">
                  <span class="badge bg-success">GET</span>
                  <span class="badge bg-warning text-dark">POST</span>
                  <span class="badge bg-danger">DELETE</span>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-6">
         <div class="card h-100 border-0 shadow-sm hover-lift">
            <div class="card-body text-center p-4">
               <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3 mx-auto" style="width: 70px; height: 70px;">
                  <i class="bi bi-shield-check display-6 text-success"></i>
               </div>
               <h5 class="card-title fw-bold mb-3">Secure Authentication</h5>
               <p class="card-text text-muted mb-3">JWT token-based authentication with encrypted communication</p>
               <div class="d-flex justify-content-center">
                  <span class="badge bg-success">Bearer Token</span>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-6">
         <div class="card h-100 border-0 shadow-sm hover-lift">
            <div class="card-body text-center p-4">
               <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3 mx-auto" style="width: 70px; height: 70px;">
                  <i class="bi bi-collection display-6 text-info"></i>
               </div>
               <h5 class="card-title fw-bold mb-3">Complete Coverage</h5>
               <p class="card-text text-muted mb-3">Full API coverage for all affiliate system operations</p>
               <div class="d-flex justify-content-center">
                  <span class="badge bg-info">40+ Endpoints</span>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-6">
         <div class="card h-100 border-0 shadow-sm hover-lift">
            <div class="card-body text-center p-4">
               <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3 mx-auto" style="width: 70px; height: 70px;">
                  <i class="bi bi-speedometer2 display-6 text-warning"></i>
               </div>
               <h5 class="card-title fw-bold mb-3">High Performance</h5>
               <p class="card-text text-muted mb-3">Optimized for speed with caching and efficient data handling</p>
               <div class="d-flex justify-content-center">
                  <span class="badge bg-warning text-dark">Fast Response</span>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Enhanced API Information Section -->
   <div class="row mb-5">
      <div class="col-12">
         <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
               <div class="row g-4">
                  <div class="col-lg-6">
                     <h5 class="fw-bold mb-4 text-primary">
                        <i class="bi bi-gear me-2"></i>Base Configuration
                     </h5>
                     <div class="mb-3 p-3 bg-light rounded-3">
                        <div class="d-flex align-items-center mb-2">
                           <i class="bi bi-link-45deg text-primary me-2"></i>
                           <strong>Base URL:</strong>
                        </div>
                        <div class="p-2 rounded-2 font-monospace small" style="background: #1e1e1e; color: #4ec9b0;">https://yourdomain.com</div>
                     </div>
                     <div class="mb-3 p-3 bg-light rounded-3">
                        <div class="d-flex align-items-center mb-2">
                           <i class="bi bi-filetype-json text-success me-2"></i>
                           <strong>Content Type:</strong>
                        </div>
                        <div class="p-2 rounded-2 font-monospace small" style="background: #1e1e1e; color: #ce9178;">application/json</div>
                     </div>
                     <div class="mb-3 p-3 bg-light rounded-3">
                        <div class="d-flex align-items-center mb-2">
                           <i class="bi bi-key text-warning me-2"></i>
                           <strong>Authentication:</strong>
                        </div>
                        <div class="p-2 rounded-2 font-monospace small" style="background: #1e1e1e; color: #d4d4d4;">Authorization: &lt;your-jwt-token&gt;</div>
                     </div>
                  </div>
                  <div class="col-lg-6">
                     <h5 class="fw-bold mb-4 text-primary">
                        <i class="bi bi-list-check me-2"></i>Supported Methods
                     </h5>
                     <div class="d-flex flex-wrap gap-3 mb-4">
                        <div class="text-center">
                           <span class="badge bg-success fs-5 px-4 py-3 d-block mb-2">GET</span>
                           <small class="text-muted">Retrieve Data</small>
                        </div>
                        <div class="text-center">
                           <span class="badge bg-warning text-dark fs-5 px-4 py-3 d-block mb-2">POST</span>
                           <small class="text-muted">Create/Update</small>
                        </div>
                        <div class="text-center">
                           <span class="badge bg-danger fs-5 px-4 py-3 d-block mb-2">DELETE</span>
                           <small class="text-muted">Remove Data</small>
                        </div>
                     </div>
                     <div class="alert alert-info border-0 mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>Note:</strong> All responses are returned in JSON format with consistent error handling and HTTP status codes.
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- Quick Start Section -->
   <div class="row mb-5">
      <div class="col-12">
         <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
               <div class="d-flex align-items-center mb-4">
                  <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                     <i class="bi bi-rocket-takeoff text-success fs-5"></i>
                  </div>
                  <h5 class="fw-bold mb-0">Quick Start Guide</h5>
               </div>
               <div class="row g-3">
                  <div class="col-md-4">
                     <div class="d-flex align-items-start p-3 rounded-3 h-100" style="background: #f8f9fa;">
                        <span class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-success me-3 flex-shrink-0" style="width: 36px; height: 36px;">1</span>
                        <div>
                           <h6 class="fw-semibold mb-1">Get API Token</h6>
                           <p class="text-muted small mb-0">Authenticate using login endpoint to receive your unique API token</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="d-flex align-items-start p-3 rounded-3 h-100" style="background: #f8f9fa;">
                        <span class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-primary me-3 flex-shrink-0" style="width: 36px; height: 36px;">2</span>
                        <div>
                           <h6 class="fw-semibold mb-1">Set Headers</h6>
                           <p class="text-muted small mb-0">Include token in Authorization header and set Content-Type to JSON</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="d-flex align-items-start p-3 rounded-3 h-100" style="background: #f8f9fa;">
                        <span class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-warning me-3 flex-shrink-0" style="width: 36px; height: 36px;">3</span>
                        <div>
                           <h6 class="fw-semibold mb-1">Make Requests</h6>
                           <p class="text-muted small mb-0">Start making API calls to endpoints with proper authentication</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

</div>

<!-- Authentication Section -->
<div class="row g-4 mb-5">
   <div class="col-lg-6" id="generate-authentication">
      <div class="card border-0 shadow-sm rounded-3 h-100">
         <div class="card-body p-4">
            <div class="d-flex align-items-start">
               <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 48px; height: 48px;">
                  <i class="bi bi-key-fill text-primary fs-5"></i>
               </div>
               <div class="flex-grow-1">
                  <h5 class="fw-bold mb-3">Generate Authentication</h5>
                  <p class="text-muted small mb-3">Authentication tokens are required for accessing all Affiliate APIs. Without a valid token, API access will be denied.</p>
                  <p class="text-muted small mb-3">Use the <strong>Login API</strong> to generate a unique JWT token for authentication.</p>
                  <div class="p-3 rounded-2 font-monospace small" style="background: #1e1e1e; color: #d4d4d4; border-left: 4px solid #0d6efd;">
                     Authorization: &lt;your-jwt-token&gt;
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-lg-6" id="use-authentication">
      <div class="card border-0 shadow-sm rounded-3 h-100">
         <div class="card-body p-4">
            <div class="d-flex align-items-start">
               <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 48px; height: 48px;">
                  <i class="bi bi-shield-lock-fill text-warning fs-5"></i>
               </div>
               <div class="flex-grow-1">
                  <h5 class="fw-bold mb-3">Use Authentication</h5>
                  <p class="text-muted small mb-3">The API token is <strong>sensitive private information</strong>. We strongly advise keeping restricted access to it.</p>
                  <p class="text-muted small mb-3">Include the token in every API request header alongside JSON content type:</p>
                  <div class="p-3 rounded-2 font-monospace small" style="background: #1e1e1e; color: #d4d4d4; border-left: 4px solid #ffc107;">
                     Content-Type: application/json<br>Authorization: {{token}}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<!-- Error Codes Section -->
<div class="row mb-5" id="errors-api-status">
   <div class="col-12">
      <div class="card border-0 shadow-sm rounded-3">
         <div class="card-body p-4">
            <div class="d-flex align-items-center mb-4">
               <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                  <i class="bi bi-exclamation-triangle-fill text-danger fs-5"></i>
               </div>
               <div>
                  <h5 class="fw-bold mb-0">Errors &amp; API Status Codes</h5>
                  <p class="text-muted small mb-0">All non-200 responses include a JSON body with the error message.</p>
               </div>
            </div>

            <div class="row g-3 mb-4">
               <div class="col-md-4">
                  <div class="d-flex align-items-center p-3 rounded-3" style="background: rgba(253,126,20,0.08); border-left: 4px solid #fd7e14;">
                     <span class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-warning me-3" style="width: 36px; height: 36px;">3xx</span>
                     <span class="fw-semibold small">Redirection Error</span>
                  </div>
               </div>
               <div class="col-md-4">
                  <div class="d-flex align-items-center p-3 rounded-3" style="background: rgba(220,53,69,0.08); border-left: 4px solid #dc3545;">
                     <span class="bg-danger bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-danger me-3" style="width: 36px; height: 36px;">4xx</span>
                     <span class="fw-semibold small">Client Error</span>
                  </div>
               </div>
               <div class="col-md-4">
                  <div class="d-flex align-items-center p-3 rounded-3" style="background: rgba(111,66,193,0.08); border-left: 4px solid #6f42c1;">
                     <span class="bg-secondary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold me-3" style="width: 36px; height: 36px;">5xx</span>
                     <span class="fw-semibold small">Server Error</span>
                  </div>
               </div>
            </div>

            <h6 class="fw-bold mb-3"><i class="bi bi-code-slash me-2 text-primary"></i>Error Response Structure</h6>
            <pre class="response-view">{"status":"true OR false (boolean)", "message": "Is the human readable error message"}</pre>
            <h6 class="fw-bold mb-3 mt-4"><i class="bi bi-code-slash me-2 text-warning"></i>Validation Error Structure</h6>
            <pre class="response-view">{ "message": "Please required field", "errors": { "parameter": "Oops ! parameter is required." } }</pre>

            <h6 class="fw-bold mt-4 mb-3"><i class="bi bi-list-ol me-2 text-danger"></i>Detailed Error Codes</h6>
            <div class="table-responsive">
               <table class="table table-hover">
                  <thead>
                     <tr>
                        <th>Type</th>
                        <th>Code</th>
                        <th>Error</th>
                        <th>Message</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td><span class="badge bg-danger bg-opacity-10 text-danger">Client</span></td>
                        <td><span class="badge bg-light text-dark">400</span></td>
                        <td><code>uri_not_found</code></td>
                        <td class="small">The specified URI has not been found. Check the URI and try again.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">401</span></td>
                        <td><code>missing_api_token</code></td>
                        <td class="small">The authorization header (API token) is missing or invalid.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">404</span></td>
                        <td><code>resource_not_found</code></td>
                        <td class="small">The specified resource has not been found.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">405</span></td>
                        <td><code>request_method_not_supported</code></td>
                        <td class="small">The request method is not supported for this endpoint.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">415</span></td>
                        <td><code>unsupported_media_type</code></td>
                        <td class="small">The Content-Type header should be 'application/json'.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">422</span></td>
                        <td><code>unprocessable_entity</code></td>
                        <td class="small">Missing required parameter or attribute validation error.</td>
                     </tr>
                     <tr>
                        <td><span class="badge bg-secondary bg-opacity-25 text-dark">Server</span></td>
                        <td><span class="badge bg-light text-dark">500</span></td>
                        <td><code>technical_issues</code></td>
                        <td class="small">We are currently facing some technical issues, please try again later.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">500</span></td>
                        <td><code>unexpected_server_error</code></td>
                        <td class="small">An unexpected server error has occurred.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">501</span></td>
                        <td><code>unimplemented</code></td>
                        <td class="small">This feature has not been implemented yet.</td>
                     </tr>
                     <tr>
                        <td></td>
                        <td><span class="badge bg-light text-dark">503</span></td>
                        <td><code>temporary_shutdown_endpoint</code></td>
                        <td class="small">Endpoint temporarily stopped due to performance reasons.</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>

<!-- Request & Response Standards -->
<div class="row mb-5" id="request-and-response-stands">
   <div class="col-12">
      <div class="card border-0 shadow-sm rounded-3">
         <div class="card-body p-4">
            <div class="d-flex align-items-center mb-4">
               <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                  <i class="bi bi-arrow-left-right text-info fs-5"></i>
               </div>
               <h5 class="fw-bold mb-0">Request &amp; Response Standards</h5>
            </div>
            <div class="row g-4">
               <div class="col-lg-6">
                  <ul class="list-group list-group-flush">
                     <li class="list-group-item border-0 ps-0 small"><i class="bi bi-check-circle text-success me-2"></i>Requests sent through <strong>HTTPS/HTTP</strong> to your domain</li>
                     <li class="list-group-item border-0 ps-0 small"><i class="bi bi-check-circle text-success me-2"></i>Headers must include <code>Content-Type: application/json</code></li>
                     <li class="list-group-item border-0 ps-0 small"><i class="bi bi-check-circle text-success me-2"></i>All attributes use <strong>snake_case</strong> format</li>
                     <li class="list-group-item border-0 ps-0 small"><i class="bi bi-check-circle text-success me-2"></i>CORS enabled &mdash; but avoid direct browser API calls</li>
                     <li class="list-group-item border-0 ps-0 small"><i class="bi bi-check-circle text-success me-2"></i>API tokens must be kept <strong>secure and private</strong></li>
                  </ul>
               </div>
               <div class="col-lg-6">
                  <div class="p-3 rounded-3 font-monospace small" style="background: #1e1e1e; color: #d4d4d4;">
                     <div style="color: #6a9955;">// All requests include:</div>
                     <div><span style="color: #9cdcfe;">Base URL</span>: <span style="color: #ce9178;">https://yourdomain.com</span></div>
                     <div><span style="color: #9cdcfe;">Auth</span>: <span style="color: #ce9178;">API Token + JSON</span></div>
                     <div><span style="color: #9cdcfe;">Methods</span>: <span style="color: #569cd6;">GET</span>, <span style="color: #dcdcaa;">POST</span>, <span style="color: #f44747;">DELETE</span></div>
                  </div>
                  <div class="d-flex flex-wrap gap-3 mt-3">
                     <div class="text-center">
                        <span class="badge bg-success fs-6 px-3 py-2 d-block mb-1">GET</span>
                        <small class="text-muted">Retrieve</small>
                     </div>
                     <div class="text-center">
                        <span class="badge bg-warning text-dark fs-6 px-3 py-2 d-block mb-1">POST</span>
                        <small class="text-muted">Create/Update</small>
                     </div>
                     <div class="text-center">
                        <span class="badge bg-danger fs-6 px-3 py-2 d-block mb-1">DELETE</span>
                        <small class="text-muted">Remove</small>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<!-- Postman Collection Section -->
<div class="row mb-5">
   <div class="col-12">
      <div class="card border-0 shadow-sm rounded-3">
         <div class="card-body p-4">
            <div class="d-flex align-items-center mb-4">
               <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                  <i class="bi bi-collection text-info fs-5"></i>
               </div>
               <h5 class="fw-bold mb-0">Postman Collection</h5>
            </div>
            <div class="row align-items-center">
               <div class="col-lg-8">
                  <p class="mb-3 text-muted">All API endpoints are available as a comprehensive Postman collection for easy testing and integration. Import the collection to get started immediately.</p>
                  <div class="d-flex flex-wrap gap-2 mb-3">
                     <span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-check me-1"></i>All Endpoints</span>
                     <span class="badge bg-primary bg-opacity-10 text-primary"><i class="bi bi-check me-1"></i>Pre-configured Headers</span>
                     <span class="badge bg-warning bg-opacity-10 text-warning"><i class="bi bi-check me-1"></i>Example Requests</span>
                     <span class="badge bg-info bg-opacity-10 text-info"><i class="bi bi-check me-1"></i>Response Examples</span>
                  </div>
               </div>
               <div class="col-lg-4 text-center">
                  <a href="<?=base_url();?>assets/Affiliate-Pro.postman_collection.json" 
                     class="btn btn-primary btn-lg fw-bold shadow-sm" 
                     download="Affiliate-Pro.postman_collection.json">
                     <i class="bi bi-download me-2"></i>Download Collection
                  </a>
                  <small class="text-muted mt-2 d-block">JSON Format &bull; Ready to Import</small>
               </div>
            </div>
            <hr class="my-4">
            <div class="row g-3">
               <div class="col-md-4">
                  <div class="d-flex align-items-start p-3 rounded-3" style="background: #f8f9fa;">
                     <span class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-primary me-3 flex-shrink-0" style="width: 36px; height: 36px;">1</span>
                     <div>
                        <h6 class="fw-semibold mb-1">Download</h6>
                        <small class="text-muted">Get the collection file</small>
                     </div>
                  </div>
               </div>
               <div class="col-md-4">
                  <div class="d-flex align-items-start p-3 rounded-3" style="background: #f8f9fa;">
                     <span class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-success me-3 flex-shrink-0" style="width: 36px; height: 36px;">2</span>
                     <div>
                        <h6 class="fw-semibold mb-1">Import</h6>
                        <small class="text-muted">Import into Postman</small>
                     </div>
                  </div>
               </div>
               <div class="col-md-4">
                  <div class="d-flex align-items-start p-3 rounded-3" style="background: #f8f9fa;">
                     <span class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-warning me-3 flex-shrink-0" style="width: 36px; height: 36px;">3</span>
                     <div>
                        <h6 class="fw-semibold mb-1">Test</h6>
                        <small class="text-muted">Start testing APIs</small>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
