@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h1 class="mb-4">📘 SarfSDK Integration Guide</h1>

    <p class="d-flex align-items-center gap-2">
      This guide explains how to integrate <b>SarfSDK</b> into your Laravel (or any web) project.  
    </p>
    <div class="d-flex gap-2 mb-3">
        <a href="{{ $docPath }}" download class="btn btn-primary btn-sm">
            ⬇ Download Documentation
        </a>
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#publicKeyModal">
            🔑 Generate Public Key
        </button>
    </div>

    
    <hr>

    <!-- Introduction -->
    <h2 class="mt-4 mb-3 fw-bold">1. Introduction</h2>
    <p class="text-muted">
        <b>SarfSDK</b> is part of the <b>Sarf application</b>, a digital platform that helps users 
        track budgets, monitor daily expenses, and maintain financial records.  
    </p>
    <p class="text-muted">
        By integrating this SDK, your system can <b>send invoices directly</b> to Sarf users, 
        eliminating manual entry and enabling real-time expense tracking.
    </p>

    <!-- How to Include -->
    <h2 class="mt-4 mb-3 fw-bold">2. How to Include</h2>
<pre><code>&lt;script src="https://sarf.sa/project/sdk/sarf-sdk.js"&gt;&lt;/script&gt;
&lt;script&gt;
  SarfSDK({
    key: "YOUR_PUBLIC_KEY",
    container: "sarf-sdk",
    userid: "9665XXXXXXXX",
    invoiceTotal: "total",
    customer_mobile: "customer_mobile",
    description: "description",
    attachments: "attachments",
    language: "en"  // or "ar"
  });
&lt;/script&gt;
</code></pre>

    <!-- Options -->
    <h2 class="mt-4 mb-3 fw-bold">3. Configuration Options</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Option</th>
                <th>Type</th>
                <th>Required</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr><td><code>key</code></td><td>String</td><td>✅ Yes</td><td>Your Sarf public API key.</td></tr>
            <tr><td><code>container</code></td><td>String</td><td>✅ Yes</td><td>Element ID where SDK will render.</td></tr>
            <tr><td><code>userid</code></td><td>String</td><td>✅ Yes</td><td>User’s mobile number (9665XXXXXXXX).</td></tr>
            <tr><td><code>invoiceTotal</code></td><td>String</td><td>❌ No</td><td>Input ID for invoice total.</td></tr>
            <tr><td><code>customer_mobile</code></td><td>String</td><td>❌ No</td><td>Input ID for customer’s mobile number.</td></tr>
            <tr><td><code>description</code></td><td>String</td><td>❌ No</td><td>Input ID for invoice description.</td></tr>
            <tr><td><code>attachments</code></td><td>String</td><td>❌ No</td><td>File input ID for invoice attachments.</td></tr>
            <tr><td><code>isModal</code></td><td>Boolean</td><td>❌ No</td><td>Whether to use modal form (default: true).</td></tr>
            <tr><td><code>register_div</code></td><td>String</td><td>❌ No</td><td>Element ID where register button appears.</td></tr>
            <tr><td><code>invoice_btn_type</code></td><td>"button" / "submit"</td><td>❌ No</td><td>Button type for invoice submission.</td></tr>
            <tr><td><code>registration_btn_type</code></td><td>"button" / "submit"</td><td>❌ No</td><td>Button type for registration.</td></tr>
            <tr><td><code>language</code></td><td>"en" or "ar"</td><td>❌ No</td><td>Interface language (default: "ar").</td></tr>
        </tbody>
    </table>

    <!-- Workflow -->
    <h2 class="mt-4 mb-3 fw-bold">4. Workflow</h2>
    <ol>
        <li>SDK initializes and validates your <b>public key</b>.</li>
        <li>Calls <code>/api/check-user</code> to verify the <b>userid</b>.</li>
        <li>If user exists → shows <b>Send Invoice</b> button.</li>
        <li>If not → shows <b>Register with Sarf</b> button.</li>
        <li>If <b>customer_mobile</b> + <b>invoiceTotal</b> are present → invoice auto-generated.</li>
        <li>Otherwise → modal form appears for manual input.</li>
    </ol>

    <!-- Examples -->
    <h2 class="mt-4 mb-3 fw-bold">5. Examples</h2>

    <h5>Example 1: Show Only Buttons</h5>
