{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load django_ledger %}

{% block content %}
<main class="main" id="top">        
      <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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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">{% currency_symbol %}{{ 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></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="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;Y-m-d&quot;}" 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="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;Y-m-d&quot;}" 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>
      <footer class="footer position-absolute">
        <div class="row g-0 justify-content-between align-items-center h-100">
          <div class="col-12 col-sm-auto text-center">
            <p class="mb-0 mt-2 mt-sm-0 text-body">Thank you for creating with Phoenix<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span><br class="d-sm-none" />2024 &copy;<a class="mx-1" href="https://themewagon.com">Themewagon</a></p>
          </div>
          <div class="col-12 col-sm-auto text-center">
            <p class="mb-0 text-body-tertiary text-opacity-85">v1.20.1</p>
          </div>
        </div>
      </footer>
    </div>
    <div class="modal fade" id="searchBoxModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="true" data-phoenix-modal="data-phoenix-modal" style="--phoenix-backdrop-opacity: 1;">
      <div class="modal-dialog">
        <div class="modal-content mt-15 rounded-pill">
          <div class="modal-body p-0">
            <div class="search-box navbar-top-search-box" style="width: auto;">
              <form class="position-relative" data-bs-toggle="search" data-bs-display="static">
                <input class="form-control search-input fuzzy-search rounded-pill form-control-lg" type="search" placeholder="Search..." aria-label="Search" />
                <span class="fas fa-search search-box-icon"></span>

              </form>
              <div class="btn-close position-absolute end-0 top-50 translate-middle cursor-pointer shadow-none" data-bs-dismiss="search">
                <button class="btn btn-link p-0" aria-label="Close"></button>
              </div>
              <div class="dropdown-menu border start-0 py-0 overflow-hidden w-100">
                <div class="scrollbar-overlay" style="max-height: 30rem;">
                  <div class="list pb-3">
                    <h6 class="dropdown-header text-body-highlight fs-10 py-2">24 <span class="text-body-quaternary">results</span></h6>
                    <hr class="my-0" />
                    <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Recently Searched </h6>
                    <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"><span class="fa-solid fa-clock-rotate-left" data-fa-transform="shrink-2"></span> Store Macbook</div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-clock-rotate-left" data-fa-transform="shrink-2"></span> MacBook Air - 13″</div>
                        </div>
                      </a>
                    </div>
                    <hr class="my-0" />
                    <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Products</h6>
                    <div class="py-2"><a class="dropdown-item py-2 d-flex align-items-center" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="file-thumbnail me-2"><img class="h-100 w-100 object-fit-cover rounded-3" src="../../assets/img/products/60x60/3.png" alt="" /></div>
                        <div class="flex-1">
                          <h6 class="mb-0 text-body-highlight title">MacBook Air - 13″</h6>
                          <p class="fs-10 mb-0 d-flex text-body-tertiary"><span class="fw-medium text-body-tertiary text-opactity-85">8GB Memory - 1.6GHz - 128GB Storage</span></p>
                        </div>
                      </a>
                      <a class="dropdown-item py-2 d-flex align-items-center" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="file-thumbnail me-2"><img class="img-fluid" src="../../assets/img/products/60x60/3.png" alt="" /></div>
                        <div class="flex-1">
                          <h6 class="mb-0 text-body-highlight title">MacBook Pro - 13″</h6>
                          <p class="fs-10 mb-0 d-flex text-body-tertiary"><span class="fw-medium text-body-tertiary text-opactity-85">30 Sep at 12:30 PM</span></p>
                        </div>
                      </a>

                    </div>
                    <hr class="my-0" />
                    <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Quick Links</h6>
                    <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"><span class="fa-solid fa-link text-body" data-fa-transform="shrink-2"></span> Support MacBook House</div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-link text-body" data-fa-transform="shrink-2"></span> Store MacBook″</div>
                        </div>
                      </a>
                    </div>
                    <hr class="my-0" />
                    <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Files</h6>
                    <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"><span class="fa-solid fa-file-zipper text-body" data-fa-transform="shrink-2"></span> Library MacBook folder.rar</div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-file-lines text-body" data-fa-transform="shrink-2"></span> Feature MacBook extensions.txt</div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"> <span class="fa-solid fa-image text-body" data-fa-transform="shrink-2"></span> MacBook Pro_13.jpg</div>
                        </div>
                      </a>

                    </div>
                    <hr class="my-0" />
                    <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Members</h6>
                    <div class="py-2"><a class="dropdown-item py-2 d-flex align-items-center" href="../../pages/members.html">
                        <div class="avatar avatar-l status-online  me-2 text-body">
                          <img class="rounded-circle " src="../../assets/img/team/40x40/10.webp" alt="" />

                        </div>
                        <div class="flex-1">
                          <h6 class="mb-0 text-body-highlight title">Carry Anna</h6>
                          <p class="fs-10 mb-0 d-flex text-body-tertiary">anna@technext.it</p>
                        </div>
                      </a>
                      <a class="dropdown-item py-2 d-flex align-items-center" href="../../pages/members.html">
                        <div class="avatar avatar-l  me-2 text-body">
                          <img class="rounded-circle " src="../../assets/img/team/40x40/12.webp" alt="" />

                        </div>
                        <div class="flex-1">
                          <h6 class="mb-0 text-body-highlight title">John Smith</h6>
                          <p class="fs-10 mb-0 d-flex text-body-tertiary">smith@technext.it</p>
                        </div>
                      </a>

                    </div>
                    <hr class="my-0" />
                    <h6 class="dropdown-header text-body-highlight fs-9 border-bottom border-translucent py-2 lh-sm">Related Searches</h6>
                    <div class="py-2"><a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"><span class="fa-brands fa-firefox-browser text-body" data-fa-transform="shrink-2"></span> Search in the Web MacBook</div>
                        </div>
                      </a>
                      <a class="dropdown-item" href="../../apps/e-commerce/landing/product-details.html">
                        <div class="d-flex align-items-center">

                          <div class="fw-normal text-body-highlight title"> <span class="fa-brands fa-chrome text-body" data-fa-transform="shrink-2"></span> Store MacBook″</div>
                        </div>
                      </a>

                    </div>
                  </div>
                  <div class="text-center">
                    <p class="fallback fw-bold fs-7 d-none">No Result Found.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var navbarTopStyle = window.config.config.phoenixNavbarTopStyle;
      var navbarTop = document.querySelector('.navbar-top');
      if (navbarTopStyle === 'darker') {
        navbarTop.setAttribute('data-navbar-appearance', 'darker');
      }

      var navbarVerticalStyle = window.config.config.phoenixNavbarVerticalStyle;
      var navbarVertical = document.querySelector('.navbar-vertical');
      if (navbarVertical && navbarVerticalStyle === 'darker') {
        navbarVertical.setAttribute('data-navbar-appearance', 'darker');
      }
    </script>
    <div class="support-chat-container">
      <div class="container-fluid support-chat">
        <div class="card bg-body-emphasis">
          <div class="card-header d-flex flex-between-center px-4 py-3 border-bottom border-translucent">
            <h5 class="mb-0 d-flex align-items-center gap-2">Demo widget<span class="fa-solid fa-circle text-success fs-11"></span></h5>
            <div class="btn-reveal-trigger">
              <button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" id="support-chat-dropdown" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-body"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
            </div>
          </div>
          <div class="card-body chat p-0">
            <div class="d-flex flex-column-reverse scrollbar h-100 p-3">
              <div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
                  <p class="mb-0 fw-semibold fs-9">I need help with something</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
                </a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
                  <p class="mb-0 fw-semibold fs-9">I can’t reorder a product I previously ordered</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
                </a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
                  <p class="mb-0 fw-semibold fs-9">How do I place an order?</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
                </a><a class="false d-inline-flex align-items-center text-decoration-none text-body-emphasis bg-body-hover rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
                  <p class="mb-0 fw-semibold fs-9">My payment method not working</p><span class="fa-solid fa-paper-plane text-primary fs-9 ms-3"></span>
                </a>
              </div>
              <div class="text-center mt-auto">
                <div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-light-subtle" src="../../assets/img/team/30.webp" alt="" /></div>
                <h5 class="mt-2 mb-3">Eric</h5>
                <p class="text-center text-body-emphasis mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
              </div>
            </div>
          </div>
          <div class="card-footer d-flex align-items-center gap-2 border-top border-translucent ps-3 pe-4 py-3">
            <div class="d-flex align-items-center flex-1 gap-3 border border-translucent rounded-pill px-4">
              <input class="form-control outline-none border-0 flex-1 fs-9 px-0" type="text" placeholder="Write message" />
              <label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
              <input class="d-none" type="file" accept="image/*" id="supportChatPhotos" />
              <label class="btn btn-link d-flex p-0 text-body-quaternary fs-9 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
              <input class="d-none" type="file" id="supportChatAttachment" />
            </div>
            <button class="btn p-0 border-0 send-btn"><span class="fa-solid fa-paper-plane fs-9"></span></button>
          </div>
        </div>
      </div>
      <button class="btn btn-support-chat p-0 border border-translucent"><span class="fs-8 btn-text text-primary text-nowrap">Chat demo</span><span class="ping-icon-wrapper mt-n4 ms-n6 mt-sm-0 ms-sm-2 position-absolute position-sm-relative"><span class="ping-icon-bg"></span><span class="fa-solid fa-circle ping-icon"></span></span><span class="fa-solid fa-headset text-primary fs-8 d-sm-none"></span><span class="fa-solid fa-chevron-down text-primary fs-7"></span></button>
  </main>
{% endblock %}

{% block customJS %}        
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js" integrity="sha512-XSmbX3mhrD2ix5fXPTRQb2FwK22sRMVQTpBP2ac8hX7Dh/605hA2QDegVWiAvZPiXIxOV0CbkmUjGionDpbCmw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <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(){
            const response = await fetch("{% url 'entity-json-net-receivables' request.user.dealer.entity.slug %}");
            data = await response.json();                                    
            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 %}