{% extends "base.html" %}

{% block title %}Recycle Bin - Deleted Invoices{% endblock %}

{% block page_title %}Recycle Bin (Deleted 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-danger">Recycle Bin</h6>
        <a href="{{ url_for('admin_invoices') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-2"></i>Back to Invoices
        </a>
    </div>
    <div class="card-body">
        {% if invoices %}
            <div class="table-responsive">
                <table class="table table-bordered" id="recycleBinTable" 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>
                                <button type="button" class="btn btn-sm btn-outline-success restore-invoice-btn" data-invoice-id="{{ invoice[0] }}">
                                    <i class="fas fa-undo"></i> Restore
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger permanent-delete-invoice-btn" data-invoice-id="{{ invoice[0] }}">
                                    <i class="fas fa-trash"></i> Delete Permanently
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-4">
                <i class="fas fa-trash-alt fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No deleted invoices</h5>
                <p class="text-muted">The recycle bin is empty.</p>
            </div>
        {% endif %}
    </div>
</div>

<!-- Confirm Permanent Delete Modal -->
<div class="modal fade" id="permanentDeleteModal" tabindex="-1" aria-labelledby="permanentDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="permanentDeleteModalLabel">Confirm Permanent 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 permanently delete this invoice? This action cannot be undone.</p>
            </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="confirmPermanentDeleteBtn">
                    <i class="fas fa-trash me-2"></i>Delete Permanently
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

// Restore invoice
$(document).on('click', '.restore-invoice-btn', function() {
    const invoiceId = $(this).data('invoice-id');
    const $btn = $(this);
    $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Restoring...');
    fetch(`/admin/invoices/restore/${invoiceId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => { location.reload(); }, 1200);
        } else {
            showAlert('danger', data.message);
            $btn.prop('disabled', false).html('<i class="fas fa-undo"></i> Restore');
        }
    })
    .catch(() => {
        showAlert('danger', 'An error occurred while restoring the invoice.');
        $btn.prop('disabled', false).html('<i class="fas fa-undo"></i> Restore');
    });
});

// Permanent delete
$(document).on('click', '.permanent-delete-invoice-btn', function() {
    currentInvoiceId = $(this).data('invoice-id');
    $('#permanentDeleteModal').modal('show');
});
$('#confirmPermanentDeleteBtn').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(`/admin/invoices/permanent_delete/${currentInvoiceId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            $('#permanentDeleteModal').modal('hide');
            showAlert('success', data.message);
            setTimeout(() => { location.reload(); }, 1200);
        } else {
            showAlert('danger', data.message);
            $btn.prop('disabled', false).html('<i class="fas fa-trash me-2"></i>Delete Permanently');
        }
    })
    .catch(() => {
        showAlert('danger', 'An error occurred while deleting the invoice.');
        $btn.prop('disabled', false).html('<i class="fas fa-trash me-2"></i>Delete Permanently');
    });
});

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 %}