{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load django_ledger %}
{% block content %}
    <style id="apexcharts-css"></style>
    <div class="pb-6">
        <div class="row align-items-center justify-content-between g-3 mb-6">
            <div class="col-12 col-md-auto">
                <h2 class="mb-0"></h2>
            </div>
        </div>
        <div class="px-3 mb-6">
            <div class="row justify-content-between">
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
                    <i class="fa-solid fa-landmark-dome fs-5 lh-1 text-primary"></i>
                    <h1 class="fs-5 pt-3">
                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_ASSETS | currency_format }}
                    </h1>
                    <p class="fs-9 mb-0">{{ _("Assets") }}</p>
                </div>
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0">
                    <i class="fa-solid fa-weight-hanging fs-5 lh-1 text-primary"></i>
                    <h1 class="fs-5 pt-3">
                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_LIABILITIES | currency_format }}
                    </h1>
                    <p class="fs-9 mb-0">{{ _("Liabilities") }}</p>
                </div>
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0">
                    <i class="fa-solid fa-scale-balanced fs-5 lh-1 text-primary"></i>
                    <h1 class="fs-5 pt-3">
                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}
                    </h1>
                    <p class="fs-9 mb-0">{{ _("Equity") }}</p>
                </div>
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0">
                    <i class="fa-solid fs-5 lh-1 text-success fa-money-bill"></i>
                    <h1 class="fs-5 pt-3">
                        <span class="icon-saudi_riyal"></span>{{ tx_digest.role_balance.ASSET_CA_CASH | currency_format }}
                    </h1>
                    <p class="fs-9 mb-0">{{ _("Cash") }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-auto">
            <h2 class="mb-0"></h2>
        </div>
        <div class="px-3 mb-6">
            <div class="row justify-content-between">
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0">
                    <i class="fa-solid fa-coins fs-5 lh-1 text-primary"></i>
                    <h1 class="fs-5 pt-3">
                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_INCOME | currency_format }}
                    </h1>
                    <p class="fs-9 mb-0">{{ _("Revenue") }}</p>
                </div>
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0">
                    <i class="fa-solid fa-hand-holding-dollar fs-5 lh-1 text-danger"></i>
                    <h1 class="fs-5 pt-3">
                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EXPENSES | reverse_sign | currency_format }}
                    </h1>
                    <p class="fs-9 mb-0">{{ _("Expenses") }}</p>
                </div>
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0">
                    <i class="fa-solid fa-sack-dollar fs-5 lh-1 text-primary"></i>
                    <h1 class="fs-5 pt-3">
                        <span class="icon-saudi_riyal"></span>{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}
                    </h1>
                    <p class="fs-9 mb-0">{{ _("Earnings (Loss)") }}</p>
                </div>
                <div class="col-6 col-md-4 col-xxl-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0">
                </div>
            </div>
        </div>
        <div class="mx-n4 px-4 mx-lg-n6 px-lg-6 bg-body-emphasis pt-6 pb-3 border-y">
            <div class="row gx-6">
                <div class="col-12 col-md-6 col-lg-12 col-xl-6 mb-5 mb-md-3 mb-lg-5 mb-xl-2 mb-xxl-3">
                    <div class="scrollbar">
                        <h3>{{ _("Net Receivables") }}</h3>
                        <p class="text-body-tertiary">{{ _("According to the sales data") }}.</p>
                        <div id="net_receivable_chart"
                             class="echart-doughnut-rounded-chart-example"
                             style="min-height:320px"></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-12 col-xl-6 mb-1 mb-sm-0">
                    <div class="row g-3 align-items-center">
                        <div class="col-sm-4 col-md-12 col-lg-8 col-xl-12 col-xxl-12 d-flex justify-content-end-xxl mt-0">
                            <div class="d-flex flex-1 justify-content-center d-sm-block d-md-flex d-lg-block d-xl-flex d-xxl-block gap-3">
                                <div class="mb-4 me-6 me-sm-0 me-md-6 me-lg-0 me-xl-6 me-xxl-0">
                                    <h3 class="">{{ _("Financial Analysis") }}</h3>
                                    <h4>{{ _("Solvency") }}:</h4>
                                    <h5 class="progress-bar">{{ _("Current Ratio") }}: {{ tx_digest.ratios.current_ratio | currency_format }}</h5>
                                    <div class="progress" style="height:12px">
                                        <progress class="progress-bar {{ tx_digest.ratios.current_ratio | fin_ratio_threshold_class:'current_ratio' }}"
                                                  value="{{ tx_digest.ratios.current_ratio }}"
                                                  max="{% fin_ratio_max_value ratio='current_ratio' %}">
                                        {{ tx_digest.ratios.current_ratio }}</progress>
                                    </div>
                                    <h5 class="progress-bar">{{ _("Quick Ratio") }}: {{ tx_digest.ratios.quick_ratio | currency_format }}</h5>
                                    <div class="progress" style="height:12px">
                                        <progress class="progress-bar {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
                                                  value="{{ tx_digest.ratios.quick_ratio }}"
                                                  max="{% fin_ratio_max_value ratio='quick_ratio' %}">
                                        {{ tx_digest.ratios.current_ratio }}</progress>
                                    </div>
                                    <h4>{{ _("Leverage") }}:</h4>
                                    <h5 class="progress-bar">{{ _("Debt to Equity") }}: {{ tx_digest.ratios.debt_to_equity | currency_format }}</h5>
                                    <div class="progress" style="height:12px">
                                        <progress class="progress-bar {{ tx_digest.ratios.debt_to_equity | fin_ratio_threshold_class:'debt_to_equity' }}"
                                                  value="{{ tx_digest.ratios.debt_to_equity }}"
                                                  max="{% fin_ratio_max_value ratio='debt_to_equity' %}">
                                        {{ tx_digest.ratios.debt_to_equity }}</progress>
                                    </div>
                                    <h4>{{ _("Profitability") }}:</h4>
                                    <h5 class="progress-bar">{{ _("Return on Equity") }}: {{ tx_digest.ratios.return_on_equity | percentage }}</h5>
                                    <div class="progress" style="height:12px">
                                        <progress class="progress-bar bg-info {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
                                                  value="{{ tx_digest.ratios.return_on_equity }}"
                                                  max="{% fin_ratio_max_value ratio='return_on_equity' %}">
                                        {{ tx_digest.ratios.return_on_equity }}</progress>
                                    </div>
                                    <h5 class="progress-bar">{{ _("Return on Assets") }}: {{ tx_digest.ratios.return_on_assets | percentage }}</h5>
                                    <div class="progress" style="height:12px">
                                        <progress class="progress-bar {{ tx_digest.ratios.return_on_assets | fin_ratio_threshold_class:'return_on_assets' }}"
                                                  value="{{ tx_digest.ratios.return_on_assets }}"
                                                  max="{% fin_ratio_max_value ratio='return_on_assets' %}">{{ tx_digest.ratios.return_on_assets }}</progress>
                                    </div>
                                    <h5 class="progress-bar">{{ _("Net Profit Margin") }}: {{ tx_digest.ratios.net_profit_margin | percentage }}</h5>
                                    <div class="progress" style="height:12px">
                                        <progress class="progress-bar {{ tx_digest.ratios.net_profit_margin | fin_ratio_threshold_class:'net_profit_margin' }}"
                                                  value="{{ tx_digest.ratios.net_profit_margin }}"
                                                  max="{% fin_ratio_max_value ratio='net_profit_margin' %}">{{ tx_digest.ratios.net_profit_margin }}</progress>
                                    </div>
                                    <h5 class="progress-bar">{{ _("Gross Profit Margin") }}: {{ tx_digest.ratios.gross_profit_margin | percentage }}</h5>
                                    <div class="progress" style="height:12px">
                                        <progress class="progress-bar {{ tx_digest.ratios.gross_profit_margin | fin_ratio_threshold_class:'gross_profit_margin' }}"
                                                  value="{{ tx_digest.ratios.gross_profit_margin }}"
                                                  max="{% fin_ratio_max_value ratio='gross_profit_margin' %}">{{ tx_digest.ratios.gross_profit_margin }}</progress>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row pt-6 gy-7 gx-6">
            <div class="col-12 col-md-12">
                <div class="row justify-content-between mb-4">
                    <div class="col-12">
                        <h3 id="dataContainer"></h3>
                        <div class="col-6 col-md-3">
                            <div class="">
                                <label class="form-label" for="datepicker">{{ _("Start Date") }}</label>
                                <input id="startDate"
                                       class="form-control datetimepicker flatpickr-input"
                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
                                       type="date"
                                       placeholder="dd/mm/yyyy"
                                       data-options="{'disableMobile':true,'dateFormat';:'Y-m-d'}"
                                       readonly="readonly">
                            </div>
                            <div>
                                <label class="form-label" for="datepicker">{{ _("End Date") }}</label>
                                <input id="endDate"
                                       class="form-control datetimepicker flatpickr-input"
                                       pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
                                       type="date"
                                       placeholder="dd/mm/yyyy"
                                       data-options="{'disableMobile':true,'dateFormat':'Y-m-d'}"
                                       readonly="readonly">
                            </div>
                            <button id="apply_filter" class="btn btn-phoenix-primary mt-3" type="submit">{{ _("Apply") }}</button>
                        </div>
                        <div id="net_receivable_chart1"
                             class="echart-doughnut-rounded-chart-example col-12"
                             style="min-height:450px"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6"></div>
        </div>
    </div>
{% endblock %}
{% block customJS %}
    <script type="text/javascript">
        let myChart;
        let myChart1;

        function use_chart(type, chart_id, title, labels, values, update = false) {
            if (chart_id === 'net_receivable_chart') {
                if (!myChart) {
                    myChart = echarts.init(document.getElementById(chart_id));
                }
                const { getColor, getData } = window.phoenix.utils;
                var option = {
                    title: {
                        text: title
                    },
                    tooltip: {},
                    legend: {
                        data: ['Net Receivables']
                    },
                    xAxis: {
                        data: labels
                    },
                    yAxis: {},
                    series: [
                        {
                            type: type,
                            radius: ['40%', '70%'],
                            center: window.innerWidth < 530 ? ['65%', '55%'] : ['50%', '55%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: getColor('body-highlight-bg'),
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: values
                        }
                    ]
                };
                if (update) {
                    myChart.setOption(option);
                } else {
                    myChart.clear();
                    myChart.setOption(option);
                }
            } else if (chart_id === 'net_receivable_chart1') {
                if (!myChart1) {
                    myChart1 = echarts.init(document.getElementById(chart_id));
                }
                const { getColor, getData } = window.phoenix.utils;
                var option = {
                    title: {
                        text: title
                    },
                    tooltip: {},
                    legend: {
                        data: ['Net Receivables']
                    },
                    xAxis: {
                        data: labels
                    },
                    yAxis: {},
                    series: [
                        {
                            type: type,
                            data: values
                        }
                    ]
                };
                if (update) {
                    myChart1.setOption(option);
                } else {
                    myChart.clear();
                    myChart1.setOption(option);
                }
            }
        }

        let data = []
        const apply_filter = document.getElementById('apply_filter');

        async function get_data(){
            console.log('{{ request.user }}');
            const response = await fetch("{% url 'entity-json-net-receivables' request.dealer.entity.slug %}");
            data = await response.json();
            console.log(data);
            const keys = Object.keys(data.results.net_receivable_data);
            const labels = keys;
            const values = keys.map(key => data.results.net_receivable_data[key]);
            use_chart('pie','net_receivable_chart','Net Receivables',labels,values)
        }

        async function fetchData() {
            const start_date = document.getElementById('startDate').value;
            const end_date = document.getElementById('endDate').value;
            let url = ''
            if(!start_date || !end_date){
                url = "{% url 'entity-json-pnl' request.dealer.entity.slug %}";
            }else{
                url = `{% url 'entity-json-pnl' request.dealer.entity.slug %}?fromDate=${start_date}&toDate=${end_date}`;
            }
            try {
                const response = await fetch(url);

                const data = await response.json();
                const months = Object.keys(data.results.pnl_data);
                const labels = Object.keys(data.results.pnl_data[months[0]]);
                const values = labels.map(label => data.results.pnl_data[months[0]][label]);

                use_chart('bar','net_receivable_chart1','Net Receivables',labels,values,true);
            } catch (error) {
                console.error("Error fetching data:", error);
                dataContainer.innerHTML = "<p>Error fetching data.</p>";

            }
        }
        apply_filter.addEventListener('click', () => {
            fetchData();
        });

        get_data()
        fetchData()



        var options = {
            chart: {
                type: 'line'
            },
            series: [{
                name: 'sales',
                data: [30,40,35,50,49,60,70,91,125]
            }],
            xaxis: {
                categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
            }
        }

        var chart = new ApexCharts(document.querySelector("#chart"), options);

        chart.render();
    </script>
{% endblock %}