{% 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="currency">{% currency_symbol %}</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="currency">{% currency_symbol %}</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="currency">{% currency_symbol %}</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="currency">{% currency_symbol %}</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="currency">{% currency_symbol %}</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="currency">{% currency_symbol %}</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="currency">{% currency_symbol %}</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-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.user.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.user.dealer.entity.slug %}";                
            }else{
                url = `{% url 'entity-json-pnl' request.user.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 %}