{% extends "base.html" %}

{% block title %}API Documentation - Project Ploughshares{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h2>Project Ploughshares API Documentation</h2>
        
        <div class="card mb-4">
            <div class="card-header">
                <h3>Endpoints</h3>
            </div>
            <div class="card-body">
                <h4 class="mt-3">1. List All Transactions</h4>
                <div class="bg-light p-3 mb-3">
                    <p><strong>GET</strong> <code>/api/transactions</code></p>
                    
                    <h5>Complete Example:</h5>
                    <pre class="bg-dark text-light p-2"><code id="getAllTransactions">curl -X GET "http://{{ server_name }}/api/transactions"</code></pre>
                    <button class="btn btn-sm btn-secondary" onclick="copyToClipboard('getAllTransactions')">Copy</button>
                    
                    <h5>Response:</h5>
                    <pre class="bg-dark text-light p-2"><code>[
  {
    "transaction_id": 1,
    "transaction_no": "78708",
    "transaction_type": "Subcontract",
    "company_division": "C A E Inc",
    "amount": 0.00,
    "recipient": "US Army",
    "created_at": "2023-07-02T12:34:56.789012"
  },
  {
    "transaction_id": 2,
    "transaction_no": "78709",
    "transaction_type": "Purchase Order",
    "company_division": "Example Corp",
    "amount": 1000.00,
    "recipient": "Test Recipient",
    "created_at": "2023-07-03T10:11:12.131415"
  }
]</code></pre>
                </div>
                
                <h4 class="mt-4">2. Get Transaction Details</h4>
                <div class="bg-light p-3 mb-3">
                    <p><strong>GET</strong> <code>/api/transaction/{id}</code></p>
                    
                    <h5>Complete Example:</h5>
                    <pre class="bg-dark text-light p-2"><code id="getTransaction">curl -X GET "http://{{ server_name }}/api/transaction/1"</code></pre>
                    <button class="btn btn-sm btn-secondary" onclick="copyToClipboard('getTransaction')">Copy</button>
                    
                    <h5>Response:</h5>
                    <pre class="bg-dark text-light p-2"><code>{
  "transaction": {
    "transaction_id": 1,
    "transaction_no": "78708",
    "transaction_type": "Subcontract",
    "company_division": "C A E Inc",
    "address_1": "5585 Cote de Liesse",
    "address_2": "P O Box 1800",
    "city": "ST LAURENT",
    "province": "QC",
    "region": "Quebec",
    "postal_code": "H4T 1G6",
    "is_primary": true,
    "source_date": "2023-08-23",
    "source_description": "Source Description",
    "description": "7000XR Full Flight Simulator (FFS) in Global 6000/6500 configuration (subc)",
    "amount": 0.00,
    "recipient": "US Army",
    "commodity_class": "Aerospace",
    "contract_number": "SUMMARY",
    "comments": "Subcontract with Leidos, US, through CAE Defense & Security...",
    "created_at": "2023-07-02T12:34:56.789012"
  },
  "documents": [
    {
      "document_id": 1,
      "transaction_id": 1,
      "filename": "78708_20240501.pdf",
      "file_path": "1/78708_20240501.pdf",
      "document_type": "Contract",
      "description": "Contract document",
      "note": "Original contract",
      "upload_date": "2023-07-02T12:34:56.789012"
    }
  ]
}</code></pre>
                </div>
                
                <h4 class="mt-4">3. Create New Transaction</h4>
                <div class="bg-light p-3 mb-3">
                    <p><strong>POST</strong> <code>/api/transaction</code></p>
                    
                    <h5>Complete Example:</h5>
                    <pre class="bg-dark text-light p-2"><code id="createTransaction">curl -X POST "http://{{ server_name }}/api/transaction" \
  -H "Content-Type: application/json" \
  -d '{
    "transaction_no": "12345",
    "transaction_type": "Purchase Order",
    "company_division": "Example Corp",
    "description": "Test transaction",
    "amount": 1000.00,
    "recipient": "Test Recipient"
  }'</code></pre>
                    <button class="btn btn-sm btn-secondary" onclick="copyToClipboard('createTransaction')">Copy</button>
                    
                    <h5>Response:</h5>
                    <pre class="bg-dark text-light p-2"><code>{
  "message": "Transaction created successfully",
  "transaction_id": 2
}</code></pre>
                </div>

                <h4 class="mt-4">4. Update Transaction</h4>
                <div class="bg-light p-3 mb-3">
                    <p><strong>PUT</strong> <code>/api/transaction/{id}</code></p>
                    
                    <h5>Complete Example:</h5>
                    <pre class="bg-dark text-light p-2"><code id="updateTransaction">curl -X PUT "http://{{ server_name }}/api/transaction/2" \
  -H "Content-Type: application/json" \
  -d '{
    "transaction_type": "Purchase Order",
    "company_division": "Updated Corp",
    "description": "Updated transaction",
    "amount": 1500.00,
    "recipient": "Updated Recipient"
  }'</code></pre>
                    <button class="btn btn-sm btn-secondary" onclick="copyToClipboard('updateTransaction')">Copy</button>
                    
                    <h5>Response:</h5>
                    <pre class="bg-dark text-light p-2"><code>{
  "message": "Transaction updated successfully"
}</code></pre>
                </div>

                <h4 class="mt-4">5. Delete Transaction</h4>
                <div class="bg-light p-3 mb-3">
                    <p><strong>DELETE</strong> <code>/api/transaction/{id}</code></p>
                    
                    <h5>Complete Example:</h5>
                    <pre class="bg-dark text-light p-2"><code id="deleteTransaction">curl -X DELETE "http://{{ server_name }}/api/transaction/3"</code></pre>
                    <button class="btn btn-sm btn-secondary" onclick="copyToClipboard('deleteTransaction')">Copy</button>
                    
                    <h5>Response:</h5>
                    <pre class="bg-dark text-light p-2"><code>{
  "message": "Transaction deleted successfully"
}</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function copyToClipboard(elementId) {
        const element = document.getElementById(elementId);
        const text = element.textContent;
        
        navigator.clipboard.writeText(text).then(
            function() {
                // Show a temporary success message instead of an alert
                const button = document.querySelector(`button[onclick="copyToClipboard('${elementId}')"]`);
                const originalText = button.textContent;
                button.textContent = "Copied!";
                button.classList.remove("btn-secondary");
                button.classList.add("btn-success");
                
                setTimeout(() => {
                    button.textContent = originalText;
                    button.classList.remove("btn-success");
                    button.classList.add("btn-secondary");
                }, 1500);
            }
        );
    }
</script>
{% endblock %}