<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Shopping DashBoard</title>

  <!-- Bootstrap core CSS -->
  <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Kufam:wght@400;500;600;700;800;900&display=swap"
    rel="stylesheet">
<!--    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">-->
    <link href="../public/jquery.toast.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="../public/css/main.css" rel="stylesheet">

</head>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <?php
          
          include ('../sidebar_admin.php'); 
      ?>
   
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <?php
      include ('../navbar_admin.php');
      ?>

      <div class="container">
        <div class="page_name">
          <h1>Administration</h1>
          <div class="years">
<!--            <div class="form-group">-->
<!---->
<!--              <select class="form-control" id="years">-->
<!--                <option>Years</option>-->
<!--                <option>1 years</option>-->
<!--                <option>2 years</option>-->
<!--                <option>4</option>-->
<!--                <option>5</option>-->
<!--              </select>-->
<!--            </div>-->

          </div>

        </div>
        <div class="cards">
          <div class="row">
            <div class="col-xl-3 col-lg-3 col-md-6 mt-3 mb-3">
              <div class="card admin_card">
                <div class="card-body">
                  <div class="card_img">
                    <div class="img_div">
                      <span><i class="fas fa-arrow-up"></i></span>
                    </div>
                    <div class="cards_details">
                      <h1 id="t-revenue">$6,726 <span>+2.5%</span> </h1>
                      <h2>Total Revenue</h2>

                    </div>
                  </div>

                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 mt-3 mb-3">
              <div class="card admin_card">
                <div class="card-body">
                  <div class="card_img">
                    <div class="img_div">
                      <span><i class="fas fa-arrow-up"></i></span>
                    </div>
                    <div class="cards_details">
                      <h1 id="t-orders">$3,966 <span>+2.5%</span> </h1>
                      <h2>order</h2>
                    </div>
                  </div>

                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 mt-3 mb-3">
              <div class="card admin_card">
                <div class="card-body">
                  <div class="card_img">
                      <div class="img_div">
                          <span><i class="fas fa-arrow-up"></i></span>
                      </div>
<!--                    <div class="img_div down">-->
<!--                      <span class="down_span"><i class="fas fa-arrow-down"></i></span>-->
<!--                    </div>-->
                    <div class="cards_details">
                      <h1 id="t-brands">$3,966 <span class="down_span">+2.5%</span> </h1>
                      <h2>total Brands</h2>

                    </div>
                  </div>

                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 mt-3 mb-3">
              <div class="card admin_card">
                <div class="card-body">
                  <div class="card_img">
                      <div class="img_div">
                          <span><i class="fas fa-arrow-up"></i></span>
                      </div>
<!--                    <div class="img_div down">-->
<!--                      <span class="down_span"><i class="fas fa-arrow-down"></i></span>-->
<!--                    </div>-->
                    <div class="cards_details">
                      <h1 id="no-of-users">$3,966 <span class="down_span">+2.5%</span> </h1>
                      <h2>No of Users</h2>

                    </div>
                  </div>

                </div>
              </div>
            </div>
<!--            <div class="col-xl-8 mt-3 mb-3">-->
<!--              <div class="card customer_growth_card">-->
<!--                <div class="card-body">-->
<!--                  <ul class="nav nav-tabs">-->
<!--                    <li class="nav-item">-->
<!--                      <a class="nav-link active" data-toggle="tab" href="#Revenue">Revenue</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                      <a class="nav-link" data-toggle="tab" href="#Orders">Orders</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                      <a class="nav-link" data-toggle="tab" href="#Brands">Brands</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                      <a class="nav-link" data-toggle="tab" href="#Users">Users</a>-->
<!--                    </li>-->
<!---->
<!---->
<!--                  </ul>-->
<!--                  <div class="tab-content">-->
<!--                    <div class="tab-pane active" id="Revenue">-->
<!--                      <div id="chart">-->
<!---->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="tab-pane" id="Orders">-->
<!--                      <div id="tripchart">-->
<!---->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <div class="tab-pane" id="Brands">-->
<!--                      <div id="captainchart">-->
<!---->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                 -->
<!---->
<!--                </div>-->
<!--              </div>-->
<!---->
<!--            </div>-->
<!--            <div class="col-xl-4 mt-3 mb-3">-->
<!--              <div class="card polar_card">-->
<!--                <div class="card-body" style="padding: 49px 20px;">-->
<!--                  <div id="pie_chart">-->
<!---->
<!--                  </div>-->
<!---->
<!--                </div>-->
<!--              </div>-->
<!--             -->
<!---->
<!--            </div>-->
<!--            <div class="col-xl-8 mt-3 mb-3">-->
<!--              <div class="card col_chart_card">-->
<!--                <div class="card-body">-->
<!--                  <h1>Monthly Graph</h1>-->
<!--                  <div id="colchart">-->
<!---->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!---->
<!--            <div class="col-xl-4 mt-3 mb-3">-->
<!--              <div class="card customer_growth_card">-->
<!--                <div class="card-body">-->
<!--                  <h1>Weekly Growth</h1>-->
<!--                  <div id="weeklychart">-->
<!---->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!---->
<!--            </div>-->
<!--        -->
           
            <div class="col-xl-6 mt-3 mb-3">
              <div class="card top_ten_authors ">
                <div class="card-body ">
                  <div class="filter_table">
                    <h1>Top 10 Brands</h1>
                    <div class="catgory_form">
