{% include 'navbar.html' %}
{% block content %}
{% load static %}
{%endblock%}
<!--css plugins for table-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">


<!--js plugins for table-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-start mb-0">Apex Charts</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a>
                                    </li>
                                    <li class="breadcrumb-item"><a href="#">Charts &amp; Maps</a>
                                    </li>
                                    <li class="breadcrumb-item active">Apex
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
                    <div class="mb-1 breadcrumb-right">
                        <div class="dropdown">
                            <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i data-feather="grid"></i></button>
                            <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="app-todo.html"><i class="me-1" data-feather="check-square"></i><span class="align-middle">Todo</span></a><a class="dropdown-item" href="app-chat.html"><i class="me-1" data-feather="message-square"></i><span class="align-middle">Chat</span></a><a class="dropdown-item" href="app-email.html"><i class="me-1" data-feather="mail"></i><span class="align-middle">Email</span></a><a class="dropdown-item" href="app-calendar.html"><i class="me-1" data-feather="calendar"></i><span class="align-middle">Calendar</span></a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <div class="row">

                    </div>
                </div>
                <!-- apex charts section start -->
                <section id="apexchart">
                    <div class="row">
                        <!-- Area Chart starts -->
                        <div class="col-12">
                            <div class="card">
                                <div class="
            card-header
            d-flex
            flex-sm-row flex-column
            justify-content-md-between
            align-items-start
            justify-content-start
          ">

                                </div>
                                <div class="card-body">
                                    <table id="example" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Amount</th>
                <th>Balance</th>
                <th>Start date</th>

            </tr>
        </thead>
        <tbody>
        {% for sales in sale %}
            <tr>
                <td>{{sales.id}}</td>
                <td>{{sales.name}}</td>
                <td>{{sales.phone_number}}</td>
                <td>{{sales.amount}}</td>
                 <td>{{sales.amount}}</td>
                <td>{{sales.created_at}}</td>

            </tr>
             {%endfor%}
        </tfoot>
    </table>

                                </div>
                            </div>
                        </div>
                        <!-- Area Chart ends -->

                        <div class="col-xl-6 col-12">
                            <div class="card">
                                <div class="
            card-header
            d-flex
            flex-sm-row flex-column
            justify-content-md-between
            align-items-start
            justify-content-start
          ">
                                    <div>
                                        <p class="card-subtitle text-muted mb-25">Balance</p>
                                        <h4 class="card-title fw-bolder">$74,382.72</h4>
                                    </div>
                                    <div class="d-flex align-items-center mt-md-0 mt-1">
                                        <i class="font-medium-2" data-feather="calendar"></i>
                                        <input type="text" class="form-control flat-picker bg-transparent border-0 shadow-none" placeholder="YYYY-MM-DD" />
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Bar Chart Ends -->

                        <!-- Candlestick Chart Starts -->
                        <div class="col-xl-6 col-12">
                            <div class="card">
                                <div class="
            card-header
            d-flex
            flex-sm-row flex-column
            justify-content-md-between
            align-items-start
            justify-content-start
          ">
                                    <div>
                                        <h4 class="card-title mb-50">Stock Prices</h4>
                                        <p class="mb-0">$50,863.98</p>
                                    </div>
                                    <div class="d-flex align-items-center mt-md-0 mt-1">
                                        <i class="font-medium-2" data-feather="calendar"></i>
                                        <input type="text" class="form-control flat-picker bg-transparent border-0 shadow-none" placeholder="YYYY-MM-DD" />
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="chart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Candlestick Chart Ends -->

                        <!-- Heatmap Chart Starts -->
                        <div class="col-xl-6 col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h4 class="card-title">Daily Sales States</h4>
                                    <div class="dropdown">
                                        <i data-feather="more-vertical" class="cursor-pointer" role="button" id="heat-chart-dd" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        </i>
                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heat-chart-dd">
                                            <a class="dropdown-item" href="#">Last 28 Days</a>
                                            <a class="dropdown-item" href="#">Last Month</a>
                                            <a class="dropdown-item" href="#">Last Year</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Heatmap Chart Ends -->

                        <!-- RadialBar Chart Starts -->
                        <div class="col-xl-6 col-12">
                            <div class="card">
                                <div class="
            card-header
            d-flex
            flex-sm-row flex-column
            justify-content-md-between
            align-items-start
            justify-content-start
          ">
                                    <h4 class="card-title mb-sm-0 mb-1">Statistics</h4>
                                </div>
                                <div class="card-body">
                                    <div id="radialbar-chart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- RadialBar Chart Ends -->

                        <!-- Radial Chart Starts-->
                        <div class="col-xl-6 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Mobile Comparison</h4>
                                </div>
                                <div class="card-body">
                                    <div id="radar-chart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Radial Chart Ends-->

                        <!-- Donut Chart Starts-->
                        <div class="col-xl-6 col-12">
                            <div class="card">
                                <div class="card-header flex-column align-items-start">
                                    <h4 class="card-title mb-75">Expense Ratio</h4>
                                    <span class="card-subtitle text-muted">Spending on various categories </span>
                                </div>
                                <div class="card-body">
                                    <div id="donut-chart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Donut Chart Ends-->
                        <!-- Apex charts section end -->
                    </div>
                </section>

            </div>
        </div>
    </div>
    <!-- END: Content-->

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>

    <!-- BEGIN: Footer-->
    <footer class="footer footer-static footer-light">
        <p class="clearfix mb-0"><span class="float-md-start d-block d-md-inline-block mt-25">COPYRIGHT &copy; 2021<a class="ms-25" href="https://1.envato.market/pixinvent_portfolio" target="_blank">Pixinvent</a><span class="d-none d-sm-inline-block">, All rights Reserved</span></span><span class="float-md-end d-none d-md-block">Hand-crafted & Made with<i data-feather="heart"></i></span></p>
    </footer>
    <button class="btn btn-primary btn-icon scroll-top" type="button"><i data-feather="arrow-up"></i></button>

<!-- END: Footer-->
<script>
var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [{% for sales in sale %}"{{sales.amount}}",{%endfor%}]
  }],
  xaxis: {
    categories: [{% for sales in sale %}"{{sales.name}}",{%endfor%}]
  }
}

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

chart.render();

var options = {
  chart: {
    type: 'area'
  },
  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("#chart2"), options);

chart.render();

 $(document).ready(function() {
                            $('#example').dataTable({
                                "aLengthMenu": [[4, 10, 50, -1], [4, 10, 50, "All"]],
                                "iDisplayLength": 4
                            });
                        } )
</script>