<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <!-- <link rel="stylesheet" href="../styles/main.css" /> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../styles/orderDashboard.css" />
    <link rel="shortcut icon" href="../icon.png" type="image/x-icon">
    <title>Invoice Statistics</title>
  </head>
  <body>
    <%
      function formatRupiah(number) {
        return number.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' });
      }
      let overallTotal = 0;
    %>
    <!-- Header -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
      <button class="navbar-toggler ms-3" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto px-3">
          <li class="nav-item">
            <a href="/invoiceDashboard" class="nav-link">Invoices</a>
          </li>
          <li class="nav-item">
            <a href="/invoiceDashboard/products" class="nav-link">Products</a>
          </li>
          <li class="nav-item">
            <a href="/invoiceDashboard/hampers" class="nav-link">Hampers</a>
          </li>
          <li class="nav-item">
            <a href="/invoiceDashboard/customers" class="nav-link">Customers</a>
          </li>
          <li class="nav-item active">
            <a href="/invoiceDashboard/statistics" class="nav-link">Statistics</a>
          </li>
        </ul>
      </div>
      <div class="logout-container d-flex flex-row">
        <p class="text-light m-0 me-3 align-middle py-2">Invoice Account </p>
        <button class="btn btn-light me-3" onclick="redirect('/logout')">Logout</button>
      </div>
      
    </nav>

    <!-- Title -->
    <h1 class="w-100 text-center mt-5 mb-4">Invoice StatisticsðŸ“ˆ</h1>

    <!-- Filter -->
    <div class="row mx-5 gap-3">
      <div class="container col-lg-4 bg-light rounded-3 px-3 py-3 align-content-center">
        <h4 style="font-weight: 700;">
          Displaying invoices from <%= statData.dateStart.toLocaleString('en-US', {year: 'numeric', month: 'long', day: 'numeric'}) %> to <%= statData.dateEnd.toLocaleString('en-US', {year: 'numeric', month: 'long', day: 'numeric'}) %>
        </h4>
      </div>
      <div class="container col-lg bg-light rounded-3 px-3 py-3">
        <form action="/invoiceDashboard/statistics" method="post" class="row">
          <div class="col-md my-1 my-md-0">
            <div class="form-floating">
              <input
                type="date"
                class="form-control"
                id="dateStart"
                name="dateStart"
                value="<%= statData.dateStart.toISOString().split('T')[0] %>"
              />
              <label for="dateStart">Start Date</label>
            </div>
          </div>
          <div class="col-md my-1 my-md-0">
            <div class="form-floating">
              <input
                type="date"
                class="form-control"
                id="dateEnd"
                name="dateEnd"
                value="<%= statData.dateEnd.toISOString().split('T')[0] %>"
              />
              <label for="dateEnd">End Date</label>
            </div>
          </div>
          <div class="col-md-3 mx-auto align-content-center my-1 my-md-0">
            <div class="form-check form-switch my-0">
              <input 
                class="form-check-input" 
                type="checkbox" 
                id="isArchived" 
                name="isArchived" 
                style="height: 20px; width: 40px" 
                <% if(statData.isArchived) { %>
                  checked
                <% } %>
                >
              <label class="form-check-label ms-2" for="isArchived" style="white-space: pre-wrap; font-size: 1rem;">Include Archived Invoices?</label>
            </div>
          </div>
          <button type="submit" class="btn btn-sm btn-primary order-button col-4 col-md-1 me-3 ms-3 ms-md-0 py-2 h-100 align-self-center my-1 my-md-0">Apply</button>
        </form>
        
      </div>
      
    </div>
    
    
    <!-- Top Stats -->
    <div class="row mx-5 gap-3 mt-4 mb-4">
      <!-- Top Invoices -->
      <div class="container col-md-5 bg-light rounded-3 px-3 py-3 table-responsive top-chart">
        <h3 class="mb-3 mt-1">Top Invoices</h3>
        <table class="table table-striped table-borderless">
          <thead>
            <tr class="table-dark ">
              <th>Detail</th>
              <th>Value</th>
            </tr>
          </thead>
          <% let counter = 0 %>
            <% statData.invoiceList.forEach(invoice => { if(counter < 10) {%>
              <tr>
                <td>Invoice by <%= invoice.customerName %> on <%= invoice.deliveryDate %></td>
                <td><%= formatRupiah(invoice.total) %></td>
              </tr>
              <% counter += 1 %>
            <% }
            overallTotal += invoice.total;
          }); %>
        </table>
      </div>

      <!-- Top Items -->
      <div class="container col-md bg-light rounded-3 px-3 py-3 table-responsive top-chart">
        <h3 class="mb-3 mt-1">Item Statistics</h3>
        <table class="table table-striped table-borderless">
          <thead>
            <tr class="table-dark ">
              <th>Item</th>
              <th>Purchases</th>
            </tr>
          </thead>
          <tbody>
            <% counter = 0 %>
            <% statData.itemsList.forEach(item => {  %>
              <tr>
                <td><%= item[0].split('@')[1] %></td>
                <td><%= item[1] %></td>
              </tr>
              <% counter += 1 %>
            <% }); %>
          </tbody>
        </table>
      </div>

      <!-- Top Products (including inside hampers) -->
      <div class="container col-md bg-light rounded-3 px-3 py-3 table-responsive top-chart">
        <h3 class="mb-3 mt-1">Product Statistics</h3>
        <table class="table table-striped table-borderless">
          <thead>
            <tr class="table-dark ">
              <th>Product</th>
              <th>Purchases</th>
            </tr>
          </thead>
          <tbody>
            <% counter = 0 %>
            <% statData.productsList.forEach(product => {  %>
              <tr>
                <td><%= product[0].split('@')[1] %></td>
                <td><%= product[1] %></td>
              </tr>
              <% counter += 1 %>
            <% }); %>
          </tbody>
        </table>
      </div>
      
    </div>

    
    <div class="row mx-5 gap-4 mt-4 mb-4">
      <!-- Top Customers -->
      <div class="container col-lg bg-light rounded-3 px-3 py-3 table-responsive">
        <h3 class="mb-3 mt-1">Top Customers</h3>
        <table class="table table-striped table-borderless bottom-top-chart">
          <thead>
            <tr class="table-dark ">
              <th>Customer</th>
              <th>Spending</th>
            </tr>
          </thead>
          <tbody>
            <% counter = 0 %>
            <% statData.customersList.forEach(customer => { %>
              <tr>
                <td><%= customer[0].split('@')[1] %></td>
                <td><%= formatRupiah(customer[1]) %></td>
              </tr>
              <% counter += 1 %>
            <% }); %>
          </tbody>
        </table>
        <h3 class="mb-3 mt-1">More Statistics</h3>
        <h6><strong>Total Earnings: </strong><%= formatRupiah(overallTotal) %> </h6>
        <h6><strong>Highest earning invoice: </strong><br> 
          <% if(statData.invoiceList.length > 0) { %>
          <%= statData.invoiceList[0].customerName %> on <%= statData.invoiceList[0].deliveryDate %> (<%= formatRupiah(statData.invoiceList[0].total) %>)
          <% } %>
        </h6>
        <h6><strong>Lowest earning invoice: </strong><br>
          <% if(statData.invoiceList.length > 0) { %>
          <%= statData.invoiceList[statData.invoiceList.length - 1].customerName %> on <%= statData.invoiceList[statData.invoiceList.length - 1].deliveryDate %> (<%= formatRupiah(statData.invoiceList[statData.invoiceList.length - 1].total) %>)
          <% } %>
        </h6>
      </div>
      <div class="container col-lg-8 bg-light rounded-3 px-3 py-3mx-0">
        <h3 class="mb-3 mt-1">Earnings by Day</h3>
        <canvas id="earningsChart" style="max-width:100%;"></canvas>
      </div>
    </div>

    <% statData.xValues.forEach(item => { %>
      <div style="display: none;" class="xValues"><%= item %></div>
    <% }) %>
    <% statData.yValues.forEach(item => { %>
      <div style="display: none;" class="yValues"><%= item %></div>
    <% }) %>
    
    
  </body>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"
  ></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  
  <script>
    function redirect(domain) {
      window.location.href = domain
    }
    const tempX = document.querySelectorAll('.xValues');
    const xValues = [];
    tempX.forEach(item => { xValues.push(item.innerHTML )});
    const tempY = document.querySelectorAll('.yValues');
    const yValues = [];
    tempY.forEach(item => { yValues.push(item.innerHTML )});
    console.log(xValues);
    new Chart("earningsChart", {
      type: "line",
      data: {
        labels: xValues,
        datasets: [{
          data: yValues,
          borderColor: "red",
          fill: false
        }]
      },
      options: {
        legend: {display: false}
      }
    });
  </script>
</html>
