{% extends 'base.html' %}
{% load static %}

{% block title %}Billing History - 3ncount{% endblock %}

{% block page_pretitle %}Billing & Invoices{% endblock %}
{% block page_title %}Billing History{% endblock %}

{% block page_actions %}
<a href="{% url 'tenants:subscription' %}" class="btn btn-outline-primary">
    <i class="ti ti-arrow-left me-2"></i>Back to Dashboard
</a>
{% endblock %}

{% block extra_css %}
<style>
    .status-badge {
        padding: 0.4rem 0.8rem;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .status-paid {
        background: #d1fae5;
        color: #065f46;
    }
    
    .status-pending {
        background: #fef3c7;
        color: #92400e;
    }
    
    .status-overdue {
        background: #fee2e2;
        color: #991b1b;
    }
    
    .status-failed {
        background: #fecaca;
        color: #7f1d1d;
    }
    
    .invoice-card {
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
        margin-bottom: 1rem;
    }
    
    .invoice-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
    }
    
    .invoice-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .invoice-body {
        padding: 1.5rem;
    }
    
    .invoice-number {
        font-size: 1.2rem;
        font-weight: bold;
        color: #667eea;
    }
    
    .invoice-amount {
        font-size: 1.5rem;
        font-weight: bold;
        color: #2d3748;
    }
    
    .filter-tabs {
        border-bottom: 2px solid #e5e7eb;
        margin-bottom: 2rem;
    }
    
    .filter-tab {
        padding: 1rem 2rem;
        background: none;
        border: none;
        color: #6c757d;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .filter-tab:hover {
        color: #667eea;
    }
    
    .filter-tab.active {
        color: #667eea;
    }
    
    .filter-tab.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: #667eea;
    }
    
    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .summary-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid #e5e7eb;
    }
    
    .summary-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .download-button {
        transition: all 0.3s ease;
    }
    
    .download-button:hover {
        transform: scale(1.05);
    }
</style>
{% endblock %}

{% block content %}

<!-- Summary Cards -->
<div class="summary-cards">
    <div class="summary-card">
        <div class="summary-icon" style="background: #dbeafe; color: #1e40af;">
            <i class="ti ti-file-invoice"></i>
        </div>
        <div>
            <div class="text-muted mb-1">Total Invoices</div>
            <h3 class="mb-0">{{ summary.total_count }}</h3>
        </div>
    </div>
    
    <div class="summary-card">
        <div class="summary-icon" style="background: #d1fae5; color: #065f46;">
            <i class="ti ti-check"></i>
        </div>
        <div>
            <div class="text-muted mb-1">Paid</div>
            <h3 class="mb-0 text-success">RM {{ summary.paid_total|floatformat:2 }}</h3>
        </div>
    </div>
    
    <div class="summary-card">
        <div class="summary-icon" style="background: #fef3c7; color: #92400e;">
            <i class="ti ti-clock"></i>
        </div>
        <div>
            <div class="text-muted mb-1">Pending</div>
            <h3 class="mb-0 text-warning">RM {{ summary.pending_total|floatformat:2 }}</h3>
        </div>
    </div>
    
    <div class="summary-card">
        <div class="summary-icon" style="background: #fee2e2; color: #991b1b;">
            <i class="ti ti-alert-circle"></i>
        </div>
        <div>
            <div class="text-muted mb-1">Overdue</div>
            <h3 class="mb-0 text-danger">RM {{ summary.overdue_total|floatformat:2 }}</h3>
        </div>
    </div>
</div>

<!-- Filter Tabs -->
<div class="filter-tabs" x-data="{ filter: '{{ request.GET.status|default:'all' }}' }">
    <button class="filter-tab" :class="filter === 'all' ? 'active' : ''" 
            @click="filter = 'all'; window.location.href = '?status=all'">
        All Invoices
    </button>
    <button class="filter-tab" :class="filter === 'PAID' ? 'active' : ''" 
            @click="filter = 'PAID'; window.location.href = '?status=PAID'">
        Paid
    </button>
    <button class="filter-tab" :class="filter === 'PENDING' ? 'active' : ''" 
            @click="filter = 'PENDING'; window.location.href = '?status=PENDING'">
        Pending
    </button>
    <button class="filter-tab" :class="filter === 'OVERDUE' ? 'active' : ''" 
            @click="filter = 'OVERDUE'; window.location.href = '?status=OVERDUE'">
        Overdue
    </button>
    <button class="filter-tab" :class="filter === 'FAILED' ? 'active' : ''" 
            @click="filter = 'FAILED'; window.location.href = '?status=FAILED'">
        Failed
    </button>
</div>

