{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load django_ledger %}
{% block content %}
    <div id="chart"
         class="echart-basic-bar-chart-example"
         style="min-height:300px"></div>
    <section class="py-5">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 d-none d-lg-block">
                    <!-- Sidebar (if needed) -->
                </div>
                <div class="col-lg-9">
                    <div class="row row-cols-1 row-cols-md-2 g-4">
                        <div class="col">{% include 'django_ledger/includes/widget_bs.html' with tx_digest=tx_digest %}</div>
                        <div class="col">{% include 'django_ledger/includes/widget_ic.html' with tx_digest=equity_digest %}</div>
                        <div class="col-md-8">
                            <div class="card shadow-sm">
                                <div class="card-body">{% chart_container pnl_chart_id pnl_chart_endpoint %}</div>
                            </div>
                        </div>
                        <div class="col-md-4">{% include 'django_ledger/includes/widget_ratios.html' with tx_digest=tx_digest %}</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {# RECEIVABLES SECTION START #}
    <section class="bg-light py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h1 class="display-5 fw-bold">{% trans 'Receivables' %}</h1>
                <p class="lead">
                    <i class="bi bi-building me-2"></i>{{ entity.name }}
                </p>
            </div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% if invoices %}
                    <div class="col">
                        <div class="card shadow-sm">
                            <div class="card-body">{% chart_container receivables_chart_id receivables_chart_endpoint %}</div>
                        </div>
                    </div>
                {% endif %}
                {% for invoice in invoices %}
                    <div class="col">
                        {% include 'django_ledger/invoice/includes/card_invoice.html' with invoice=invoice entity_slug=entity.slug style='dashboard' %}
                    </div>
                {% endfor %}
                <div class="col">
                    {% include 'django_ledger/invoice/includes/card_invoice.html' with create_invoice=True entity_slug=entity.slug %}
                </div>
            </div>
        </div>
    </section>
    {# RECEIVABLES SECTION END #}
    {# PAYABLES SECTION START #}
    <section class="bg-light py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h1 class="display-5 fw-bold">{% trans 'Payables' %}</h1>
                <p class="lead">
                    <i class="bi bi-building me-2"></i>{{ entity.name }}
                </p>
            </div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% if bills %}
                    <div class="col">
                        <div class="card shadow-sm">
                            <div class="card-body">{% chart_container payables_chart_id payables_chart_endpoint %}</div>
                        </div>
                    </div>
                {% endif %}
                {% for bill in bills %}
                    <div class="col">
                        {% include 'django_ledger/bills/includes/card_bill.html' with dealer_slug=request.dealer.slug bill=bill entity_slug=entity.slug style='dashboard' %}
                    </div>
                {% endfor %}
                <div class="col">
                    {% include 'django_ledger/bills/includes/card_bill.html' with dealer_slug=request.dealer.slug create_bill=True entity_slug=entity.slug style='dashboard' %}
                </div>
            </div>
        </div>
    </section>
    {# PAYABLES SECTION END #}
    {{ payables_chart_endpoint }}
{% endblock %}
{% block customJS %}
    <script type="text/javascript">
        // Initialize the echarts instance based on the prepared dom
        let data = []
        async function get_data(){
            const response = await fetch("{{ rec }}");
            data = await response.json();
            console.log(data);
        }
        // Specify the configuration items and data for the chart
        var myChart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: 'ECharts Getting Started Example'
            },
            tooltip: {},
            legend: {
                data: ['sales']
            },
            xAxis: {
                data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
            },
            yAxis: {},
            series: [
                {
                    name: 'sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // Display the chart using the configuration items and data just specified.
        myChart.setOption(option);
    </script>
{% endblock %}