<!--                      <div class="form-group">-->
<!---->
<!--                        <select class="form-control" id="city">-->
<!--                          <option>City</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
<!--                      <div class="form-group ml-2">-->
<!---->
<!--                        <select class="form-control" id="country">-->
<!--                          <option>Country</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
                    </div>

                  </div>

                  <table class="table">
                    <thead>
                      <tr>
                          <th>Image</th>
                        <th>Name</th>
                        <th>Sale</th>
                        <th>Rating</th>
                        <th>Earning</th>
                     
                      </tr>
                    </thead>
                    <tbody id="top-ten-brands">
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-xl-6 mt-3 mb-3">
              <div class="card top_ten_authors ">
                <div class="card-body ">
                  <div class="filter_table">
                    <h1>Trending Brands</h1>
                    <div class="catgory_form">
<!--                      <div class="form-group">-->
<!---->
<!--                        <select class="form-control" id="city">-->
<!--                          <option>City</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
<!--                      <div class="form-group ml-2">-->
<!---->
<!--                        <select class="form-control" id="country">-->
<!--                          <option>Country</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
                    </div>

                  </div>

                  <table class="table">
                    <thead>
                      <tr>
                          <th>Image</th>
                        <th>Name</th>
                        <th>Sale</th>
                        <th>Rating</th>
                        <th>Earning</th>
                     
                      </tr>
                    </thead>
                    <tbody id="top-ten-trending-brands">
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-xl-6 mt-3 mb-3">
              <div class="card top_ten_authors ">
                <div class="card-body ">
                  <div class="filter_table">
                    <h1>Top 10 Products</h1>
                    <div class="catgory_form">
<!--                      <div class="form-group">-->
<!---->
<!--                        <select class="form-control" id="city">-->
<!--                          <option>City</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
<!--                      <div class="form-group ml-2">-->
<!---->
<!--                        <select class="form-control" id="country">-->
<!--                          <option>Country</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
                    </div>

                  </div>

                  <table class="table">
                    <thead>
                      <tr>
                          <th>Image</th>
                        <th>Name</th>
                        <th>Sale</th>
                        <th>Rating</th>
                        <th>Earning</th>
                     
                      </tr>
                    </thead>
                    <tbody id="top-ten-products">
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-xl-6 mt-3 mb-3">
              <div class="card top_ten_authors ">
                <div class="card-body ">
                  <div class="filter_table">
                    <h1>Trending Products</h1>
                    <div class="catgory_form">
<!--                      <div class="form-group">-->
<!---->
<!--                        <select class="form-control" id="city">-->
<!--                          <option>City</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
<!--                      <div class="form-group ml-2">-->
<!---->
<!--                        <select class="form-control" id="country">-->
<!--                          <option>Country</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
                    </div>

                  </div>

                  <table class="table">
                    <thead>
                      <tr>
                          <th>Image</th>
                        <th>Name</th>
                        <th>Sale</th>
                        <th>Rating</th>
                        <th>Earning</th>
                     
                      </tr>
                    </thead>
                    <tbody id="top-ten-trending-products">
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-xl-12 mt-3 mb-3">
              <div class="card top_ten_authors ">
                <div class="card-body ">
                  <div class="filter_table">
                    <h1>Top Customers</h1>
                    <div class="catgory_form">
