{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}

<!-- Begin Page Content -->
<title>Investment Edu | Reports</title>

<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <h1 class="f-20 mb-0">Reports</h1>
        </div>

        <div class="row">
            <div class="col-12 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Total Users</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/people-icon.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">7</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Payments</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/bill.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">7</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="col-12 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Total Subscribe</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/bell-white.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">7</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">New Users</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/group-people.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">7</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Total Blogs</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/blogger.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">7</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="col-12 col-md-4 mb-4">
                <div class="card  shadow h-100 py-2">
                    <div class="card-body">
                        <div class="dash-cards">
                            <h3 class="f-15 mb-3">Total Events</h3>
                            <div class="dash-card-cntnt d-inline-flex align-items-center justify-content-between w-100">
                                <div class="dash-icon">
                                    <img src="/static/admin/images/pending-icon.png">
                                </div>
                                <div class="dash-count">
                                    <p class="f-30 bold dark mb-0">7</p>
                                </div>
                                <!-- <div class="dash-graph">
                                    <img src="/static/admin/img/sound.svg">
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row my-4">
            <div class="col-12 col-md-12 col-lg-6">
                <div class="card dashboard-card">
                    <div class="top-card d-flex justify-content-between">
                        <div class="book-card">
                            <p class="f-15"><strong>Total Earnings</strong></p>
                        </div>
                    </div>
                    <div id="myEarning"></div>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-6">
                <div class="card user-card p-3">
                    <div class="top-card d-flex justify-content-between">
                        <p class="f-15"><strong>Subscribers</strong></p>
                    </div>
                    <div id="subscribers"></div>
                </div>
            </div>
        </div>
        <div class="row my-4">
            <div class="col-12 col-md-12 col-lg-6">
                <div class="card dashboard-card">
                    <div class="top-card d-flex justify-content-between">
                        <div class="book-card">
                            <p class="f-15"><strong>Blogs</strong></p>
                        </div>
                    </div>
                    <figure class="highcharts-figure">
                        <div id="blogs"></div>
                    </figure>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-6">
                <div class="card user-card p-3">
                    <div class="top-card d-flex justify-content-between">
                        <p class="f-15"><strong>Events</strong></p>
                    </div>
                    <div id="events"></div>
                </div>
            </div>
        </div>
        <div class="row my-4">
            <div class="col-12 col-md-12 col-lg-6">
                <div class="card dashboard-card">
                    <div class="top-card d-flex justify-content-between">
                        <div class="book-card">
                            <p class="f-15"><strong>Users</strong></p>
                        </div>
                    </div>
                    <div id="users"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- /.container-fluid -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
  integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


<!-- Earning Chart -->
<script>
var options = {
          series: [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],
          chart: {
          height: 350,
          type: 'bar',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: '',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        },
        fill: {
          colors: ['#ccc75d']
        }
        };

        var chart = new ApexCharts(document.querySelector("#myEarning"), options);
        chart.render();      
</script>

