{% extends 'admin_pages/base_admin.html' %}
{% block content %}
  
<div class="card shadow p-4 mb-4 bg-white rounded">
    
    <h2 class="mb-4 fw-bold text-primary">Consumer Account Summary</h2>

    <form method="get" class="row g-3 align-items-end mb-4">
        <div class="col-md-4">
            <label for="consumer" class="form-label">Select Consumer</label>
            <select name="consumer" id="consumer" class="form-select">
                <option value="">All Consumers</option>
                {% for consumer in consumers %}
                    <option value="{{ consumer.id }}" {% if consumer.id == selected_consumer_id %}selected{% endif %}>
                        {{ consumer }}
                    </option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-3">
            <label for="start_date" class="form-label">Start Date</label>
            <input type="date" id="start_date" name="start_date" value="{{ start_date }}" class="form-control">
        </div>
        <div class="col-md-3">
            <label for="end_date" class="form-label">End Date</label>
            <input type="date" id="end_date" name="end_date" value="{{ end_date }}" class="form-control">
        </div>
        <div class="col-md-2 d-grid">
            <button type="submit" class="btn btn-primary">Filter</button>
        </div>
    </form>

    <!-- Print Button for Summary -->
    <div class="d-flex justify-content-end mb-2">
        <button onclick="printSection('summary-print')" class="btn btn-outline-secondary btn-sm">
            🖨️ Print Summary
        </button>
    </div>

    <!-- Summary Table -->
    <div id="summary-print" class="table-responsive">
            <!-- Company Info Row -->
            {% include 'includes/print_header.html' %}
        <table class="table table-bordered table-striped align-middle">
            <thead class="table-dark">
                <tr>
                    <th>Consumer</th>
                    <th>Total Credit</th>
                    <th>Total Debit</th>
                    <th>Balance</th>
                </tr>
            </thead>
            <tbody>
                {% for row in summary %}
                <tr {% if row.consumer__id == selected_consumer_id %}class="table-info fw-semibold"{% endif %}>
                    <td>{{ row.consumer__name }}</td>
                    <td>{{ row.total_credit|floatformat:2 }}</td>
                    <td>{{ row.total_debit|floatformat:2 }}</td>
                    <td>{{ row.balance|floatformat:2 }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="text-center">No summary data available.</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot class="table-secondary fw-bold">
                <tr>
                    <td>Grand Total</td>
                    <td>{{ grand_total.total_credit|floatformat:2 }}</td>
                    <td>{{ grand_total.total_debit|floatformat:2 }}</td>
                    <td>{{ grand_total.balance|floatformat:2 }}</td>
                </tr>
            </tfoot>
        </table>
    </div>

    {% if selected_consumer %}
        <h4 class="mt-5 mb-3 fw-bold text-dark">
            Details for {{ selected_consumer }}
            {% if start_date and end_date %}
                from {{ start_date }} to {{ end_date }}
            {% elif start_date %}
                from {{ start_date }} onward
            {% elif end_date %}
                until {{ end_date }}
            {% endif %}
        </h4>

        <!-- Print Button for Details -->
        <div class="d-flex justify-content-end mb-2">
            <button onclick="printSection('details-print')" class="btn btn-outline-secondary btn-sm">
                🖨️ Print Details
            </button>
        </div>

        <!-- Details Table -->
        <div id="details-print" class="table-responsive">
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Tx Number</th>
                        <th>Details</th>
                        <th>Credit</th>
                        <th>Debit</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in consumer_details %}
                    <tr>
                        <td>{{ tx.tx_date }}</td>
                        <td>{{ tx.tx_number }}</td>
                        <td>{{ tx.details }}</td>
                        <td>{{ tx.credit|floatformat:2 }}</td>
                        <td>{{ tx.debit|floatformat:2 }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">No transactions found for this consumer.</td>
                    </tr>
                    {% endfor %}
                </tbody>
                {% if consumer_totals %}
                <tfoot class="table-secondary fw-bold">
                    <tr>
                        <td colspan="3" class="text-end">Total</td>
                        <td>{{ consumer_totals.total_credit|floatformat:2 }}</td>
                        <td>{{ consumer_totals.total_debit|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="text-end">Balance</td>
                        <td colspan="2">{{ consumer_totals.balance|floatformat:2 }}</td>
                    </tr>
                </tfoot>
                {% endif %}
            </table>
        </div>
    {% endif %}
</div>

<!-- Print Section Script -->
<script>
function printSection(sectionId) {
    const printContent = document.getElementById(sectionId).innerHTML;
    const originalContent = document.body.innerHTML;

    document.body.innerHTML = `
        <html>
            <head>
                <title>Print</title>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
                <style>body { padding: 20px; }</style>
            </head>
            <body>
                ${printContent}
            </body>
        </html>
    `;
    window.print();
    document.body.innerHTML = originalContent;
    window.location.reload(); // Restore functionality
}
</script>
{% endblock %}