<!--                      <div class="form-group">-->
<!---->
<!--                        <select class="form-control" id="city">-->
<!--                          <option>City</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
<!--                      <div class="form-group ml-2">-->
<!---->
<!--                        <select class="form-control" id="country">-->
<!--                          <option>Country</option>-->
<!--                          <option>2</option>-->
<!--                          <option>3</option>-->
<!--                          <option>4</option>-->
<!--                          <option>5</option>-->
<!--                        </select>-->
<!--                      </div>-->
                    </div>

                  </div>

                  <table class="table">
                    <thead>
                      <tr>
                          <th>Image</th>
                        <th>Name</th>
                        <th>Sale</th>
                        <th>Rating</th>
                        <th>Purchasing</th>
                     
                      </tr>
                    </thead>
                    <tbody id="top-ten-customer">
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                      <tr>

                        <td><img src="../public/image/person.jpg" alt=""><span>Elston Gullan</span>
                        </td>
                        <td>40</td>
                        <td>4.3</td>
                        <td>40</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          
          </div>

        </div>
      </div>
      <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->
  </div>


  <!-- Bootstrap core JavaScript -->
  <script src="../vendor/jquery/jquery.min.js"></script>
  <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>-->
  <script type="text/javascript" src="../public/jquery.toast.min.js"></script>


  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function (e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });

    // CUSTOMER GROWTH CHART
    var options = {
      series: [{
        name: 'Net Profit',
        data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
      }, {
        name: 'Revenue',
        data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
      }, {
        name: 'Free Cash Flow',
        data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
      }],
      chart: {
        type: 'bar',
        height: 300
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          endingShape: 'rounded'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
      },
      yaxis: {
        title: {
          // text: '$ (thousands)'
        }
      },
      fill: {
        opacity: 1
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return "$ " + val + " thousands"
          }
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
    // WEEKLY CHART

    var options = {
      series: [{
        name: 'Revenue',
        data: [76, 85, 101, 98, 87, 105, 70]
      }],
      chart: {
        type: 'bar',
        height: 350
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '35%',
          endingShape: 'rounded'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: ['1-w', '2-w', '3-w', '4-w', '5-w', '6-w', '7-w'],
      },
      yaxis: {
        title: {
          // text: '$ (thousands)'
        }
      },
      fill: {
        opacity: 1
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return "$ " + val + " thousands"
          }
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#weeklychart"), options);
    chart.render();



    //  trip chart
    var options = {
      series: [{
        name: 'TEAM A',
        type: 'column',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
      }, {
        name: 'TEAM B',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
      }, {
        name: 'TEAM C',
        type: 'line',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
      }],
      chart: {
        height: 300,
        type: 'line',
        stacked: false,
        toolbar:{
          show:false,
        },
      },
      stroke: {
        width: [0, 2, 5],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },

      fill: {
        opacity: [0.85, 0.25, 1],
        gradient: {
          inverseColors: false,
          shade: 'light',
          type: "vertical",
          opacityFrom: 0.85,
          opacityTo: 0.55,
          stops: [0, 100, 100, 100]
        }
      },
      labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
        '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
      ],
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime'
      },
      yaxis: {
        title: {
          // text: 'Points',
        },
        min: 0
      },
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: function (y) {
            if (typeof y !== "undefined") {
              return y.toFixed(0) + " points";
            }
            return y;

          }
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#tripchart"), options);
    chart.render();
    // pie chart
    var options = {
          series: [44, 55, 41],
          chart: {
          type: 'donut',
          height:600,
        },
        legend: {
              position: 'bottom',
             
            },
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200,
             

            },
            legend: {
              position: 'bottom'
            }
          }
        }]
        };

        var chart = new ApexCharts(document.querySelector("#pie_chart"), options);
        chart.render();
    // radar charts
  
    // column chart
    var options = {
      series: [{
        name: 'TEAM A',
        type: 'column',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
      }, {
        name: 'TEAM B',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
      }, {
        name: 'TEAM C',
        type: 'line',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
      }],
      chart: {
        height: 350,
        type: 'line',
        stacked: false,
        toolbar:{
          show:false,
        },
      },
      stroke: {
        width: [0, 2, 5],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },

      fill: {
        opacity: [0.85, 0.25, 1],
        gradient: {
          inverseColors: false,
          shade: 'light',
          type: "vertical",
          opacityFrom: 0.85,
          opacityTo: 0.55,
          stops: [0, 100, 100, 100]
        }
      },
      labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
        '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
      ],
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime'
      },
      yaxis: {
        title: {
          // text: 'Points',
        },
        min: 0
      },
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: function (y) {
            if (typeof y !== "undefined") {
              return y.toFixed(0) + " points";
            }
            return y;

          }
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#colchart"), options);
    chart.render();
    // captain chart

    var options = {
      series: [{
        name: 'TEAM A',
        type: 'column',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
      }, {
        name: 'TEAM B',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
      }, {
        name: 'TEAM C',
        type: 'line',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
      }],
      chart: {
        height: 300,
        type: 'line',
        stacked: false,
        toolbar: {
        show: false,
        },
      },
      stroke: {
        width: [0, 2, 5],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },

      fill: {
        opacity: [0.85, 0.25, 1],
        gradient: {
          inverseColors: false,
          shade: 'light',
          type: "vertical",
          opacityFrom: 0.85,
          opacityTo: 0.55,
          stops: [0, 100, 100, 100]
        }
      },
      labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
        '08/01/2003', '09/01/2003', '10/01/2003',
      ],
      markers: {
        size: 0
      },
      xaxis: {
        type: 'datetime'
      },
      yaxis: {
        title: {
          // text: 'Points',
        },
        min: 0
      },
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: function (y) {
            if (typeof y !== "undefined") {
              return y.toFixed(0) + " points";
            }
            return y;

          }
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#captainchart"), options);
    chart.render();

    $('.admin_overview').addClass('active');
  </script>