<pre><code>&lt;div id="sarf-sdk"&gt;&lt;/div&gt;

&lt;script&gt;
  SarfSDK({
    key: "MY_PUBLIC_KEY",
    container: "sarf-sdk",
    userid: "966500123456",
    language: "en"
  });
&lt;/script&gt;
</code></pre>

    <h5 class="mt-3">Example 2: Auto-send Invoice</h5>
<pre><code>&lt;input type="text" id="customer_mobile" value="966500987654" /&gt;
&lt;input type="text" id="total" value="150.75" /&gt;
&lt;input type="text" id="description" value="Order #1234" /&gt;
&lt;input type="file" id="attachments" multiple /&gt;

&lt;div id="sarf-sdk"&gt;&lt;/div&gt;

&lt;script&gt;
  SarfSDK({
    key: "MY_PUBLIC_KEY",
    container: "sarf-sdk",
    userid: "966500123456",
    invoiceTotal: "total",
    customer_mobile: "customer_mobile",
    description: "description",
    attachments: "attachments",
    language: "en"
  });
&lt;/script&gt;
</code></pre>

    <!-- API -->
    <h2 class="mt-4 mb-3 fw-bold">6. API Endpoints Used</h2>
    <ul>
        <li><code>/api/validate-key</code> → Validate key</li>
        <li><code>/api/check-user</code> → Check user registration</li>
        <li><code>/api/user/list</code> → Search customers</li>
        <li><code>/api/generate_simple_invoice</code> → Generate invoice</li>
    </ul>

    <!-- Error Handling -->
    <h2 class="mt-4 mb-3 fw-bold">7. Error Handling</h2>
    <ul>
        <li><b>Empty fields</b> → Invoice not generated.</li>
        <li><b>Invalid files</b> → Attachments rejected.</li>
        <li><b>Invalid/expired key</b> → Auth error.</li>
        <li><b>Network issues</b> → Console + alert message.</li>
    </ul>
</div>

<!-- Public Key Modal -->
<div class="modal fade" id="publicKeyModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">🔑 Generate Public Key</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="publicKeyForm">
          @csrf
          <div class="mb-3">
            <label class="form-label">Business Name</label>
            <input type="text" name="business_name" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Mobile (9665XXXXXXXX)</label>
            <input type="text" name="mobile" class="form-control" required>
          </div>
          <div id="publicKeyResult" class="alert d-none"></div>
          <button type="submit" class="btn btn-success w-100">Generate</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Script for Public Key -->
<script>
document.getElementById("publicKeyForm").addEventListener("submit", function(e){
    e.preventDefault();
    let formData = new FormData(this);

    fetch("{{ route('generate.public.key') }}", {
        method: "POST",
        headers: { 'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value },
        body: formData
    })
    .then(r => r.json())
    .then(resp => {
        let result = document.getElementById("publicKeyResult");
        if(resp.success){
            result.className = "alert alert-success";
            result.innerHTML = `
                <b>${resp.message}</b><br>
                <div class="d-flex align-items-center mt-2">
                    <input type="text" id="public-key-input" class="form-control me-2" value="${resp.public_key}" readonly>
                    <button type="button" class="btn btn-sm btn-primary" onclick="copyPublicKey()">📋 Copy</button>
                </div>
                <small id="copy-msg" class="text-success d-none">Copied!</small>
            `;
        }else{
            result.className = "alert alert-danger";
            result.innerHTML = resp.message || "Something went wrong.";
        }
    })
    .catch(err => console.error(err));
});

// ✅ Copy Public Key
function copyPublicKey() {
    let input = document.getElementById("public-key-input");
    if (!input) return;
    input.select();
    document.execCommand("copy");
    document.getElementById("copy-msg").classList.remove("d-none");
    setTimeout(() => document.getElementById("copy-msg").classList.add("d-none"), 2000);
}
</script>
@endsection