<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="admin"/>
    <title>Create Invoice - Admin</title>
    <content tag="title">Create Invoice</content>
</head>
<body>

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="${createLink(action: 'index')}">Invoices</a>
            </li>
            <li class="breadcrumb-item active">Create New</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-plus-circle me-2 text-muted"></i>New Invoice
                    </h5>
                </div>
                <div class="card-body">
                    <g:form action="save" method="POST">
                        <!-- Invoice Details -->
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Invoice Number</label>
                                <input type="text" class="form-control"
                                       id="invoiceNumber" name="invoiceNumber" value="${invoice?.invoiceNumber}"
                                       placeholder="INV-2024-001"/>
                                <small class="text-muted">Leave blank to auto-generate</small>
                            </div>
                        </div>

                        <hr class="my-4"/>

                        <!-- Customer Information -->
                        <h6 class="text-muted mb-3">Customer Information</h6>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Customer ID <span class="text-danger">*</span></label>
                                <input type="text" class="form-control ${hasErrors(bean: invoice, field: 'customerId', 'is-invalid')}"
                                       id="customerId" name="customerId" value="${invoice?.customerId}"/>
                                <g:renderErrors bean="${invoice}" field="customerId"/>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Customer Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control ${hasErrors(bean: invoice, field: 'customerName', 'is-invalid')}"
                                       id="customerName" name="customerName" value="${invoice?.customerName}"/>
                                <g:renderErrors bean="${invoice}" field="customerName"/>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Customer Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control ${hasErrors(bean: invoice, field: 'customerEmail', 'is-invalid')}"
                                       id="customerEmail" name="customerEmail" value="${invoice?.customerEmail}"/>
                                <g:renderErrors bean="${invoice}" field="customerEmail"/>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Customer Address</label>
                                <input type="text" class="form-control" name="customerAddress" value="${invoice?.customerAddress}"/>
                            </div>
                        </div>

                        <hr class="my-4"/>

                        <!-- Invoice Dates -->
                        <h6 class="text-muted mb-3">Invoice Dates</h6>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Issue Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control ${hasErrors(bean: invoice, field: 'issueDate', 'is-invalid')}"
                                       id="issueDate" name="issueDate" value="${invoice?.issueDate ? new java.text.SimpleDateFormat('yyyy-MM-dd').format(invoice.issueDate) : new java.text.SimpleDateFormat('yyyy-MM-dd').format(new Date())}"/>
                                <g:renderErrors bean="${invoice}" field="issueDate"/>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Due Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control ${hasErrors(bean: invoice, field: 'dueDate', 'is-invalid')}"
                                       id="dueDate" name="dueDate" value="${invoice?.dueDate ? new java.text.SimpleDateFormat('yyyy-MM-dd').format(invoice.dueDate) : ''}"/>
                                <g:renderErrors bean="${invoice}" field="dueDate"/>
                            </div>
                        </div>

                        <hr class="my-4"/>

                        <!-- Amount Details -->
                        <h6 class="text-muted mb-3">Amount Details</h6>
                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <label class="form-label">Subtotal <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" class="form-control ${hasErrors(bean: invoice, field: 'subtotal', 'is-invalid')}" 
                                           name="subtotal" id="subtotal" value="${invoice?.subtotal}" onchange="calculateTotal()"/>
                                </div>
                                <g:renderErrors bean="${invoice}" field="subtotal"/>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Tax Rate (%)</label>
                                <div class="input-group">
                                    <input type="number" step="0.01" class="form-control" id="taxRate"
                                           name="taxRate" value="${invoice?.taxRate ?: 20}" onchange="calculateTotal()"/>
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Tax Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" class="form-control" id="taxAmount"
                                           name="taxAmount" value="${invoice?.taxAmount ?: 0}" readonly/>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Discount</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" class="form-control" id="discount"
                                           name="discount" value="${invoice?.discount ?: 0}" onchange="calculateTotal()"/>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Total Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" step="0.01" class="form-control fw-bold" id="totalAmount"
                                           name="totalAmount" value="${invoice?.totalAmount}" readonly/>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Currency</label>
                                <select class="form-select" name="currency">
                                    <option value="USD" ${invoice?.currency == 'USD' ? 'selected' : ''}>USD</option>
                                    <option value="EUR" ${invoice?.currency == 'EUR' ? 'selected' : ''}>EUR</option>
                                    <option value="GBP" ${invoice?.currency == 'GBP' ? 'selected' : ''}>GBP</option>
                                </select>
                            </div>
                        </div>

                        <hr class="my-4"/>

                        <!-- Notes -->
                        <h6 class="text-muted mb-3">Additional Notes</h6>
                        <div class="mb-4">
                            <textarea class="form-control" name="notes" rows="3" placeholder="Optional notes for the customer...">${invoice?.notes}</textarea>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="${createLink(action: 'index')}" class="btn btn-outline-secondary">Cancel</a>
                            <button type="submit" id="btn-submit" class="btn btn-violet">
                                <i class="bi bi-check-lg me-1"></i> Create Invoice
                            </button>
                        </div>
                    </g:form>
                </div>
            </div>
        </div>

        <!-- Help Panel -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-info-circle me-2 text-muted"></i>Help
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Create a new invoice for a customer. The invoice will be saved as a draft until you send it.
                    </p>
                    <ul class="text-muted small mb-0">
                        <li class="mb-2">All required fields are marked with <span class="text-danger">*</span></li>
                        <li class="mb-2">Tax and total are automatically calculated</li>
                        <li class="mb-2">After creating, you can send it to the customer</li>
                        <li>Customers can pay via Stripe or PayPal</li>
                    </ul>
                </div>
            </div>

            <!-- Quick Totals -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-calculator me-2 text-muted"></i>Totals Preview
                    </h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless table-sm mb-0">
                        <tr>
                            <td class="text-muted">Subtotal</td>
                            <td class="text-end" id="previewSubtotal">$0.00</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Tax</td>
                            <td class="text-end" id="previewTax">$0.00</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Discount</td>
                            <td class="text-end text-danger" id="previewDiscount">-$0.00</td>
                        </tr>
                        <tr class="border-top">
                            <td class="fw-bold">Total</td>
                            <td class="text-end fw-bold text-success" id="previewTotal">$0.00</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        function calculateTotal() {
            const subtotal = parseFloat(document.getElementById('subtotal').value) || 0;
            const taxRate = parseFloat(document.getElementById('taxRate').value) || 0;
            const discount = parseFloat(document.getElementById('discount').value) || 0;
            
            const taxAmount = subtotal * (taxRate / 100);
            const total = subtotal + taxAmount - discount;
            
            document.getElementById('taxAmount').value = taxAmount.toFixed(2);
            document.getElementById('totalAmount').value = total.toFixed(2);
            
            // Update preview
            document.getElementById('previewSubtotal').textContent = '$' + subtotal.toFixed(2);
            document.getElementById('previewTax').textContent = '$' + taxAmount.toFixed(2);
            document.getElementById('previewDiscount').textContent = '-$' + discount.toFixed(2);
            document.getElementById('previewTotal').textContent = '$' + total.toFixed(2);
        }
        
        // Initialize on load
        document.addEventListener('DOMContentLoaded', calculateTotal);
    </script>

</body>
</html>
