{% extends "base.html" %}

{% block title %}Create Invoice - Invoice Generation Service{% endblock %}

{% block content %}
<div class="card">
    <h2>Create New Invoice</h2>
    
    {% if error %}
    <div class="alert alert-error">
        {{ error }}
    </div>
    {% endif %}
    
    <form id="invoice-form" method="POST" action="{{ url_for('create_invoice') }}">
        <div class="form-section">
            <h3>Customer Information</h3>
            
            <div class="form-group">
                <label for="customer_name">Customer Name *</label>
                <input type="text" id="customer_name" name="customer_name" required value="{{ customer_name or '' }}">
            </div>
            
            <div class="form-group">
                <label for="customer_email">Customer Email</label>
                <input type="email" id="customer_email" name="customer_email" value="{{ customer_email or '' }}">
            </div>
            
            <div class="form-group">
                <label for="customer_address">Customer Address</label>
                <textarea id="customer_address" name="customer_address" rows="3">{{ customer_address or '' }}</textarea>
            </div>
        </div>
        
        <div class="form-section">
            <h3>Invoice Details</h3>
            
            <div class="form-group">
                <label for="due_date">Due Date *</label>
                <input type="date" id="due_date" name="due_date" required value="{{ due_date }}">
            </div>
            
            <div class="form-group">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" rows="3">{{ notes or '' }}</textarea>
            </div>
        </div>
        
        <div class="form-section">
            <h3>Invoice Items</h3>
            <p>Add at least one item to your invoice.</p>
            
            <div class="invoice-items">
                <div class="invoice-item">
                    <div class="form-group">
                        <label for="item-description-0">Description *</label>
                        <input type="text" id="item-description-0" name="items[0][description]" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="item-quantity-0">Quantity *</label>
                        <input type="number" id="item-quantity-0" name="items[0][quantity]" min="0.01" step="0.01" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="item-unit-price-0">Unit Price ($) *</label>
                        <input type="number" id="item-unit-price-0" name="items[0][unit_price]" min="0.01" step="0.01" required>
                    </div>
                    
                    <div class="form-group">
                        <label>Amount ($)</label>
                        <div class="amount-display">0.00</div>
                    </div>
                    
                    <button type="button" class="btn remove-item-btn">Remove</button>
                </div>
            </div>
            
            <div class="item-buttons">
                <button type="button" id="add-item-btn" class="btn add-item-btn">Add Item</button>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn">Generate Invoice</button>
            <a href="{{ url_for('home') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .form-section {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
    }
    
    .form-section h3 {
        margin-bottom: 1rem;
        color: #3498db;
    }
    
    .invoice-items {
        margin-bottom: 1rem;
    }
    
    .item-buttons {
        margin-bottom: 1rem;
    }
    
    .form-actions {
        margin-top: 2rem;
        display: flex;
        gap: 1rem;
    }
    
    .amount-display {
        padding: 0.75rem;
        background-color: #f5f7fa;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-weight: 500;
    }
</style>
{% endblock %}