<!-- Subscriber Chart -->
<script>
var options = {
          series: [
          {
            type: 'rangeArea',
            name: 'Female Range',
        
            data: [
              {
                x: 'Jan',
                y: [1100, 1900]
              },
              {
                x: 'Feb',
                y: [1200, 1800]
              },
              {
                x: 'Mar',
                y: [900, 2900]
              },
              {
                x: 'Apr',
                y: [1400, 2700]
              },
              {
                x: 'May',
                y: [2600, 3900]
              },
              {
                x: 'Jun',
                y: [500, 1700]
              },
              {
                x: 'Jul',
                y: [1900, 2300]
              },
              {
                x: 'Aug',
                y: [1000, 1500]
              }
            ]
          },
        
          {
            type: 'rangeArea',
            name: 'Male Range',
            data: [
              {
                x: 'Jan',
                y: [3100, 3400]
              },
              {
                x: 'Feb',
                y: [4200, 5200]
              },
              {
                x: 'Mar',
                y: [3900, 4900]
              },
              {
                x: 'Apr',
                y: [3400, 3900]
              },
              {
                x: 'May',
                y: [5100, 5900]
              },
              {
                x: 'Jun',
                y: [5400, 6700]
              },
              {
                x: 'Jul',
                y: [4300, 4600]
              },
              {
                x: 'Aug',
                y: [2100, 2900]
              }
            ]
          },
        
          {
            type: 'line',
            name: 'Female',
            data: [
              {
                x: 'Jan',
                y: 1500
              },
              {
                x: 'Feb',
                y: 1700
              },
              {
                x: 'Mar',
                y: 1900
              },
              {
                x: 'Apr',
                y: 2200
              },
              {
                x: 'May',
                y: 3000
              },
              {
                x: 'Jun',
                y: 1000
              },
              {
                x: 'Jul',
                y: 2100
              },
              {
                x: 'Aug',
                y: 1200
              },
              {
                x: 'Sep',
                y: 1800
              },
              {
                x: 'Oct',
                y: 2000
              }
            ]
          },
          {
            type: 'line',
            name: 'Male',
            data: [
              {
                x: 'Jan',
                y: 3300
              },
              {
                x: 'Feb',
                y: 4900
              },
              {
                x: 'Mar',
                y: 4300
              },
              {
                x: 'Apr',
                y: 3700
              },
              {
                x: 'May',
                y: 5500
              },
              {
                x: 'Jun',
                y: 5900
              },
              {
                x: 'Jul',
                y: 4500
              },
              {
                x: 'Aug',
                y: 2400
              },
              {
                x: 'Sep',
                y: 2100
              },
              {
                x: 'Oct',
                y: 1500
              }
            ]
          }
        ],
          chart: {
          height: 350,
          type: 'rangeArea',
          animations: {
            speed: 500
          }
        },
        colors: ['#626262', '#cfca65', '#626262', '#cfca65'],
        dataLabels: {
          enabled: false
        },
        fill: {
          opacity: [0.24, 0.24, 1, 1]
        },
        forecastDataPoints: {
          count: 2
        },
        stroke: {
          curve: 'straight',
          width: [0, 0, 2, 2]
        },
        legend: {
          show: true,
          customLegendItems: ['Female', 'Male'],
          inverseOrder: true
        },
        title: {
          text: ''
        },
        markers: {
          hover: {
            sizeOffset: 5
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#subscribers"), options);
        chart.render();
</script>

<!-- Blogs Chart -->
<script>
var options = {
          series: [
          {
            name: "High - 2013",
            data: [28, 29, 33, 36, 32, 32, 33]
          },
          {
            name: "Low - 2013",
            data: [12, 11, 14, 18, 17, 13, 13]
          }
        ],
          chart: {
          height: 350,
          type: 'line',
          dropShadow: {
            enabled: true,
            color: '#646464',
            top: 18,
            left: 7,
            blur: 10,
            opacity: 0.2
          },
          toolbar: {
            show: false
          }
        },
        colors: ['#d3ce74', '#646464'],
        dataLabels: {
          enabled: true,
        },
        stroke: {
          curve: 'smooth'
        },
        title: {
          text: '',
          align: 'left'
        },
        grid: {
          borderColor: '#e7e7e7',
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        markers: {
          size: 1
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
          title: {
            text: 'Month'
          }
        },
        yaxis: {
          title: {
            text: 'Temperature'
          },
          min: 5,
          max: 40
        },
        legend: {
          position: 'top',
          horizontalAlign: 'right',
          floating: true,
          offsetY: -25,
          offsetX: -5
        }
        };

        var chart = new ApexCharts(document.querySelector("#blogs"), options);
        chart.render();
</script>

<!-- Events Chart -->
<script>
var options = {
          series: [{
          name: 'Inflation',
          data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
        }],
          chart: {
          height: 350,
          type: 'bar',
        },
        plotOptions: {
          bar: {
            borderRadius: 10,
            dataLabels: {
              position: 'top', // top, center, bottom
            },
          }
        },
        dataLabels: {
          enabled: true,
          formatter: function (val) {
            return val + "%";
          },
          offsetY: -20,
          style: {
            fontSize: '12px',
            colors: ["#304758"]
          }
        },
        
        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          position: 'top',
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },
          crosshairs: {
            fill: {
              type: 'gradient',
              gradient: {
                colorFrom: '#D8E3F0',
                colorTo: '#BED1E6',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5,
              }
            }
          },
          tooltip: {
            enabled: true,
          }
        },
        yaxis: {
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
            formatter: function (val) {
              return val + "%";
            }
          }
        
        },
        title: {
          text: 'Events',
          floating: true,
          offsetY: 330,
          align: 'center',
          style: {
            color: '#   '
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#events"), options);
        chart.render();
</script>

<!-- Users Chart -->
<script>
var options = {
          series: [{
          name: 'Inflation',
          data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
        }],
          chart: {
          height: 350,
          type: 'bar',
        },
        plotOptions: {
          bar: {
            borderRadius: 10,
            dataLabels: {
              position: 'top', // top, center, bottom
            },
          }
        },
        dataLabels: {
          enabled: true,
          formatter: function (val) {
            return val + "%";
          },
          offsetY: -20,
          style: {
            fontSize: '12px',
            colors: ["#304758"]
          }
        },
        
        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          position: 'top',
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },
          crosshairs: {
            fill: {
              type: 'gradient',
              gradient: {
                colorFrom: '#D8E3F0',
                colorTo: '#BED1E6',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5,
              }
            }
          },
          tooltip: {
            enabled: true,
          }
        },
        yaxis: {
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
            formatter: function (val) {
              return val + "%";
            }
          }
        
        },
        title: {
          text: 'Users',
          floating: true,
          offsetY: 330,
          align: 'center',
          style: {
            color: '#444'
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#users"), options);
        chart.render();
</script>


{% endblock %}