<?php
// Include necessary files
require_once("includes/html-header.php");
?>

<body class="gran">
    <!-- Body Wrapper -->
    <div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed">
        <?php
        require_once("includes/sidebar.php");
        ?>
        <div class="body-wrapper">
            <?php
            require_once("includes/header.php");
            ?>

            <div class="container-fluid">
               <!-- Notice Section -->
                <marquee
                    class="alert alert-dark"
                    role="alert"
                    onmouseover="this.stop()"
                    onmouseout="this.start()"
                    style="background-color: black; color: red; font-size: 1.2rem; font-weight: bold;">
                    <?php
                    $noticeQuery = $dbh->query("SELECT notice FROM notice LIMIT 1");
                    echo $noticeQuery ? htmlspecialchars($noticeQuery->fetchColumn()) : "No notices available.";
                    ?>
                </marquee>
                <!-- End Notice Section -->

                <!-- Panel Section -->
                <div class="row justify-content-center mt-4">
                    <div class="col-md-3 col-sm-6 mb-4">
                        <div class="counter">
                            <div class="counter-icon">
                                <span><i class="fa fa-balance-scale"></i></span>
                            </div>
                            <h3>Balance</h3>
                            <span class="counter-value"><?php echo htmlentities($bbbb); ?></span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 mb-4">
                        <div class="counter brown">
                            <div class="counter-icon">
                                <span><i class="fa fa-file-signature"></i></span>
                            </div>
                            <h3>Approved Sign</h3>
                            <span class="counter-value">
                                <?php
                                $sql = "SELECT COUNT(*) AS total_orders
                                    FROM signcopy_sub
                                    WHERE Sub_by = :email AND status = 2";
                                $query = $dbh->prepare($sql);
                                $query->bindParam(':email', $_SESSION['alogin'], PDO::PARAM_STR);
                                $query->execute();
                                $result = $query->fetch(PDO::FETCH_OBJ);
                                echo htmlentities($result->total_orders);
                                ?>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 mb-4">
                        <div class="counter purple">
                            <div class="counter-icon">
                                <span><i class="fa fa-certificate"></i></span>
                            </div>
                            <h3>Approved TIN Certificates</h3>
                            <span class="counter-value">
                                <?php
                                $sql = "SELECT COUNT(*) AS total_orders
                                    FROM tin_sub
                                    WHERE Sub_by = :email AND status = 2";
                                $query = $dbh->prepare($sql);
                                $query->bindParam(':email', $_SESSION['alogin'], PDO::PARAM_STR);
                                $query->execute();
                                $result = $query->fetch(PDO::FETCH_OBJ);
                                echo htmlentities($result->total_orders);
                                ?>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 mb-4">
                        <div class="counter green">
                            <div class="counter-icon">
                                <span><i class="fa fa-fingerprint"></i></span>
                            </div>
                            <h3>Approved Sim Biometrics</h3>
                            <span class="counter-value">
                                <?php
                                $sql = "SELECT COUNT(*) AS total_orders
                                    FROM biocopy_sub
                                    WHERE Sub_by = :email AND status = 2";
                                $query = $dbh->prepare($sql);
                                $query->bindParam(':email', $_SESSION['alogin'], PDO::PARAM_STR);
                                $query->execute();
                                $result = $query->fetch(PDO::FETCH_OBJ);
                                echo htmlentities($result->total_orders);
                                ?>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Second Row Panel Section -->
                <div class="row justify-content-center mt-4">
                    <div class="col-md-3 col-sm-6 mb-4">
                        <div class="counter">
                            <div class="counter-icon">
                                <span><i class="fa fa-file-pdf"></i></span>
                            </div>
                            <h3>Approved NID PDF</h3>
                            <span class="counter-value">
                                <?php
                                $sql = "SELECT COUNT(*) AS total_orders
                                    FROM nid_sub
                                    WHERE Sub_by = :email AND status = 2";
                                $query = $dbh->prepare($sql);
                                $query->bindParam(':email', $_SESSION['alogin'], PDO::PARAM_STR);
                                $query->execute();
                                $result = $query->fetch(PDO::FETCH_OBJ);
                                echo htmlentities($result->total_orders);
                                ?>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- Scripts -->
    <script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/sidebarmenu.js"></script>
    <script src="assets/js/app.min.js"></script>
    <script src="assets/libs/simplebar/dist/simplebar.js"></script>

    <!-- Counter Animation Script -->
    <script>
    window.onload = function() {
        $(".counter-value").each(function(){
            $(this).prop("Counter",0).animate({
                Counter: $(this).text()
            }, {
                duration: 3500,
                easing: "swing",
                step: function (now){
                    $(this).text(Math.ceil(now));
                }
            });
        });
    }
    </script>
</body>
</html>

<style>
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
:root{
    --white: #fff;
    --color1: #fd91e8;
    --color2: #fa2a89;
}

.counter{
    color: var(--color2);
    background: linear-gradient(to right,var(--color1),var(--color2));
    font-family: "Hind", sans-serif;
    text-align: center;
    width: 100%;
    max-width: 200px;
    height: 200px;
    border-radius: 100px 100px;
    padding: 44px 10px;
    position: relative;
    margin: 0 auto;
    z-index: 1;
}
.counter:before,
.counter:after{
    content:"";
    background: #ECEBE9;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 100px 100px;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 26px 58px 0 rgba(0, 0, 0, .22), 0 5px 14px 0 rgba(0, 0, 0, .18);
    z-index: -1;
}
.counter:after{
    background: #EAEAEA;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}
.counter .counter-icon{
    font-size: 30px;
    line-height: 30px;
    margin: 0 0 15px;
}
.counter h3{
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 10px;
}
.counter h3:before{
    content: "";
    background: var(--color1);
    width: 20px;
    height: 20px;
    transform: rotate(102deg);
    position: absolute;
    bottom: 35px;
    left: 7px;
    transition: all 0.3s ease-in-out;
    z-index: -2;
}
.counter .counter-value{
    font-size: 33px;
    font-weight: 600;
    line-height: 33px;
    display: block;
}
.counter.brown{
    --color1: #f67777;
    --color2: #842828;
}
.counter.purple{
    --color1:#bf63dc;
    --color2:#7316b8;
}
.counter.green{
    --color1: #08d5ac;
    --color2: #057e6c;
}

@media screen and (max-width: 1200px) {
    .counter {
        max-width: 180px;
    }
}

@media screen and (max-width: 768px) {
    .counter {
        max-width: 150px;
    }
}

@media screen and (max-width: 576px) {
    .counter {
        max-width: 130px;
    }
    .counter h3 {
        font-size: 16px;
    }
    .counter .counter-value {
        font-size: 28px;
    }
}
</style>