<!-- Invoices List -->
{% if invoices %}
    {% for invoice in invoices %}
    <div class="invoice-card">
        <div class="invoice-header">
            <div>
                <div class="invoice-number mb-2">
                    <i class="ti ti-file-invoice me-2"></i>{{ invoice.invoice_number }}
                </div>
                <div class="text-muted">
                    <i class="ti ti-calendar me-2"></i>{{ invoice.created_at|date:"d M Y" }}
                    {% if invoice.due_date %}
                    <span class="ms-3">
                        <i class="ti ti-clock me-2"></i>Due: {{ invoice.due_date|date:"d M Y" }}
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="text-end">
                <div class="invoice-amount mb-2">
                    RM {{ invoice.total_amount|floatformat:2 }}
                </div>
                <span class="status-badge status-{{ invoice.status|lower }}">
                    {{ invoice.get_status_display }}
                </span>
            </div>
        </div>
        
        <div class="invoice-body">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-3">Invoice Details</h5>
                    {% if invoice.line_items %}
                    <div class="mb-2">
                        <strong>Items:</strong>
                        <ul class="mb-0">
                            {% for item in invoice.line_items %}
                            <li>{{ item.description }} - RM {{ item.amount|floatformat:2 }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                    {% if invoice.notes %}
                    <div class="mb-2">
                        <strong>Notes:</strong>
                        {{ invoice.notes }}
                    </div>
                    {% endif %}
                </div>
                
                <div class="col-md-6">
                    <h5 class="mb-3">Amount Breakdown</h5>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal</span>
                        <strong>RM {{ invoice.subtotal|floatformat:2 }}</strong>
                    </div>
                    
                    {% if invoice.tax_amount > 0 %}
                    <div class="d-flex justify-content-between mb-2 text-muted">
                        <span>Tax ({{ invoice.tax_name }})</span>
                        <span>RM {{ invoice.tax_amount|floatformat:2 }}</span>
                    </div>
                    {% endif %}
                    
                    {% if invoice.discount_amount > 0 %}
                    <div class="d-flex justify-content-between mb-2 text-success">
                        <span>Discount</span>
                        <span>- RM {{ invoice.discount_amount|floatformat:2 }}</span>
                    </div>
                    {% endif %}
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between">
                        <strong>Total</strong>
                        <strong class="text-primary">RM {{ invoice.total_amount|floatformat:2 }}</strong>
                    </div>
                </div>
            </div>
            
            <!-- Payment Information -->
            {% if invoice.status == 'PAID' and invoice.paid_at %}
            <div class="alert alert-success mt-3 mb-0">
                <i class="ti ti-check-circle me-2"></i>
                Paid on {{ invoice.paid_at|date:"d M Y H:i" }}
                {% if invoice.payment_method %}
                via {{ invoice.payment_method.get_type_display }}
                ({{ invoice.payment_method.get_gateway_display }})
                {% endif %}
            </div>
            {% elif invoice.status == 'OVERDUE' %}
            <div class="alert alert-danger mt-3 mb-0">
                <i class="ti ti-alert-circle me-2"></i>
                This invoice is overdue. Please make payment to avoid service interruption.
            </div>
            {% elif invoice.status == 'FAILED' %}
            <div class="alert alert-warning mt-3 mb-0">
                <i class="ti ti-x-circle me-2"></i>
                Payment failed. Next retry: {{ invoice.next_retry_at|date:"d M Y H:i" }}
            </div>
            {% endif %}
            
            <!-- Actions -->
            <div class="mt-3 d-flex gap-2">
                <a href="{% url 'tenants:invoice_detail' invoice.id %}" class="btn btn-outline-primary">
                    <i class="ti ti-eye me-2"></i>View Details
                </a>
                
                <a href="{% url 'tenants:invoice_download' invoice.id %}" 
                   class="btn btn-outline-success download-button"
                   target="_blank">
                    <i class="ti ti-download me-2"></i>Download PDF
                </a>
                
                {% if invoice.status != 'PAID' %}
                <button class="btn btn-primary" onclick="payInvoice({{ invoice.id }})">
                    <i class="ti ti-credit-card me-2"></i>Pay Now
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
    
    <!-- Pagination -->
    {% if is_paginated %}
    <nav aria-label="Invoice pagination">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                    <i class="ti ti-chevrons-left"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                    <i class="ti ti-chevron-left"></i>
                </a>
            </li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                        {{ num }}
                    </a>
                </li>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                    <i class="ti ti-chevron-right"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                    <i class="ti ti-chevrons-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
    
{% else %}
    <!-- Empty State -->
    <div class="empty">
        <div class="empty-icon">
            <i class="ti ti-file-invoice" style="font-size: 4rem; color: #6c757d;"></i>
        </div>
        <p class="empty-title">No invoices found</p>
        <p class="empty-subtitle text-muted">
            {% if request.GET.status and request.GET.status != 'all' %}
            No {{ request.GET.status|lower }} invoices at this time.
            <a href="?status=all">View all invoices</a>
            {% else %}
            Your billing history will appear here once you have invoices.
            {% endif %}
        </p>
    </div>
{% endif %}

{% endblock %}

{% block extra_js %}
<script>
    function payInvoice(invoiceId) {
        // Show payment modal or redirect to payment page
        if (confirm('Proceed to payment for this invoice?')) {
            window.location.href = `/organization/billing/invoice/${invoiceId}/pay/`;
        }
    }
</script>
{% endblock %}