<?php $this->load->view('admin/includes/head'); ?>
<?php $this->load->view('admin/includes/sidebar'); ?>
<?php $this->load->view('admin/includes/topbar'); ?>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.3.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="<?= base_url('admin_assets/css/dashboard-card.css') ?>">
<div class="container">

    <div class="row">
        <!-- <h2 class="text-center mt-4">Hello <?= $this->session->userdata('refDataName'); ?>, Welcome To The Devotee Dashboard</h2>

		
		<?php if (@$userDetails->isMember == 1 && @$userDetails->membershipStatus == 'ACTIVE' && @$userDetails->membershipPaymentStatus == 'COMPLETED') { ?>
			
			<div class="row justify-content-center">    
				<div class="col-sm-6 col-md-6">
					<div class="text-center">
						<img src="<?= base_url('assets/img/membership/medal-bronze.svg'); ?>" alt="" class="img-fluid w-50">
						<h4 class="mt-3"><?= getCurrencySymbol() . ' ' . price_format(@$userDetails->membershipAmount, 2); ?> <?= @$userDetails->membershipType; ?></h4>
						<p class="mb-2"><?= @$userDetails->membershipDetail; ?></p>
						<hr>
						<a href="<?= base_url('membership-form'); ?>" class="btn btn-primary"><i class="fa fa-level-up"></i> Upgrade Membership</a>
					</div>
				</div>

			</div>
		<?php } ?> -->

        <!-- 
		<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
		<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>


	</div>
</div> -->
        <!-- End Main content-->

        <div class="col-sm-12 mt-3">

            <h2 class="">Namaskaram <?= ucwords($this->session->userdata('refDataName')); ?>, Welcome To The Devotee Dashboard</h2>
            <div class="header-body mt-4">
                <div class="row">
                    <div class="col-sm-4 col-md-4 col-xl-4 col-lg-4 mb-3">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body" style="background-color: #ffd8d8!important;">
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                            <img src="<?= base_url('admin_assets/img/icons/book-a-service-icon.png') ?>" height="30px" style="vertical-align: middle!important;">
                                        </div>
                                    </div>
                                    <div class="col p-0">
                                        <h4 class="card-title text-center text-uppercase text-black mb-0">My Bookings </h4>
                                        <p class="text-center"> <span class="h1 font-weight-bold mb-0" id="bookingCount">00</span></p>
                                    </div>

                                </div>

                                <p class="mt-3 mb-0 text-muted text-sm" style="font-size: 16px;">
                                    <a class="text-dark" href="<?= base_url('admin/in-temple-bookings') ?>">View <i class="fa fa-arrow-right"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-md-4 col-xl-4 col-lg-4 mb-3">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body" style="background-color: #d8ebff !important">
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                            <img src="<?= base_url('admin_assets/img/icons/book-a-service-icon.png') ?>" height="30px" style="vertical-align: middle!important;">
                                        </div>
                                    </div>
                                    <div class="col p-0">
                                        <h4 class="card-title text-center text-uppercase text-black mb-0">Facilities Bookings </h4>
                                        <p class="text-center"> <span class="h1 font-weight-bold mb-0" id="facilityBookingCount">00</span></p>
                                    </div>

                                </div>

                                <p class="mt-3 mb-0 text-muted text-sm" style="font-size: 16px;">
                                    <a class="text-dark" href="<?= base_url('admin/facilities-bookings') ?>">View <i class="fa fa-arrow-right"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>


                    <div class="col-sm-4 col-md-4 col-xl-4 col-lg-4 mb-3">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body" style="background-color: #ffb3a1!important;">
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                                            <img src="<?= base_url('admin_assets/img/icons/donation-icon.png') ?>" height="30px" style="vertical-align: middle!important;">
                                        </div>
                                    </div>
                                    <div class="col p-0">
                                        <h4 class="card-title text-center text-uppercase text-black mb-0">my donations</h4>
                                        <p class="text-center"> <span class="h1 font-weight-bold mb-0" id="donationCount">00</span></p>
                                    </div>

                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <a class="" style="color:#400303;" href="<?= base_url('admin/my-donations') ?>">View <i class="fa fa-arrow-right"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4 col-md-4 col-xl-4 col-lg-4 mb-3">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body" style="background-color: #ffb3a1!important;">
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                                            <img src="<?= base_url('admin_assets/img/icons/donation-icon.png') ?>" height="30px" style="vertical-align: middle!important;">
                                        </div>
                                    </div>
                                    <div class="col p-0">
                                        <h4 class="card-title text-center text-uppercase text-black mb-0">my Sponsors</h4>
                                        <p class="text-center"> <span class="h1 font-weight-bold mb-0" id="sponsorCount">00</span></p>
                                    </div>

                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <a class="" style="color:#400303;" href="<?= base_url('admin/my-sponsors') ?>">View <i class="fa fa-arrow-right"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>


                    <div class="col-sm-4 col-md-4 col-xl-4 col-lg-4 mb-3">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body" style="background-color: #bb96ff!important;">
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="icon icon-shape text-white rounded-circle shadow" style="background-color: #d4c7ec;">

                                            <img src="<?= base_url('admin_assets/img/icons/payments-icon.png') ?>" height="30px" style="vertical-align: middle!important;">
                                        </div>
                                    </div>
                                    <div class="col p-0">
                                        <h4 class="card-title text-center text-uppercase text-black mb-0">My payments</h4>
                                        <p class="text-center"> <span class="h1 font-weight-bold mb-0" id="paymentsCount">00</span></p>
                                    </div>

                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <a class="text-dark" href="<?= base_url('admin/my-payments') ?>">View <i class="fa fa-arrow-right"></i></a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-sm-4 col-md-4 col-xl-4 col-lg-4 mb-3">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body" style="background-color: #ffbc59!important;">
                                <div class="row">
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                                            <img src="<?= base_url('admin_assets/img/icons/donation-icon.png') ?>" height="30px" style="vertical-align: middle!important;">
                                        </div>
                                    </div>
                                    <div class="col p-0">
                                        <h4 class="card-title text-center text-uppercase text-black mb-0">recurring donations</h4>
                                        <p class="text-center"> <span class="h1 font-weight-bold mb-0" id="recurringdonationCount">00</span></p>
                                    </div>

                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <a class="" style="color:#400303;" href="<?= base_url('admin/my-recurring-donations') ?>">View <i class="fa fa-arrow-right"></i></a>
                                </p>
                            </div>
                        </div>
                    </div> -->
                </div>

            </div>


        </div>

        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>


    </div>
