{% extends 'common/base.html' %}
{% block title %} ERP - Dashboard {% endblock %}
{% block content %} 
        
        <!-- Container Fluid-->
        <div class="container-fluid" id="container-wrapper">
          <div class="d-sm-flex align-items-center justify-content-between mb-3">
            <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="./">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
            </ol>
          </div>

          <div class="row mb-3">
            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-3 col-md-6 col-6 mb-2">
              <div class="card h-100">
                <div class="card-body">
                  <div class="row align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-uppercase mb-1">Total Orders</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">Tk. {{total_amount}}</div>
                      <div class="mt-2 mb-0 text-muted text-xs"> 
                        <span>Since Today</span>
                      </div>
                    </div>
                    <div class="col-auto d-none d-sm-block">
                      <i class="fas fa-shopping-cart fa-2x text-primary"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Earnings (Annual) Card Example -->
            <div class="col-xl-3 col-md-6 col-6 mb-2">
              <div class="card h-100">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-uppercase mb-1">Due Amount</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">Tk. {{total_due}}</div>
                      <div class="mt-2 mb-0 text-muted text-xs"> 
                        <span>Since Last Day</span>
                      </div>
                    </div>
                    <div class="col-auto d-none d-sm-block">
                      <i class="fas fa-shopping-cart fa-2x text-primary"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- New User Card Example -->
            <div class="col-xl-3 col-md-6 col-6 mb-2">
              <div class="card h-100">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-uppercase mb-1">Total Shipping Cost</div>
                      <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{total_shipping_cost}}</div>
                      <div class="mt-2 mb-0 text-muted text-xs"> 
                        <span>Since Today</span>
                      </div>
                    </div>
                    <div class="col-auto d-none d-sm-block">
                      <i class="fas fa-shopping-cart fa-2x text-primary"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Pending Requests Card Example -->
            <div class="col-xl-3 col-md-6 col-6 mb-2">
              <div class="card h-100">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-uppercase mb-1">Pending Orders</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">{{pending_orders}}</div>
                      <div class="mt-2 mb-0 text-muted text-xs"> 
                        <span>Since Today</span>
                      </div>
                    </div>
                    <div class="col-auto d-none d-sm-block">
                      <i class="fas fa-shopping-cart fa-2x text-primary"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          
          <div class="row">
            <!-- Bar Chart -->
            <div class="col-lg-8">
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-dark">Last 10 Days Orders</h6>
                </div>
                <div class="card-body">
                  <div class="chart-bar">
                    <canvas id="myBarChart"></canvas>
                  </div> 
                </div>
              </div>
            </div>
            <!-- Donut Chart -->
            <div class="col-lg-4">
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-dark">Order Status</h6>
                </div>
                <div class="card-body">
                  <div class="chart-pie pt-4">
                    <canvas id="myPieChart"></canvas>
                  </div> 
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <!-- Top sale products  -->
            <div class="col-lg-12">
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-dark">Top Sales Products</h6>
                </div>
              </div>
            </div>

      

              {% for product in top_products %}
              <div class="col-6 col-sm-4 col-md-2 col-lg-2 mb-4">
                  <div class="card shadow h-100 text-center p-2">

                      <!-- Product Image -->
                      <img src="{{ product.product_image.url }}" 
                          class="card-img-top"
                          style="height:100px; object-fit:contain">

                      <div class="card-body p-2">
                          <!-- Product Name -->
                          <h6 class="text-dark" style="font-size:14px; font-weight:bold;">
                              {{ product.name_english }}
                          </h6>

                          <!-- Price -->
                          <p class="mb-1 text-primary" style="font-size:13px;">
                              Price: {{ product.unit_price }}৳
                          </p>

                          <!-- Total Sales -->
                          <p class="text-success mb-0" style="font-size:13px;">
                              Total Sales: {{ product.total_sales }}
                          </p>
                      </div>

                  </div>
              </div> 
              {% endfor %}

       



          </div>

          <div class="row">
            <div class="col-sm-12">
              <!-- Customers Table -->
              <div class="card shadow mb-4">
                  <div class="card-body">
                      <div class="table-responsive">
                          <table class="table table-bordered table-hover">
                              <thead class="table-dark">
                                  <tr>
                                      <th>#</th>
                                      <th>Customer Name</th> 
                                      <th>Mobile</th>
                                      <th style="width: 300px;">Address</th>
                                      <th>Status</th>
                                      <th style="width: 140px;">Registered</th>
                                      <th>Action</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  {% for customer in customers %}
                                  <tr>
                                      <td>{{ forloop.counter }}</td>
                                      <td>
                                          {{ customer.customer_name }} <br> 
                                         <small>{{ customer.email|default:"-" }}</small>
                                      </td> 
                                      <td>{{ customer.mobile }}</td>
                                      <td>{{ customer.address|truncatewords:8 }}</td>
                                      <td>
                                          {% if customer.status %}
                                          <span class="badge bg-success text-white">Active</span>
                                          {% else %}
                                          <span class="badge bg-danger">Inactive</span>
                                          {% endif %}
                                      </td>
                                      <td>{{ customer.created|date:"Y-m-d" }}</td>
                                      <td>
                                          <a href="#" class="btn btn-info btn-sm">View</a> 
                                      </td>
                                  </tr>
                                  {% empty %}
                                  <tr>
                                      <td colspan="10" class="text-center">No customers found.</td>
                                  </tr>
                                  {% endfor %}
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
            </div>
          </div>
 
 

          <!-- Modal Logout -->
          <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabelLogout">Ohh No!</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>Are you sure you want to logout?</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
                  <a href="login.html" class="btn btn-primary">Logout</a>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!---Container Fluid-->


        <script src="/static/vendor/jquery/jquery.min.js"></script>
        
        <script src="/static/vendor/chart.js/Chart.min.js"></script>

        <script>

          const barLabels = JSON.parse('{{ bar_labels|safe }}');
          const barData = JSON.parse('{{ bar_data|safe }}');


          // Set new default font family and font color to mimic Bootstrap's default styling
            Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            Chart.defaults.global.defaultFontColor = '#858796';

            function number_format(number, decimals, dec_point, thousands_sep) {
              // *     example: number_format(1234.56, 2, ',', ' ');
              // *     return: '1 234,56'
              number = (number + '').replace(',', '').replace(' ', '');
              var n = !isFinite(+number) ? 0 : +number,
                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function(n, prec) {
                  var k = Math.pow(10, prec);
                  return '' + Math.round(n * k) / k;
                };
              // Fix for IE parseFloat(0.55).toFixed(0) = 0;
              s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
              if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
              }
              if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
              }
              return s.join(dec);
            }

            // Bar Chart Example
            var ctx = document.getElementById("myBarChart");
            var myBarChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: barLabels,
                datasets: [{
                  label: "Revenue",
                  backgroundColor: "#0f8245ff",
                  hoverBackgroundColor: "#374d8eff",
                  borderColor: "#0f8245ff",
                  data: barData,
                }],
              },
              options: {
                maintainAspectRatio: false,
                layout: {
                  padding: {
                    left: 10,
                    right: 25,
                    top: 25,
                    bottom: 0
                  }
                },
                scales: {
                  xAxes: [{
                    time: {
                      unit: 'month'
                    },
                    gridLines: {
                      display: false,
                      drawBorder: false
                    },
                    ticks: {
                      maxTicksLimit: 12
                    },
                    maxBarThickness: 30,
                  }],
                  yAxes: [{
                    ticks: {
                      min: 0,
                      max: 15000,
                      maxTicksLimit: 5,
                      padding: 10,
                      // Include a dollar sign in the ticks
                      callback: function(value, index, values) {
                        return 'Tk ' + number_format(value);
                      }
                    },
                    gridLines: {
                      color: "rgb(234, 236, 244)",
                      zeroLineColor: "rgb(234, 236, 244)",
                      drawBorder: false,
                      borderDash: [2],
                      zeroLineBorderDash: [2]
                    }
                  }],
                },
                legend: {
                  display: false
                },
                tooltips: {
                  titleMarginBottom: 10,
                  titleFontColor: '#6e707e',
                  titleFontSize: 14,
                  backgroundColor: "rgb(255,255,255)",
                  bodyFontColor: "#858796",
                  borderColor: '#dddfeb',
                  borderWidth: 1,
                  xPadding: 15,
                  yPadding: 15,
                  displayColors: false,
                  caretPadding: 10,
                  callbacks: {
                    label: function(tooltipItem, chart) {
                      var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                      return datasetLabel + ': Tk ' + number_format(tooltipItem.yLabel);
                    }
                  }
                },
              }
            });

        </script>

        <script>
          // Set new default font family and font color to mimic Bootstrap's default styling
          Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
          Chart.defaults.global.defaultFontColor = '#858796';

          // Pie Chart Example
          var ctx = document.getElementById("myPieChart");
          var myPieChart = new Chart(ctx, {
            type: 'pie',  
            data: {
              labels: ["Pending", "Confirmed", "Packed", "Shipping", "Delivered", "Returned", "Canceled"],
  
              datasets: [{
                data: [40, 30, 10, 13, 34, 24, 19], //  
                backgroundColor: ['#00bcd4', '#42a5f5', '#ffb300', '#757575', '#8bc34a', '#203040', '#718175',], 
                hoverBackgroundColor: ['#00acc1', '#1e88e5', '#ffa000', '#616161', '#7cb342','#205030', '#719075',],
                borderColor: "#ffffff", //  
                borderWidth: 2
              }],
            },
            options: {
              maintainAspectRatio: false,
              tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: true,
                caretPadding: 10,
              },
              legend: {
                display: true,
                position: 'right',  
                labels: {
                  boxWidth: 15
                }
              },
            },
          });

        </script>

  {% endblock %}