Embed Invoice Generator

<iframe 
    src="https://invoicemedley.com/api/embed-example" 
    width="100%" 
    height="800" 
    style="border: 1px solid #ddd; border-radius: 4px;"
    title="Invoice Generator">
</iframe>

<!-- Add this div where you want the invoice form to appear -->
<div id="invoice-generator-container"></div>

<!-- Add this script at the end of your body -->
<script>
(function() {
    // Create a form dynamically
    const container = document.getElementById('invoice-generator-container');
    
    // Add form HTML
    container.innerHTML = `
        <form id="invoice-form" class="invoice-form">
            <h3>Create Invoice</h3>
            
            <div class="form-group">
                <label>Company Name</label>
                <input type="text" name="company_name" required>
            </div>
            
            <div class="form-group">
                <label>Customer Name</label>
                <input type="text" name="customer_name" required>
            </div>
            
            <div class="form-group">
                <label>Item Description</label>
                <input type="text" name="item_description" required>
            </div>
            
            <div class="form-group">
                <label>Amount</label>
                <input type="number" name="amount" required>
            </div>
            
            <button type="submit">Generate Invoice</button>
        </form>
        <div id="result"></div>
    `;
    
    // Add some basic styles
    const style = document.createElement('style');
    style.textContent = `
        .invoice-form { max-width: 500px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
        .invoice-form h3 { margin-top: 0; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .invoice-form button { background: #0d6efd; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; }
    `;
    document.head.appendChild(style);
    
    // Handle form submission
    document.getElementById('invoice-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const companyName = this.elements.company_name.value;
        const customerName = this.elements.customer_name.value;
        const itemDescription = this.elements.item_description.value;
        const amount = parseFloat(this.elements.amount.value);
        
        // Prepare data for API
        const invoiceData = {
            company_name: companyName,
            customer_name: customerName,
            items: [
                {
                    description: itemDescription,
                    quantity: 1,
                    unit_price: amount
                }
            ]
        };
        
        // Send to API
        fetch('https://invoicemedley.com/api/create-invoice', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(invoiceData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // Show success message and download link
                document.getElementById('result').innerHTML = `
                    <div style="margin-top: 20px; padding: 15px; background: #d4edda; border-radius: 4px; color: #155724;">
                        <p><strong>Invoice Created!</strong> #${data.invoice.invoice_number}</p>
                        <p>Total: $${data.invoice.grand_total.toFixed(2)}</p>
                        <button id="download-pdf" style="background: #28a745; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer;">
                            Download PDF
                        </button>
                    </div>
                `;
                
                // Add PDF download functionality
                document.getElementById('download-pdf').addEventListener('click', function() {
                    const pdfUrl = 'https://invoicemedley.com/api/pdf-invoice';
                    
                    fetch(pdfUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data.invoice)
                    })
                    .then(response => response.blob())
                    .then(blob => {
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = `invoice_${data.invoice.invoice_number}.pdf`;
                        a.click();
                    });
                });
            } else {
                document.getElementById('result').innerHTML = `
                    <div style="margin-top: 20px; padding: 15px; background: #f8d7da; border-radius: 4px; color: #721c24;">
                        <p><strong>Error:</strong> ${data.message}</p>
                    </div>
                `;
            }
        })
        .catch(error => {
            document.getElementById('result').innerHTML = `
                <div style="margin-top: 20px; padding: 15px; background: #f8d7da; border-radius: 4px; color: #721c24;">
                    <p><strong>Error:</strong> Could not connect to the invoice service.</p>
                </div>
            `;
            console.error('Error:', error);
        });
    });
})();
</script>