<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .popover-wide {
        max-width: 400px;
        min-width: 300px;
        word-break: break-word;
    }
    .account-section {
        margin-bottom: 3rem;
    }
    .account-header {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
    </style>
    <meta charset="UTF-8">
    <title>"What's the Damage" - {{ _('Result') }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/4.0.4/css/fixedHeader.bootstrap5.min.css">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
    <!-- jQuery and DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/4.0.4/js/dataTables.fixedHeader.min.js"></script>

</head>
<body>
    <header>
        {% include 'header.html' %}
    </header>
    <main class="container-fluid">
        <h1 class="text-center p-2 pb-1">{{ _('Processed results') }}</h1>
        
        {% for account in accounts_data.accounts %}
        {% set dt_response = account.dt_response %}
        <div class="account-section">
            <div class="account-header">
                <h2>
                    {{ account.formatted_id }}
                    {% if account.currency %}
                        ({{ account.currency }})
                    {% endif %}
                </h2>
            </div>
            
            <div class="row">
                <div class="col-md-12 mb-3">
                    <div class="table-responsive">
                        <table id="datatable-{{ account.id | replace(':', '-') | replace(' ', '-') }}" class="table table-bordered table-striped" data-datatable="true">
                            <thead>
                                <tr>
                                    <th>{{ _('Categories') }}</th>
                                    {% set months = [] %}
                                    {% for agg_row in dt_response.data %}
                                        {% if (agg_row.month.display, agg_row.month.timestamp) not in months %}
                                            {% set _ = months.append((agg_row.month.display, agg_row.month.timestamp)) %}
                                        {% endif %}
                                    {% endfor %}
                                    {% for month_display, month_ts in months | sort(attribute='1', reverse=True) %}
                                        <th data-order="{{ month_ts }}">{{ month_display }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                {% set cat_month_map = {} %}
                                {% for agg_row in dt_response.data %}
                                    {% if agg_row.category not in cat_month_map %}
                                        {% set _ = cat_month_map.update({agg_row.category: {}}) %}
                                    {% endif %}
                                    {% set _ = cat_month_map[agg_row.category].update({agg_row.month.display: agg_row}) %}
                                {% endfor %}
                                
                                {% for category in cat_month_map.keys() | sort %}
                                <tr>
                                    <td>{{ category }}</td>
                                    {% for month_display, month_ts in months | sort(attribute='1', reverse=True) %}
                                        {% set agg_row_data = cat_month_map[category].get(month_display) %}
                                        {% if agg_row_data %}
                                            {% set details_list = [] %}
                                            {% for detail in agg_row_data.details %}
                                                {% set _ = details_list.append(detail.date.display ~ ': ' ~ detail.amount.display ~ ' - ' ~ detail.merchant) %}
                                            {% endfor %}
                                            {% set details_str = details_list | join('<br>') %}
                                            <td data-order="{{ agg_row_data.total.raw }}"
                                                {% if agg_row_data.details %}
                                                    tabindex="0"
                                                    data-bs-toggle="popover"
                                                    data-bs-trigger="hover focus"
                                                    data-bs-html="true"
                                                    data-bs-content="{{ details_str }}"
                                                    data-bs-placement="top"
                                                    data-bs-custom-class="popover-wide"
                                                {% endif %}
                                            >{{ agg_row_data.total.display }}</td>
                                        {% else %}
                                            <td data-order="0"></td>
                                        {% endif %}
                                    {% endfor %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        
        <div class="row">
            <div class="col-md-6">
                <a href="/" class="btn btn-secondary mt-3 mb-3">{{ _('Back') }}</a>
            </div>
        </div>
    </main>
    <footer class="bg-success text-white text-center py-3 mt-3">
        {% include 'footer.html' %}
    </footer>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var tables = document.querySelectorAll('table[data-datatable="true"]');
        tables.forEach(function(table) {
            $(table).DataTable({
                responsive: false,
                fixedHeader: true,
                order: [],
                pageLength: 25,
                scrollX: true,
                autoWidth: false
            });
        });
        
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl, {
                html: true,
                sanitize: false
            });
        });
    });
    </script>
</body>
</html>