</div>
<!-- End Main content-->

<!-- <?php //$this->load->view('admin/includes/footer'); 
        ?>
<script type="text/javascript">
	$(document).ready(function() {
    // Check if the alert has been shown before
    if (!localStorage.getItem('alertShown')) {
        $("#heading").text('Devotee Dashboard');
        // Show the alert
        Swal.fire({
            title: 'Would you like to review and update your personal details?',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'YES',
            denyButtonText: `CANCEL`,
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "<?= base_url('admin/update-profile'); ?>";
            } else if (result.isDenied) {
                // Handle deny action if needed
            }
        });
        // Set a flag in localStorage to indicate that the alert has been shown
        localStorage.setItem('alertShown', 'true');
    }
}); -->


<?php $this->load->view('admin/includes/footer'); ?>
<script type="text/javascript">
    $(document).ready(function() {
        // Check if the alert has been shown before
        $("#heading").text('Devotee Dashboard');

        if (!localStorage.getItem('alertShown')) {
            // Show the alert
            Swal.fire({
                title: 'Would you like to review and update your personal details?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'YES',
                denyButtonText: `CANCEL`,
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = "<?= base_url('admin/update-profile'); ?>";
                } else if (result.isDenied) {
                    // Handle deny action if needed
                }
            });
            // Set a flag in localStorage to indicate that the alert has been shown
            localStorage.setItem('alertShown', 'true');
        }
    });

    $(document).ready(function() {
        // Function to format numbers with leading zero if less than 10
        function formatWithLeadingZero(number) {
            return number < 10 ? '0' + number : number;
        }

        // Function to animate the donation count
        function animateDonationCount(id, start, end, duration) {
            let range = end - start;
            let current = start;
            let increment = end > start ? 1 : 0;
            let stepTime = Math.abs(Math.floor(duration / range));

            let timer = setInterval(function() {
                current += increment;
                $(id).text(formatWithLeadingZero(current));
                if (current == end) {
                    clearInterval(timer);
                }
            }, stepTime);
        }

        // Assuming your PHP gives this donationCount as a dynamic value
         // Assuming your PHP gives this donationCount as a dynamic value
        let donationCount = <?= $donationCount ?>;
        let bookingCount = <?= $bookingCount ?>;
        let paymentsCount = <?= $paymentsCount ?>;
        let facilityBookingCount = <?= $facilityBookingCount ?>;
        let recurringdonationCount = <?= $recurringDonationCount ?>;
        let sponsorCount = <?= $sponsorCount ?>;

        // Call the function to animate donation count from 0 to the donationCount value
        animateDonationCount('#donationCount', 0, donationCount, 2000);
        animateDonationCount('#bookingCount', 0, bookingCount, 2000);
        animateDonationCount('#facilityBookingCount', 0, facilityBookingCount, 2000);
        animateDonationCount('#paymentsCount', 0, paymentsCount, 2000);
        // animateDonationCount('#recurringdonationCount', 0, recurringdonationCount, 2000);
        animateDonationCount('#sponsorCount', 0, sponsorCount, 2000);
    });
</script>
</body>

</html>








<!-- </script>
</body>
</html> -->