<!--database script-->
<script>
    gettenBrands();
    gettenBrandsTrending();
    gettenProducts();
    gettenProductsTrending();
    gettenTopCustomer();
    totalRevenue();
    totalOrders();
    totalBrands();
    noOfUsers();


    function gettenBrands() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=retrieve_ten_brands", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    $("#top-ten-brands").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        var n = list[i].id;
                        var brand_name = list[i].brand_name;

                        var brand_image = list[i].brand_image;
                        var sale = list[i].sale;
                        var avg = list[i].avg;
                        var total_amount = list[i].total_amount;
                        var currency_symbol = list[i].currency_symbol;





                        var text = " <tr>\n" +
                            "\n" +
                            "                        <td id=\"top-brand-img\"><img src=\""+brand_image+"\" alt=\"\">\n" +
                            "                        </td>\n" +
                            "                        <td>"+brand_name+"</td>\n" +
                            "                        <td>"+sale+"</td>\n" +
                            "                        <td>"+avg+"</td>\n" +
                            "                        <td>"+currency_symbol+" "+total_amount+"</td>\n" +
                            "                      </tr>";
                        $("#top-ten-brands").append(text);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function gettenBrandsTrending() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=retrieve_ten_brands_trending", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    $("#top-ten-trending-brands").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        var n = list[i].id;
                        var brand_name = list[i].brand_name;

                        var brand_image = list[i].brand_image;
                        var sale = list[i].sale;
                        var avg = list[i].avg;
                        var total_amount = list[i].total_amount;
                        var currency_symbol = list[i].currency_symbol;




                        var text = " <tr>\n" +
                            "\n" +
                            "                        <td id=\"top-brand-img\"><img src=\""+brand_image+"\" alt=\"\">\n" +
                            "                        </td>\n" +
                            "                        <td>"+brand_name+"</td>\n" +
                            "                        <td>"+sale+"</td>\n" +
                            "                        <td>"+avg+"</td>\n" +
                            "                        <td>"+currency_symbol+" "+total_amount+"</td>\n" +
                            "                      </tr>";
                        $("#top-ten-trending-brands").append(text);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function gettenProducts() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=retrieve_ten_products", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    $("#top-ten-products").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        // var n = list[i].id;
                        var pro_name = list[i].pro_name;

                        var pro_image = list[i].pro_image;
                        var sale = list[i].sale;
                        var avg = list[i].avg;
                        var total_amount = list[i].total_amount;
                        var currency_symbol = list[i].currency_symbol;




                        var text = " <tr>\n" +
                            "\n" +
                            "                        <td><img src=\""+pro_image+"\" alt=\"\">\n" +
                            "                        </td>\n" +
                            "                        <td id=\"pro-name-td\">"+pro_name+"</td>\n" +
                            "                        <td>"+sale+"</td>\n" +
                            "                        <td>"+avg+"</td>\n" +
                            "                        <td>"+currency_symbol+" "+total_amount+"</td>\n" +
                            "                      </tr>";
                        $("#top-ten-products").append(text);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function gettenProductsTrending() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=retrieve_ten_trending_products", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    $("#top-ten-trending-products").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        // var n = list[i].id;
                        var pro_name = list[i].pro_name;

                        var pro_image = list[i].pro_image;
                        var sale = list[i].sale;
                        var avg = list[i].avg;
                        var total_amount = list[i].total_amount;
                        var currency_symbol = list[i].currency_symbol;





                        var text = " <tr>\n" +
                            "\n" +
                            "                        <td><img src=\""+pro_image+"\" alt=\"\">\n" +
                            "                        </td>\n" +
                            "                        <td id=\"pro-name-td\">"+pro_name+"</td>\n" +
                            "                        <td>"+sale+"</td>\n" +
                            "                        <td>"+avg+"</td>\n" +
                            "                        <td>"+currency_symbol+" "+total_amount+"</td>\n" +
                            "                      </tr>";
                        $("#top-ten-trending-products").append(text);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function gettenTopCustomer() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=retrieve_top_customer", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    $("#top-ten-customer").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        // var n = list[i].id;
                        var user_name = list[i].user_name;

                        var user_image = list[i].user_image;
                        var sale = list[i].sale;
                        var avg = list[i].avg;
                        var total_amount = list[i].total_amount;
                        var currency_symbol = list[i].currency_symbol;





                        var text = " <tr>\n" +
                            "\n" +
                            "                        <td><img src=\""+user_image+"\" alt=\"\">\n" +
                            "                        </td>\n" +
                            "                        <td>"+user_name+"</td>\n" +
                            "                        <td>"+sale+"</td>\n" +
                            "                        <td>"+avg+"</td>\n" +
                            "                        <td>"+currency_symbol+" "+total_amount+"</td>\n" +
                            "                      </tr>";
                        $("#top-ten-customer").append(text);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function totalRevenue() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=total_revenue", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);

                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        // var n = list[i].id;
                        // var user_name = list[i].user_name;
                        //
                        // var user_image = list[i].user_image;
                        // var sale = list[i].sale;
                        // var avg = list[i].avg;
                        var total_amount = list[i].total_amount;
                        var currency_symbol = list[i].currency_symbol;


                        $("#t-revenue").text(currency_symbol+total_amount);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function totalOrders() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=total_order", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    // $("#top-ten-customer").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        // var n = list[i].id;
                        // var user_name = list[i].user_name;
                        //
                        // var user_image = list[i].user_image;
                        // var sale = list[i].sale;
                        // var avg = list[i].avg;
                        var total_order = list[i].total_order;
                        // var currency_symbol = list[i].currency_symbol;


                        $("#t-orders").text(total_order);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function totalBrands() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=total_brands", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    // $("#top-ten-customer").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        // var n = list[i].id;
                        // var user_name = list[i].user_name;
                        //
                        // var user_image = list[i].user_image;
                        // var sale = list[i].sale;
                        // var avg = list[i].avg;
                        var total_brand = list[i].total_brand;
                        // var currency_symbol = list[i].currency_symbol;


                        $("#t-brands").text(total_brand);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    function noOfUsers() {
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=no_of_users", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    // $("#top-ten-customer").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        // var n = list[i].id;
                        // var user_name = list[i].user_name;
                        //
                        // var user_image = list[i].user_image;
                        // var sale = list[i].sale;
                        // var avg = list[i].avg;
                        var total_user = list[i].total_user;
                        // var currency_symbol = list[i].currency_symbol;


                        $("#no-of-users").text(total_user);



                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });
    }

    window.setInterval(function(){
        sendRequest("?action_type=retrieve&request_type=overview&functionality_type=get_order_response", {
            page: 1

        }, "POST")
            .then((data) => {

                // console.log(data);
                var data = JSON.parse(data);
                // console.log("hello : " + data.code);
                if (data.code == "202") {
                    // $("#paginate").html(data.htmlData);
                    // $("#top-ten-brands").empty();
                    var list = data.listOfData;

                    for (var i = 0; i < list.length; i++) {



                        var total_order = list[i].total_order;
                        if(total_order > 0){
                            $.toast({
                                heading: 'Order Received',
                                text: total_order+' New Order.',
                                icon: 'info',
                                bgColor: '#51a351',
                                textColor: 'white',
                                loaderBg: '#11a533',
                                position: 'bottom-right',
                                stack: false
                            })

                        }





                    }



                }
                else if (data.code == "206") {
                    console.log("Failed to Delete");
                }



            })
            .catch((error) => {
                console.log(error)
            });

    }, 10000);

</script>

</body>

</html>