{{>adminheader}}
<title>Dashboard</title>



<style>
    .card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 80%;
        max-width: 500px;
        margin: 20px auto;
        text-align: center;
    }

    .card h1 {
        margin-bottom: 20px;
        color: #333;
    }

    #chartContainer {
        width: 80%;
        margin: auto;
    }

    #chartContainer1 {
        width: 80%;
        margin: auto;
    }

    canvas {
        max-width: 700px;
        max-height: 400px;
    }

    .card1 {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 80%;
        max-width: 800px;
        margin: 20px auto;
        text-align: center;
        border: 0px solid #2c9686;
    }
</style>

<div class="row p-3" style="margin: 0px !important;">
    <div class="col-sm-3 col-6">
        <div class="small-box">
            <div class="inner">
                <h3 class="headers" id="ourstat">{{promotion}}</h3>
                <h2 class="headers">Events</h2>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="/admin/events" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-sm-3 col-6">
        <div class="small-box">
            <div class="inner">
                <h3 class="headers" id="ourteam">{{event}}</h3>
                <h2 class="headers">Promotions</h2>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="/admin/promotions" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-sm-3 col-6">
        <div class="small-box">
            <div class="inner">
                <h3 class="headers" id="phlebotomyservice">{{user}}</h3>
                <h2 class="headers">Users</h2>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="/admin/users" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-sm-3 col-6">
        <div class="small-box">
            <div class="inner">
                <h3 class="headers" id="careers">{{suscribedusers}}</h3>
                <h2 class="headers">Subscribed Users</h2>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="/admin/subscriberusers" class="small-box-footer">More info <i
                    class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-sm-3 col-6">
        <div class="small-box">
            <div class="inner">
                <h3 class="headers" id="careers1">{{subscription}}</h3>
                <h2 class="headers">Subscriptions</h2>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="/admin/subscriptions" class="small-box-footer">More info <i
                    class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-sm-3 col-6">
        <div class="small-box">
            <div class="inner">
                <h3 class="headers" id="contact">{{ourEvent}}</h3>
                <h2 class="headers">User Events</h2>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="/admin/userevents" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-sm-3 col-6">
        <div class="small-box">
            <div class="inner">
                <h3 class="headers" id="settings">{{setting}}</h3>
                <h2 class="headers">Settings</h2>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="/admin/termsandcondition" class="small-box-footer">More info <i
                    class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="card">
        <h3><b>Subscribers</b></h3>
        <div id="chartContainer">
            <canvas id="myPieChart"></canvas>
        </div>
    </div>
    <div class="card"
        style="max-width: 600px; margin: 20px auto; padding: 20px; border: 0px solid #ddd; border-radius: 10px; background-color: #fff;">
        <h5 style="text-align: center; font-size: 1.5rem; margin-bottom: 20px; color: #333;"><b>Send Message to All</b></h5>
        <form action="/admin/test" method="POST" style="display: flex; flex-direction: column; gap: 15px;">
            <div>
                <input type="text" name="title" placeholder="Title" minlength="10" maxlength="30"
                    style="width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 5px; " required>
            </div>
            <div>
                <textarea name="desc" rows="6" placeholder="Description" minlength="20" maxlength="100"
                    style="width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 5px;" required></textarea>
            </div>
            <button type="submit"
                style="padding: 10px; font-size: 1rem; color: #fff; background-color: #f06037; border: none; border-radius: 5px; cursor: pointer;">Send To All</button>
        </form>
    </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>
    const ctx1 = document.getElementById('myPieChart').getContext('2d');

    // Data for the chart
    const pieData = {
        labels: ['Subscriber', 'Non-Subscriber'],
        datasets: [{
            data: [{{ suscribedusers }}, {{ user }}], // Replace with dynamic data if needed
        backgroundColor: [
            '#FF6384', // Red
            '#36A2EB' // Blue
        ],
        hoverBackgroundColor: [
            '#FF4364',
            '#238FDB'
        ],
        borderWidth: 2
        }]
    };

    // Configuration for the chart
    const pieConfig = {
        type: 'pie',
        data: pieData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        color: '#333', // Text color for legend
                        font: {
                            size: 14
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                    callbacks: {
                        label: function (tooltipItem) {
                            const dataset = tooltipItem.dataset;
                            const currentValue = dataset.data[tooltipItem.dataIndex];
                            const total = dataset.data.reduce((acc, val) => acc + val, 0);
                            const percentage = ((currentValue / total) * 100).toFixed(1);
                            return `${tooltipItem.label}: ${currentValue} (${percentage}%)`;
                        }
                    }
                },
                datalabels: {
                    formatter: (value, ctx) => {
                        let total = ctx.dataset.data.reduce((a, b) => a + b, 0);
                        let percentage = ((value / total) * 100).toFixed(1) + "%";
                        return percentage;
                    },
                    color: '#fff',
                    font: {
                        size: 16
                    }
                }
            }
        }
    };

    // Initialize the chart
    const myPieChart1 = new Chart(ctx1, pieConfig);
</script>






<script>
    // Function to animate the number values
    function animateValue(id, start, end, duration) {
        const obj = document.getElementById(id);
        let startTimestamp = null;

        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            obj.innerHTML = Math.floor(progress * (end - start) + start);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };

        window.requestAnimationFrame(step);
    }

    // When the page is fully loaded, animate all the numbers
    window.onload = function () {
        setTimeout(() => {
            animateValue("ourstat", 0, {{ promotion }}, 1000);
        animateValue("ourteam", 0, {{ event }}, 1000);
    animateValue("phlebotomyservice", 0, {{ user }}, 1000);
    animateValue("careers", 0, {{ suscribedusers }}, 1000);
    animateValue("careers1", 0, {{ subscription }}, 1000);
    animateValue("contact", 0, {{ ourEvent }}, 1000);
    animateValue("settings", 0, {{ setting }}, 1000);
        }, 1000);
    };
</script>
{{>adminfooter}}
</body>

</html>