@extends('layouts.app') @section('content') @include('layouts.sidebar')

<style>
    .form-outline input::placeholder {
        font-size: 0.7em;
        /* Adjust the font size as needed */
    }

    .valuesty {
        font-size: 15px;
    }
    .card-container {
        display: flex;
        gap: 20px;
        justify-content:space-between;
    }

    .card {
        background-color: rgb(250, 255, 254);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 500px;
        box-sizing: border-box;
    }

    .perform {
        display: flex;
        justify-content: space-between;
    }

    .chartspace {
        display: flex;
        gap: 2rem;
        padding-right: 100px !important;
    }

    .barchart {
        width: 100%;
        margin: 15px auto;
        background-color: rgb(250, 255, 254);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        box-sizing: border-box;
    }

    .barchart1 {
        /* width: 50%; */
        background-color: rgb(250, 255, 254);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        box-sizing: border-box;
    }

    .chart-container {
        display: flex;
    }

    .y-axis {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
        margin-right: 10px;
    }

    .y-axis div {
        height: 27px;
        /* Adjust height based on the chart height divided by number of intervals */
    }

    .chart {
        display: flex;
        align-items: flex-end;
        height: 300px;
        width: 400px;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        padding-left: 10px;
        position: relative;
    }

    .bar {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin: 0 5px;
        position: relative;
    }

    .label {
        text-align: center;
        margin-top: 5px;
    }

    .value {
        width: 100%;
    }

    .chart-container {
        display: flex;
        position: relative;
    }

    .y-axis1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
        margin-right: 10px;
    }

    .y-axis1 div {
        height: 60px;
        /* Adjust height based on the chart height divided by number of intervals */
    }

    .chart {
        display: flex;
        align-items: flex-end;
        height: 300px;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        padding-left: 10px;
        position: relative;
    }

    .bar {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin: 0 5px;
        position: relative;
    }

    .label1 {
        display: none;
    }

    .value1 {
        width: 50%;
    }

    .x-axis {
        display: flex;
        margin-top: 10px;
        padding-left: 38px;
        /* Adjust to align with the chart */
    }

    .x-axis div {
        text-align: center;
        width: 80px;
        /* Adjust width to align with bars and spacing */
    }

    .pie-chart {
        background: radial-gradient(circle closest-side, white 0, white 40%, transparent 40%, transparent 100%, white 0), conic-gradient(#4e79a7 0, #4e79a7 62.3%, #f28e2c 0, #f28e2c 100%);
        position: relative;
        width: 450px;
        min-height: 300px;
        margin: 0;
        outline: 1px solid #ccc;
    }

    .pie-chart:hover {
        border: 2px solid red;
    }

    .pie-chart h2 {
        position: absolute;
        margin: 1rem;
    }

    .pie-chart figcaption {
        position: absolute;
        bottom: 1em;
        right: 1em;
        font-size: smaller;
        text-align: right;
    }

    .pie-chart span:after {
        display: inline-block;
        content: "";
        width: 0.8em;
        height: 0.8em;
        margin-left: 0.4em;
        height: 0.8em;
        border-radius: 0.2em;
        background: currentColor;
    }

    .pie-chart1 {
        background: radial-gradient(circle closest-side, #fff 0, #fff 43.68%, transparent 43.68%, transparent 84%, #fff 0), conic-gradient(from 42deg, #4e79a7 0, #4e79a7 49.4%, #f28e2c 0, #f28e2c 79.3%, #e15759 0, #e15759 100%);
        position: relative;
        width: 450px;
        min-height: 300px;
        margin: 0;
        outline: 1px solid #ccc
    }

    .pie-chart1 h2 {
        position: absolute;
        margin: 1rem
    }

    .pie-chart1 cite {
        position: absolute;
        bottom: 0;
        font-size: 80%;
        padding: 1rem;
        color: gray
    }

    .pie-chart1 figcaption {
        position: absolute;
        bottom: 1em;
        right: 1em;
        font-size: smaller;
        text-align: right
    }

    .pie-chart1 span:after {
        display: inline-block;
        content: "";
        width: .8em;
        height: .8em;
        margin-left: .4em;
        height: .8em;
        border-radius: .2em;
        background: currentColor
    }

    .card-container1 {
        display: flex;
        justify-content: space-between;
    }

    .carded {
        background-color: rgb(250, 255, 254);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 500px;
        box-sizing: border-box;
    }

    .browser {
        font-size: 11px;
    }

    .Countries {
        display: flex;
        justify-content: space-between;
    }

    .progress-container {
        width: 100%;
        background-color: #f0f0f0;
        border-radius: 5px;
        overflow: hidden;
    }

    .progress-bar {
        width: 100%;
        height: 15px;
        background-color: #4caf50;
        border-radius: 5px;
        transition: width 0.5s ease-in-out;
    }
</style>

<main>
    <h1>Analytics</h1>

    <div class="form-group mb-4 col-2">
        <select
            name=""
            class="form-control"
            required="required"
            id=""
        >
            <option value="">Select a filter</option>

            <option value="1">Date</option>

            <option value="2">partner</option>

            <option value="3">Customer</option>

            <option value="4">Project</option>
        </select>
    </div>

    <!-- Analyses -->

    <div class="progress_bar px-2">
        <div class="d-flex-jc-ac">
            <div class="col-md-4 col-sm-6">
                <div class="pro_one">
                    <div class="info">
                        <h3>Total QR'S Created</h3>

                        <h1>1,039</h1>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="pro_one">
                    <div class="info">
                        <h3>Total Projects Created</h3>

                        <h1>1,039</h1>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="pro_one">
                    <div class="info">
                        <h3>Total Active Customers</h3>

                        <h1>1,039</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="progress_bar px-2 mt-3">
        <div class="d-flex-jc-ac">
            <div class="col-md-4 col-sm-6">
                <div class="pro_one">
                    <div class="info">
                        <h3>Total Brand Impressions</h3>

                        <h1>1,039</h1>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="pro_one">
                    <div class="info">
                        <h3>New Customers Onboarded</h3>

                        <h1>1,039</h1>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="pro_one">
                    <div class="info">
                        <h3>New Partners Onboarded</h3>

                        <h1>1,039</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="progress_bar px-2 mt-3">
        <div class="d-flex-jc-ac">
            <div class="col-md-4 col-sm-6">
                <div class="pro_one">
                    <div class="info">
                        <h3>Total Brand Impressions</h3>

                        <h1>1,039</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="analyse">
            <div class="sales">
                <div class="status">
                    <div class="info">
                        <h3>Total QR'S Created</h3>
                        <h1> 1,039</h1>
                    </div>
                    <div class="progresss">
                        <svg>
                            <circle cx="38" cy="38" r="36"></circle>
                        </svg>
                        <div class="percentage">
                            <p>+81%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="visits">
                <div class="status">
                    <div class="info">
                        <h3>Total Projects</h3>
                        <h1>2,000</h1>
                    </div>
                    <div class="progresss">
                        <svg>
                            <circle cx="38" cy="38" r="36"></circle>
                        </svg>
                        <div class="percentage">
                            <p>-48%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="searches">
                <div class="status">
                    <div class="info">
                        <h3>Total Active Customer</h3>
                        <h1>580</h1>
                    </div>
                    <div class="progresss">
                        <svg>
                            <circle cx="38" cy="38" r="36"></circle>
                        </svg>
                        <div class="percentage">
                            <p>+21%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sales">
                <div class="status">
                    <div class="info">
                        <h3>Total Brand Impression</h3>
                        <h1> 1,039</h1>
                    </div>
                    <div class="progresss">
                        <svg>
                            <circle cx="38" cy="38" r="36"></circle>
                        </svg>
                        <div class="percentage">
                            <p>+81%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="visits">
                <div class="status">
                    <div class="info">
                        <h3>New Customers Onboarded</h3>
                        <h1>2,000</h1>
                    </div>
                    <div class="progresss">
                        <svg>
                            <circle cx="38" cy="38" r="36"></circle>
                        </svg>
                        <div class="percentage">
                            <p>-48%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="searches">
                <div class="status">
                    <div class="info">
                        <h3>New Partners Onboarded</h3>
                        <h1>580</h1>
                    </div>
                    <div class="progresss">
                        <svg>
                            <circle cx="38" cy="38" r="36"></circle>
                        </svg>
                        <div class="percentage">
                            <p>+21%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sales">
                <div class="status">
                    <div class="info">
                        <h3>New Users Onboarded</h3>
                        <h1> 1,039</h1>
                    </div>
                    <div class="progresss">
                        <svg>
                            <circle cx="38" cy="38" r="36"></circle>
                        </svg>
                        <div class="percentage">
                            <p>+81%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    <!-- End of Analyses -->
    <!-- card -->
    <br>
    <br>

    <div class="card-container">
        <div class="card">
            <div class="perform">
                <h2>Top Customer By projects</h2>

                <a href="">View all</a>
            </div>

            <div class="perform">
                <p>Name</p>

                <p>scans</p>
            </div>

            <div class="perform">
                <p>
                    Rogger Business Card - Tap to share
                </p>

                <p>92</p>
            </div>

            <hr>

            <div class="perform">
                <p>Business Card Test</p>

                <p>50</p>
            </div>

            <hr>

            <div class="perform">
                <p>Seminar</p>

                <p>1</p>
            </div>
        </div>

        <div class="card">
            <div class="perform">
                <h2>Top Customer By QR Created</h2>

                <a href="">View all</a>
            </div>

            <div class="perform">
                <p>Name</p>

                <p>scans</p>
            </div>

            <div class="perform">
                <p>Bengaluru (In)</p>

                <p>91</p>
            </div>

            <hr>

            <div class="perform">
                <p>Chennai (In)</p>

                <p>51</p>
            </div>

            <hr>

            <div class="perform">
                <p>Karimnagar (In)</p>

                <p>1</p>
            </div>
        </div>
    </div>

    <br>

    <div class="card-container">
        <div class="card">
            <div class="perform">
                <h2>Top customer By Industry</h2>

                <a href="">View all</a>
            </div>

            <div class="perform">
                <p>Name</p>

                <p>scans</p>
            </div>

            <div class="perform">
                <p>
                    Rogger Business Card - Tap to share
                </p>

                <p>92</p>
            </div>

            <hr>

            <div class="perform">
                <p>Business Card Test</p>

                <p>50</p>
            </div>

            <hr>

            <div class="perform">
                <p>Seminar</p>

                <p>1</p>
            </div>
        </div>

        <div class="card">
            <div class="perform">
                <h2>Top Projects</h2>

                <a href="">View all</a>
            </div>

            <div class="perform">
                <p>Name</p>

                <p">scans</p">
            </div>

            <div class="perform">
                <p>Bengaluru (In)</p>

                <p>91</p>
            </div>

            <hr>

            <div class="perform">
                <p>Chennai (In)</p>

                <p>51</p>
            </div>

            <hr>

            <div class="perform">
                <p>Karimnagar (In)</p>

                <p>1</p>
            </div>
        </div>
    </div>

    <!-- end card -->
    <br>
    <!-- bar chart -->

    <div class="chartspace">
        <div class="barchart">
            <div class="barchart">
                <h2>Hour wise</h2>

                <div class="chart-container">
                    <div class="y-axis1">
                        <div>20</div>

                        <div>15</div>

                        <div>10</div>

                        <div>5</div>

                        <div>0</div>
                    </div>

                    <div class="chart">
                        <div
                            class="bar"
                            style="height: 900px;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 10%;"
                            ></div>

                            <div class="label1">Sun</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 650px;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 10%;"
                            ></div>

                            <div class="label1">Sun</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 450px;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 12%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 30%;"
                            ></div>

                            <div class="label1">Mon</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 200px;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 12%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 30%;"
                            ></div>

                            <div class="label1">Mon</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 28.5%;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 19%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 29%;"
                            ></div>

                            <div class="label1">Tue</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 28.5%;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 19%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 29%;"
                            ></div>

                            <div class="label1">Tue</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 290px;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 3%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 5%;"
                            ></div>

                            <div class="label1">Wed</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 400px;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 3%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 5%;"
                            ></div>

                            <div class="label1">Wed</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 34.5%;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 17%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 5%;"
                            ></div>

                            <div class="label1">Thu</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 48.5%;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%); height: 28%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 20%;"
                            ></div>

                            <div class="label1">Fri</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 24.5%;"
                        >
                            <div
                                class="value1"
                                style="background-color: rgb(255 51 107 / 78%);; height: 7%;"
                            ></div>

                            <div
                                class="value1"
                                style="background-color: #333; height: 3%;"
                            ></div>

                            <div class="label1">Sat</div>
                        </div>
                    </div>
                </div>

                <div class="x-axis">
                    <div>0</div>

                    <div>8</div>

                    <div>12</div>

                    <div>16</div>

                    <div>20</div>
                </div>
            </div>
        </div>

        <div class="barchart">
            <div class="barchart">
                <h2>Day Wise Analysis</h2>

                <div class="chart-container">
                    <div class="y-axis">
                        <div>50</div>

                        <div>45</div>

                        <div>40</div>

                        <div>35</div>

                        <div>30</div>

                        <div>25</div>

                        <div>20</div>

                        <div>15</div>

                        <div>10</div>

                        <div>5</div>

                        <div>0</div>
                    </div>

                    <div class="chart">
                        <div
                            class="bar"
                            style="height: 500px;"
                        >
                            <div
                                class="value"
                                style="background-color: rgb(255 51 107 / 78%); height: 7%;"
                            ></div>

                            <div
                                class="value"
                                style="background-color: #333; height: 10%;"
                            ></div>

                            <div class="label">Sun</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 500px;"
                        >
                            <div
                                class="value"
                                style="background-color: rgb(255 51 107 / 78%); height: 12%;"
                            ></div>

                            <div
                                class="value"
                                style="background-color: #333; height: 30%;"
                            ></div>

                            <div class="label">Mon</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 300px;"
                        >
                            <div
                                class="value"
                                style="background-color: rgb(255 51 107 / 78%); height: 19%;"
                            ></div>

                            <div
                                class="value"
                                style="background-color: #333; height: 29%;"
                            ></div>

                            <div class="label">Tue</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 272px;"
                        >
                            <div
                                class="value"
                                style="background-color: rgb(255 51 107 / 78%); height: 3%;"
                            ></div>

                            <div
                                class="value"
                                style="background-color: #333; height: 5%;"
                            ></div>

                            <div class="label">Wed</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 494px;"
                        >
                            <div
                                class="value"
                                style="background-color: rgb(255 51 107 / 78%); height: 17%;"
                            ></div>

                            <div
                                class="value"
                                style="background-color: #333; height: 5%;"
                            ></div>

                            <div class="label">Thu</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 48%;"
                        >
                            <div
                                class="value"
                                style="background-color: rgb(255 51 107 / 78%); height: 28%;"
                            ></div>

                            <div
                                class="value"
                                style="background-color: #333; height: 20%;"
                            ></div>

                            <div class="label">Fri</div>
                        </div>

                        <div
                            class="bar"
                            style="height: 400px;"
                        >
                            <div
                                class="value"
                                style="background-color: rgb(255 51 107 / 78%); height: 7%;"
                            ></div>

                            <div
                                class="value"
                                style="background-color: #333; height: 3%;"
                            ></div>

                            <div class="label">Sat</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="barchart1">
        <h2>Functionality wise</h2>

        <div class="chart-container">
            <div class="y-axis1">
                <div>20</div>

                <div>15</div>

                <div>10</div>

                <div>5</div>

                <div>0</div>
            </div>

            <div class="chart">
                <div
                    class="bar"
                    style="height: 900px;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 10%;"
                    ></div>

                    <div class="label1">Sun</div>
                </div>

                <div
                    class="bar"
                    style="height: 650px;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 3.5%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 10%;"
                    ></div>

                    <div class="label1">Sun</div>
                </div>

                <div
                    class="bar"
                    style="height: 450px;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 12%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 30%;"
                    ></div>

                    <div class="label1">Mon</div>
                </div>

                <div
                    class="bar"
                    style="height: 200px;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 12%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 30%;"
                    ></div>

                    <div class="label1">Mon</div>
                </div>

                <div
                    class="bar"
                    style="height: 28.5%;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 19%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 29%;"
                    ></div>

                    <div class="label1">Tue</div>
                </div>

                <div
                    class="bar"
                    style="height: 28.5%;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 19%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 29%;"
                    ></div>

                    <div class="label1">Tue</div>
                </div>

                <div
                    class="bar"
                    style="height: 290px;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 3%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 5%;"
                    ></div>

                    <div class="label1">Wed</div>
                </div>

                <div
                    class="bar"
                    style="height: 400px;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 3%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 5%;"
                    ></div>

                    <div class="label1">Wed</div>
                </div>

                <div
                    class="bar"
                    style="height: 34.5%;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 17%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 5%;"
                    ></div>

                    <div class="label1">Thu</div>
                </div>

                <div
                    class="bar"
                    style="height: 48.5%;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%); height: 28%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 20%;"
                    ></div>

                    <div class="label1">Fri</div>
                </div>

                <div
                    class="bar"
                    style="height: 24.5%;"
                >
                    <div
                        class="value1"
                        style="background-color: rgb(255 51 107 / 78%);; height: 7%;"
                    ></div>

                    <div
                        class="value1"
                        style="background-color: #333; height: 3%;"
                    ></div>

                    <div class="label1">Sat</div>
                </div>
            </div>
        </div>

        <div class="x-axis">
            <div>0</div>

            <div>8</div>

            <div>12</div>

            <div>16</div>

            <div>20</div>
        </div>
    </div>

    <!-- end bar chart -->
    <br>
    <!-- pie chart -->

    <div class="card-container1">
        <div class="carded">
            <figure class="pie-chart1">
                <p class="browser">DEVICE ANALYSIS</p>

                <figcaption>
                    Windows

                    <span style="color:#4e79a7"></span>
                    <br>
                    Mac

                    <span style="color:#f28e2c"></span>
                    <br>
                    Android

                    <span style="color:#e15759"></span>
                </figcaption>

                <cite>International Energy Agency</cite>
            </figure>
        </div>

        <div class="carded">
            <figure class="pie-chart">
                <p class="browser">BROWSER ANALYSIS</p>

                <figcaption>
                    Apple Safari

                    <span style="color:#4e79a7"></span>
                    <br>
                    Google Crome

                    <span style="color:#f28e2c"></span>
                </figcaption>
            </figure>
        </div>
    </div>

    <!-- end pie chart -->
    <br>
    <br>
    <!-- map chart -->

    <div class="analyse mb-3">
        <div class="sales">
            <h6>Countries - Top 10</h6>

            <div class="Countries">
                <p>India</p>

                <p>143(100%)</p>
            </div>

            <div class="progress-container">
                <div
                    class="progress-bar"
                    style="width: 100%;"
                ></div>
            </div>
        </div>

        <div class="sales">
            <h6>State (Country)- Top 10</h6>

            <div class="Countries">
                <p>Karnataka (IN)</p>

                <p>91(64%)</p>
            </div>

            <div class="progress-container">
                <div
                    class="progress-bar"
                    style="width: 64%;"
                ></div>
            </div>

            <div class="Countries">
                <p>Tamilnadu (IN)</p>

                <p>51(36%)</p>
            </div>

            <div class="progress-container">
                <div
                    class="progress-bar"
                    style="width: 36%;"
                ></div>
            </div>

            <div class="Countries">
                <p>Telugana (IN)</p>

                <p>91(1%)</p>
            </div>

            <div class="progress-container">
                <div
                    class="progress-bar"
                    style="width: 1%;"
                ></div>
            </div>
        </div>

        <div class="sales">
            <h6>Cities (State) - Top 10</h6>

            <div class="Countries">
                <p>Bengaluru (IN)</p>

                <p>91(64%)</p>
            </div>

            <div class="progress-container">
                <div
                    class="progress-bar"
                    style="width: 64%;"
                ></div>
            </div>

            <div class="Countries">
                <p>Chennai (IN)</p>

                <p>51(36%)</p>
            </div>

            <div class="progress-container">
                <div
                    class="progress-bar"
                    style="width: 36%;"
                ></div>
            </div>

            <div class="Countries">
                <p>karimanagar (IN)</p>

                <p>1(1%)</p>
            </div>

            <div class="progress-container">
                <div
                    class="progress-bar"
                    style="width: 1%;"
                ></div>
            </div>
        </div>
    </div>

    <!-- map chart end -->
    <!-- New Users Section -->
    {{--

    <div class="new-users">
        <h2>New Users</h2>

        <table
            class="table js-dataTable-full dataTable no-footer"
            id="DataTables_Table_0"
            role="grid"
            aria-describedby="DataTables_Table_0_info"
        >
            <thead>
                <tr role="row">
                    <th
                        class="sorting"
                        style="text-align: center;"
                        tabindex="0"
                        aria-controls="DataTables_Table_0"
                        rowspan="1"
                        colspan="1"
                        aria-label="Name: activate to sort column ascending"
                    >S.No</th>

                    <th
                        class="text-center sorting_asc"
                        style="text-align: center; width: 30%"
                        tabindex="0"
                        aria-controls="DataTables_Table_0"
                        rowspan="1"
                        colspan="1"
                        aria-sort="ascending"
                        aria-label="ID: activate to sort column descending"
                    >E-Commerce ID</th>

                    <th
                        class="sorting"
                        style="text-align: center;"
                        tabindex="0"
                        aria-controls="DataTables_Table_0"
                        rowspan="1"
                        colspan="1"
                        aria-label="Name: activate to sort column ascending"
                    >First Name</th>

                    <th
                        class="d-none d-sm-table-cell sorting"
                        style="text-align: center; width: 30%;"
                        tabindex="0"
                        aria-controls="DataTables_Table_0"
                        rowspan="1"
                        colspan="1"
                        aria-label="Email: activate to sort column ascending"
                    >Last Name</th>

                    <th
                        class="d-none d-sm-table-cell sorting"
                        style="text-align: center; width: 30%;"
                        tabindex="0"
                        aria-controls="DataTables_Table_0"
                        rowspan="1"
                        colspan="1"
                        aria-label="Email: activate to sort column ascending"
                    >Email</th>

                    <th
                        style="text-align: center; width: 15%;"
                        class="sorting"
                        tabindex="0"
                        aria-controls="DataTables_Table_0"
                        rowspan="1"
                        colspan="1"
                        aria-label="Registered: activate to sort column ascending"
                    >Option</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td
                        class="text-center font-size-sm sorting_1"
                        style="width: 5%;"
                    >{{ 1 }}</td>

                    <td
                        class="font-w600 font-size-sm"
                        style="width: 15%;"
                    >{{ 'CMHQ001' }}</td>

                    <td
                        class="font-w600 font-size-sm"
                        style="width: 15%;"
                    >{{ 'Charles' }}</td>

                    <td
                        class="d-none d-sm-table-cell font-size-sm"
                        style="width: 15%;"
                    >{{ 'kunda' }}</td>

                    <td
                        class="d-none d-sm-table-cell font-size-sm"
                        style="width: 20%;"
                    >{{ 'charles@ninosit.com' }}</td>

                    <td style="width: 10%;">
                        <div class="btn-group">
                            <div class="btn-group">
                                <a href="href">