{% extends 'base.html' %}

{% block title %}Create Invoice - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-0">
                        <i class="bi bi-receipt me-3" style="color: var(--accent-blue);"></i>
                        Create Invoice
                    </h2>
                    <p class="text-secondary mt-2 mb-0">Generate a new invoice for customer billing</p>
                </div>
                <a href="{% url 'billing:invoice_list' %}" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-left me-2"></i> Back to Invoices
                </a>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="bi bi-file-earmark-plus me-2"></i> Invoice Details
                            </h6>
                        </div>
                        <div class="card-body">
                            <form method="post" id="invoiceForm">
                                {% csrf_token %}
                                
                                <!-- Customer Selection -->
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="customer" class="form-label">
                                            <i class="bi bi-person me-1"></i> Customer *
                                        </label>
                                        <select name="customer" id="customer" class="form-select" required>
                                            <option value="">Select a customer...</option>
                                            {% for customer in customers %}
                                            <option value="{{ customer.id }}" data-package="{{ customer.package.id|default:'' }}" data-price="{{ customer.package.price|default:'0' }}">
                                                {{ customer.full_name }} - {{ customer.phone }}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="package" class="form-label">
                                            <i class="bi bi-box-seam me-1"></i> Package
                                        </label>
                                        <select name="package" id="package" class="form-select">
                                            <option value="">Select a package...</option>
                                            {% for package in packages %}
                                            <option value="{{ package.id }}" data-price="{{ package.price }}">
                                                {{ package.name }} - KSh {{ package.price }}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <!-- Billing Period -->
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="billing_period_start" class="form-label">
                                            <i class="bi bi-calendar-event me-1"></i> Billing Period Start *
                                        </label>
                                        <input type="date" name="billing_period_start" id="billing_period_start" class="form-control" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="billing_period_end" class="form-label">
                                            <i class="bi bi-calendar-check me-1"></i> Billing Period End *
                                        </label>
                                        <input type="date" name="billing_period_end" id="billing_period_end" class="form-control" required>
                                    </div>
                                </div>

                                <!-- Due Date -->
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="due_date" class="form-label">
                                            <i class="bi bi-calendar-x me-1"></i> Due Date *
                                        </label>
                                        <input type="date" name="due_date" id="due_date" class="form-control" required>
                                    </div>
                                </div>

                                <!-- Amounts -->
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="package_amount" class="form-label">
                                            <i class="bi bi-cash me-1"></i> Package Amount *
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">KSh</span>
                                            <input type="number" name="package_amount" id="package_amount" class="form-control" step="0.01" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="installation_fee" class="form-label">
                                            <i class="bi bi-tools me-1"></i> Installation Fee
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">KSh</span>
                                            <input type="number" name="installation_fee" id="installation_fee" class="form-control" step="0.01" value="0.00">
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="penalty_amount" class="form-label">
                                            <i class="bi bi-exclamation-triangle me-1"></i> Penalty Amount
                                        </label>
                                        <div class="input-group">
                                            <span class="input-group-text">KSh</span>
                                            <input type="number" name="penalty_amount" id="penalty_amount" class="form-control" step="0.01" value="0.00">
                                        </div>
                                    </div>
                                </div>

                                <!-- Notes -->
                                <div class="mb-4">
                                    <label for="notes" class="form-label">
                                        <i class="bi bi-journal-text me-1"></i> Notes
                                    </label>
                                    <textarea name="notes" id="notes" class="form-control" rows="3" placeholder="Add any additional notes for this invoice..."></textarea>
                                </div>

                                <!-- Form Actions -->
                                <div class="d-flex gap-3">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle me-2"></i> Create Invoice
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
                                        <i class="bi bi-arrow-clockwise me-2"></i> Reset Form
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <!-- Invoice Preview -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="bi bi-eye me-2"></i> Invoice Preview
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="invoice-preview">
                                <div class="mb-3">
                                    <strong>Customer:</strong>
                                    <div id="preview-customer" class="text-secondary">Select a customer</div>
                                </div>
                                
                                <div class="mb-3">
                                    <strong>Package:</strong>
                                    <div id="preview-package" class="text-secondary">Select a package</div>
                                </div>
                                
                                <div class="mb-3">
                                    <strong>Billing Period:</strong>
                                    <div id="preview-period" class="text-secondary">Set billing period</div>
                                </div>
                                
                                <div class="mb-3">
                                    <strong>Due Date:</strong>
                                    <div id="preview-due-date" class="text-secondary">Set due date</div>
                                </div>
                                
                                <hr style="border-color: var(--border-color);">
                                
                                <div class="invoice-amounts">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Package Amount:</span>
                                        <span id="preview-package-amount">KSh 0.00</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Installation Fee:</span>
                                        <span id="preview-installation-fee">KSh 0.00</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-3">
                                        <span>Penalty Amount:</span>
                                        <span id="preview-penalty-amount">KSh 0.00</span>
                                    </div>
                                    <hr style="border-color: var(--border-color);">
                                    <div class="d-flex justify-content-between">
                                        <strong>Total Amount:</strong>
                                        <strong id="preview-total-amount" style="color: var(--accent-blue);">KSh 0.00</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Tips -->
                    <div class="card mt-3">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="bi bi-lightbulb me-2"></i> Quick Tips
                            </h6>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <small>Select customer to auto-fill service details</small>
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <small>Billing period determines the service duration</small>
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <small>Due date should be after the billing period</small>
                                </li>
                                <li>
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <small>Installation fees are one-time charges</small>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const customerSelect = document.getElementById('customer');
    const packageSelect = document.getElementById('package');
    const packageAmountInput = document.getElementById('package_amount');
    const installationFeeInput = document.getElementById('installation_fee');
    const penaltyAmountInput = document.getElementById('penalty_amount');
    const billingStartInput = document.getElementById('billing_period_start');
    const billingEndInput = document.getElementById('billing_period_end');
    const dueDateInput = document.getElementById('due_date');

    // Set default dates
    const today = new Date();
    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
    const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    const dueDate = new Date(today.getFullYear(), today.getMonth() + 1, 15);

    billingStartInput.value = firstDay.toISOString().split('T')[0];
    billingEndInput.value = lastDay.toISOString().split('T')[0];
    dueDateInput.value = dueDate.toISOString().split('T')[0];

    // Customer selection handler
    customerSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const packageId = selectedOption.dataset.package;
        const packagePrice = selectedOption.dataset.price;

        if (packageId) {
            packageSelect.value = packageId;
            packageAmountInput.value = packagePrice;
        }

        updatePreview();
    });

    // Package selection handler
    packageSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const packagePrice = selectedOption.dataset.price;

        if (packagePrice) {
            packageAmountInput.value = packagePrice;
        }

        updatePreview();
    });

    // Amount inputs handlers
    [packageAmountInput, installationFeeInput, penaltyAmountInput].forEach(input => {
        input.addEventListener('input', updatePreview);
    });

    // Date inputs handlers
    [billingStartInput, billingEndInput, dueDateInput].forEach(input => {
        input.addEventListener('change', updatePreview);
    });

    function updatePreview() {
        // Customer
        const customerText = customerSelect.options[customerSelect.selectedIndex].text;
        document.getElementById('preview-customer').textContent = 
            customerSelect.value ? customerText : 'Select a customer';

        // Package
        const packageText = packageSelect.options[packageSelect.selectedIndex].text;
        document.getElementById('preview-package').textContent = 
            packageSelect.value ? packageText : 'Select a package';

        // Billing period
        const periodText = billingStartInput.value && billingEndInput.value 
            ? `${formatDate(billingStartInput.value)} - ${formatDate(billingEndInput.value)}`
            : 'Set billing period';
        document.getElementById('preview-period').textContent = periodText;

        // Due date
        document.getElementById('preview-due-date').textContent = 
            dueDateInput.value ? formatDate(dueDateInput.value) : 'Set due date';

        // Amounts
        const packageAmount = parseFloat(packageAmountInput.value) || 0;
        const installationFee = parseFloat(installationFeeInput.value) || 0;
        const penaltyAmount = parseFloat(penaltyAmountInput.value) || 0;
        const totalAmount = packageAmount + installationFee + penaltyAmount;

        document.getElementById('preview-package-amount').textContent = `KSh ${packageAmount.toFixed(2)}`;
        document.getElementById('preview-installation-fee').textContent = `KSh ${installationFee.toFixed(2)}`;
        document.getElementById('preview-penalty-amount').textContent = `KSh ${penaltyAmount.toFixed(2)}`;
        document.getElementById('preview-total-amount').textContent = `KSh ${totalAmount.toFixed(2)}`;
    }

    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('en-US', { 
            year: 'numeric', 
            month: 'short', 
            day: 'numeric' 
        });
    }

    // Initial preview update
    updatePreview();
});

function resetForm() {
    document.getElementById('invoiceForm').reset();
    
    // Reset dates to default
    const today = new Date();
    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
    const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    const dueDate = new Date(today.getFullYear(), today.getMonth() + 1, 15);

    document.getElementById('billing_period_start').value = firstDay.toISOString().split('T')[0];
    document.getElementById('billing_period_end').value = lastDay.toISOString().split('T')[0];
    document.getElementById('due_date').value = dueDate.toISOString().split('T')[0];
    
    // Reset amounts
    document.getElementById('installation_fee').value = '0.00';
    document.getElementById('penalty_amount').value = '0.00';
    
    // Update preview
    setTimeout(() => {
        const event = new Event('change');
        document.getElementById('customer').dispatchEvent(event);
    }, 100);
}
</script>
{% endblock %}