{% extends 'content.html.twig' %}

{% block pageContent %}
    
    <div class="content-wrapper" style="min-height: 847px;">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                 
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-4 col-6">

                         <div class="small-box bg-info graph-toggler active-chart" data-type=''>
                            <div class="inner">
                                <h3  id="dailySales">0</h3>
                                <p>Daily Sales</p>
                            </div>
                           <div class="icon">
                              <i class="ion ion-bag"></i>
                          </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6">

                         <div class="small-box bg-info graph-toggler" data-type='w'>
                            <div class="inner">
                                <h3  id="weeklySales">0</h3>
                                <p>Weekly Sales</p>
                            </div>
                           <div class="icon">
                              <i class="ion ion-bag"></i>
                          </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6">

                         <div class="small-box bg-info graph-toggler" data-type='m'>
                            <div class="inner">
                                <h3  id="monthlySales">0</h3>
                                <p>Monthly Sales</p>
                            </div>
                           <div class="icon">
                              <i class="ion ion-bag"></i>
                          </div>
                        </div>
                    </div>
                </div>
                <div class='row'>
                     <div class="col-lg-12 col-12">
                        <div class="card">
                            <div class="card-header " style="cursor: move;">
                                <h3 class="card-title" style="color:#000;!important">
                                    <i class="fas fa-chart-pie mr-1"></i>
                                        Sales Chart
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="tab-content p-0">
                                    <canvas id="revenue-chart-canvas" height="300" style="height: 300px; display: block; width: 616px;" width="616" class="chartjs-render-monitor"></canvas>
                                </div>
                            </div>
                        </div>
                     </div>
                </div>
            </div>
        </section>
    </div>

    {% include 'js.html.twig' %}

    <script language="javascript">
        //<![CDATA[
        $(document).ready(function(){
            lodge_dashboard.settings.ajaxSalesInfoUrl = "{{ path('lodge_ajax_sales_info')}}";
            lodge_dashboard.settings.ajaxSalesAnalyticsUrl = "{{ path('lodge_ajax_sales_analytics')}}";
            lodge_dashboard.init();
        });
        //]]>
    </script>
{% endblock %}