{% extends "base.html" %}

{% block title %}All Invoices - QuantumQuickSales{% endblock %}

{% block page_title %}All Invoices{% endblock %}

{% block content %}
<div class="card shadow">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">All Invoices</h6>
        <a href="{{ url_for('admin_invoices_recycle_bin') }}" class="btn btn-outline-danger btn-sm">
            <i class="fas fa-trash-alt me-2"></i>Recycle Bin
        </a>
    </div>
    <div class="card-body">
        {% if invoices %}
            <div class="table-responsive">
                <table class="table table-bordered" id="invoicesTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Invoice ID</th>
                            <th>Customer Name</th>
                            <th>Phone Number</th>
                            <th>Total Amount</th>
                            <th>Payment Mode</th>
                            <th>Date</th>
                            <th>Created By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for invoice in invoices %}
                        <tr>
                            <td>{{ invoice[0] }}</td>
                            <td>{{ invoice[1] }}</td>
                            <td>{{ invoice[2] }}</td>
                            <td>₹{{ "%.2f"|format(invoice[3]) }}</td>
                            <td>
                                <span class="badge {% if invoice[6] == 'Cash' %}bg-success{% elif invoice[6] == 'UPI' %}bg-primary{% elif invoice[6] == 'Hybrid' %}bg-warning{% else %}bg-secondary{% endif %}">
                                    {{ invoice[6] if invoice[6] else 'Cash' }}
                                </span>
                            </td>
                            <td>{{ invoice[4].strftime('%d/%m/%Y %H:%M') if invoice[4] else 'N/A' }}</td>
                            <td>{{ invoice[5] }}</td>
                            <td>
                                <a href="{{ url_for('view_invoice', invoice_id=invoice[0]) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i> View
                                </a>
                                <button type="button" class="btn btn-sm btn-outline-danger delete-invoice-btn" 
                                        data-invoice-id="{{ invoice[0] }}" 
                                        data-customer-name="{{ invoice[1] }}">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-4">
                <i class="fas fa-file-invoice fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No invoices found</h5>
                <p class="text-muted">Create your first invoice to get started</p>
                <a href="{{ url_for('create_invoice') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Create Invoice
                </a>
            </div>
        {% endif %}
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete invoice #<span id="deleteInvoiceId"></span> for customer <span id="deleteCustomerName"></span>?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Note:</strong> This action cannot be undone. You can only delete invoices created within the last 5 minutes.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-2"></i>Delete Invoice
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script>
let currentInvoiceId = null;

// Handle delete button clicks
$(document).on('click', '.delete-invoice-btn', function() {
    currentInvoiceId = $(this).data('invoice-id');
    const customerName = $(this).data('customer-name');
    $('#deleteInvoiceId').text(currentInvoiceId);
    $('#deleteCustomerName').text(customerName);
    $('#deleteModal').modal('show');
});

// Handle delete confirmation
$('#confirmDeleteBtn').on('click', function() {
    if (!currentInvoiceId) return;
    const $btn = $(this);
    $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Deleting...');
    fetch(`/user/invoices/delete/${currentInvoiceId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            $('#deleteModal').modal('hide');
            showAlert('success', data.message);
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            showAlert('danger', data.message);
            $btn.prop('disabled', false).html('<i class="fas fa-trash me-2"></i>Delete Invoice');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'An error occurred while deleting the invoice');
        $btn.prop('disabled', false).html('<i class="fas fa-trash me-2"></i>Delete Invoice');
    });
});

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    const cardBody = document.querySelector('.card-body');
    cardBody.insertBefore(alertDiv, cardBody.firstChild);
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}
</script>
{% endblock %}