<?php include 'header.php'; ?>

<div class="p-2">
    
    <div class="bg-white rounded-2xl p-6">
            <!-- Header -->
            <div class="flex items-center justify-between mb-8">
                <div>
                    <h1 class="text-2xl font-bold text-slate-900">Dashboard</h1>
                    <p class="text-slate-500 mt-2">
                        Welcome back, here's the overview of your products.
                    </p>
                </div>
            </div>
        
            <!-- Product Cards -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            
                <!-- PureEstate -->
                <div
                    class="bg-white rounded-2xl border border-blue-100 shadow-sm hover:shadow-md transition overflow-hidden">
            
                    <div class="h-1 bg-blue-600"></div>
            
                    <div class="p-4">
            
                        <!-- Header -->
                        <div class="flex items-center gap-3 mb-5">
            
                            <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
                                <i class="ri-home-5-line text-2xl text-blue-600"></i>
                            </div>
            
                            <div>
                                <h3 class="text-xl font-bold text-blue-600">
                                    PureEstate
                                </h3>
            
                                <span
                                    class="inline-block mt-1 px-2 py-1 bg-blue-50 text-blue-600 rounded-full text-xs">
                                    Real Estate CRM
                                </span>
                            </div>
            
                        </div>
            
                        <!-- Stats -->
                        <div class="grid grid-cols-3 gap-2">
            
                            <!-- Demo -->
                            <div class="text-center">
            
                                <div
                                    class="w-10 h-10 mx-auto rounded-lg bg-blue-50 flex items-center justify-center">
                                    <i class="ri-user-search-line text-lg text-blue-600"></i>
                                </div>
            
                                <p class="text-xs text-slate-500 mt-2">
                                    Demo
                                </p>
            
                                <h3 class="text-2xl font-bold text-slate-900">
                                    120
                                </h3>
            
                            </div>
            
                            <!-- Trial -->
                            <div class="text-center border-x border-slate-100">
            
                                <div
                                    class="w-10 h-10 mx-auto rounded-lg bg-orange-50 flex items-center justify-center">
                                    <i class="ri-time-line text-lg text-orange-500"></i>
                                </div>
            
                                <p class="text-xs text-slate-500 mt-2">
                                    Trial
                                </p>
            
                                <h3 class="text-2xl font-bold text-orange-500">
                                    75
                                </h3>
            
                            </div>
            
                            <!-- Paid -->
                            <div class="text-center">
            
                                <div
                                    class="w-10 h-10 mx-auto rounded-lg bg-green-50 flex items-center justify-center">
                                    <i class="ri-checkbox-circle-line text-lg text-green-600"></i>
                                </div>
            
                                <p class="text-xs text-slate-500 mt-2">
                                    Paid
                                </p>
            
                                <h3 class="text-2xl font-bold text-green-600">
                                    35
                                </h3>
            
                            </div>
            
                        </div>
            
                        <!-- Conversion -->
                        <div
                            class="mt-4 bg-blue-50 rounded-xl p-3 flex justify-between items-center">
            
                            <div>
                                <p class="text-xs text-slate-500">
                                    Conversion Rate
                                </p>
            
                                <h4 class="text-2xl font-bold text-blue-600">
                                    29.17%
                                </h4>
                            </div>
            
                            <i class="ri-line-chart-line text-2xl text-blue-600"></i>
            
                        </div>
            
                    </div>
            
                </div>
            
                <!-- BuilderPro -->
                <div
                    class="bg-white rounded-2xl border border-orange-100 shadow-sm hover:shadow-md transition overflow-hidden">
            
                    <div class="h-1 bg-orange-500"></div>
            
                    <div class="p-4">
            
                        <div class="flex items-center gap-3 mb-5">
            
                            <div class="w-12 h-12 rounded-xl bg-orange-50 flex items-center justify-center">
                                <i class="ri-building-2-line text-2xl text-orange-500"></i>
                            </div>
            
                            <div>
                                <h3 class="text-xl font-bold text-orange-500">
                                    BuilderPro
                                </h3>
            
                                <span
                                    class="inline-block mt-1 px-2 py-1 bg-orange-50 text-orange-500 rounded-full text-xs">
                                    Construction CRM
                                </span>
                            </div>
            
                        </div>
            
                        <div class="grid grid-cols-3 gap-2">
            
                            <div class="text-center">
                                <div class="w-10 h-10 mx-auto rounded-lg bg-blue-50 flex items-center justify-center">
                                    <i class="ri-user-search-line text-lg text-blue-600"></i>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Demo</p>
                                <h3 class="text-2xl font-bold text-slate-900">90</h3>
                            </div>
            
                            <div class="text-center border-x border-slate-100">
                                <div class="w-10 h-10 mx-auto rounded-lg bg-orange-50 flex items-center justify-center">
                                    <i class="ri-time-line text-lg text-orange-500"></i>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Trial</p>
                                <h3 class="text-2xl font-bold text-orange-500">55</h3>
                            </div>
            
                            <div class="text-center">
                                <div class="w-10 h-10 mx-auto rounded-lg bg-green-50 flex items-center justify-center">
                                    <i class="ri-checkbox-circle-line text-lg text-green-600"></i>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Paid</p>
                                <h3 class="text-2xl font-bold text-green-600">22</h3>
                            </div>
            
                        </div>
            
                        <div class="mt-4 bg-orange-50 rounded-xl p-3 flex justify-between items-center">
                            <div>
                                <p class="text-xs text-slate-500">Conversion Rate</p>
                                <h4 class="text-2xl font-bold text-orange-500">24.44%</h4>
                            </div>
                            <i class="ri-line-chart-line text-2xl text-orange-500"></i>
                        </div>
            
                    </div>
            
                </div>
            
                <!-- SocietyPro -->
                <div
                    class="bg-white rounded-2xl border border-green-100 shadow-sm hover:shadow-md transition overflow-hidden">
            
                    <div class="h-1 bg-green-600"></div>
            
                    <div class="p-4">
            
                        <div class="flex items-center gap-3 mb-5">
            
                            <div class="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center">
                                <i class="ri-community-line text-2xl text-green-600"></i>
                            </div>
            
                            <div>
                                <h3 class="text-xl font-bold text-green-600">
                                    SocietyPro
                                </h3>
            
                                <span
                                    class="inline-block mt-1 px-2 py-1 bg-green-50 text-green-600 rounded-full text-xs">
                                    Society Management
                                </span>
                            </div>
            
                        </div>
            
                        <div class="grid grid-cols-3 gap-2">
            
                            <div class="text-center">
                                <div class="w-10 h-10 mx-auto rounded-lg bg-blue-50 flex items-center justify-center">
                                    <i class="ri-user-search-line text-lg text-blue-600"></i>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Demo</p>
                                <h3 class="text-2xl font-bold text-slate-900">65</h3>
                            </div>
            
                            <div class="text-center border-x border-slate-100">
                                <div class="w-10 h-10 mx-auto rounded-lg bg-orange-50 flex items-center justify-center">
                                    <i class="ri-time-line text-lg text-orange-500"></i>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Trial</p>
                                <h3 class="text-2xl font-bold text-orange-500">40</h3>
                            </div>
            
                            <div class="text-center">
                                <div class="w-10 h-10 mx-auto rounded-lg bg-green-50 flex items-center justify-center">
                                    <i class="ri-checkbox-circle-line text-lg text-green-600"></i>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Paid</p>
                                <h3 class="text-2xl font-bold text-green-600">18</h3>
                            </div>
            
                        </div>
            
                        <div class="mt-4 bg-green-50 rounded-xl p-3 flex justify-between items-center">
                            <div>
                                <p class="text-xs text-slate-500">Conversion Rate</p>
                                <h4 class="text-2xl font-bold text-green-600">27.69%</h4>
                            </div>
                            <i class="ri-line-chart-line text-2xl text-green-600"></i>
                        </div>
            
                    </div>
            
                </div>
            
            </div>
        
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4 mt-4">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            
                    <!-- Total Demos -->
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
                            <i class="ri-user-search-line text-xl text-blue-600"></i>
                        </div>
                        <div>
                            <p class="text-xl text-slate-500">Total Demos</p>
                            <h3 class="text-2xl font-bold text-blue-600">275</h3>
                            <p class="text-sm text-slate-400">All Products</p>
                        </div>
                    </div>
            
                    <!-- Free Trials -->
                    <div class="flex items-center gap-3 md:border-l md:pl-6 border-slate-400">
                        <div class="w-12 h-12 rounded-full bg-orange-50 flex items-center justify-center">
                            <i class="ri-time-line text-xl text-orange-500"></i>
                        </div>
                        <div>
                            <p class="text-xl text-slate-500">Free Trials</p>
                            <h3 class="text-2xl font-bold text-orange-500">170</h3>
                            <p class="text-sm text-slate-400">All Products</p>
                        </div>
                    </div>
            
                    <!-- Paid Users -->
                    <div class="flex items-center gap-3 md:border-l md:pl-6 border-slate-400">
                        <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center">
                            <i class="ri-checkbox-circle-line text-xl text-green-600"></i>
                        </div>
                        <div>
                            <p class="text-xl text-slate-500">Paid Users</p>
                            <h3 class="text-2xl font-bold text-green-600">75</h3>
                            <p class="text-sm text-slate-400">All Products</p>
                        </div>
                    </div>
            
                    <!-- Conversion -->
                    <div class="flex items-center gap-3 md:border-l md:pl-6 border-slate-400">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center">
                            <i class="ri-line-chart-line text-xl text-purple-600"></i>
                        </div>
                        <div>
                            <p class="text-xl text-slate-500">Conversion</p>
                            <h3 class="text-2xl font-bold text-purple-600">27.27%</h3>
                            <p class="text-sm text-slate-400">Paid / Demo</p>
                        </div>
                    </div>
            
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
        
                <!-- PureEstate Revenue -->
                <div class="bg-white rounded-2xl border border-blue-100 p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-500">PureEstate Revenue</p>
                            <h3 class="text-3xl font-bold text-blue-600 mt-1">
                                ₹1,25,000
                            </h3>
                            <p class="text-xs text-slate-400 mt-1">
                                This Month
                            </p>
                        </div>
            
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
                            <i class="ri-money-rupee-circle-line text-2xl text-blue-600"></i>
                        </div>
                    </div>
                </div>
            
                <!-- BuilderPro Revenue -->
                <div class="bg-white rounded-2xl border border-orange-100 p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-500">BuilderPro Revenue</p>
                            <h3 class="text-3xl font-bold text-orange-500 mt-1">
                                ₹85,000
                            </h3>
                            <p class="text-xs text-slate-400 mt-1">
                                This Month
                            </p>
                        </div>
            
                        <div class="w-12 h-12 rounded-full bg-orange-50 flex items-center justify-center">
                            <i class="ri-money-rupee-circle-line text-2xl text-orange-500"></i>
                        </div>
                    </div>
                </div>
            
                <!-- SocietyPro Revenue -->
                <div class="bg-white rounded-2xl border border-green-100 p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-500">SocietyPro Revenue</p>
                            <h3 class="text-3xl font-bold text-green-600 mt-1">
                                ₹52,000
                            </h3>
                            <p class="text-xs text-slate-400 mt-1">
                                This Month
                            </p>
                        </div>
            
                        <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center">
                            <i class="ri-money-rupee-circle-line text-2xl text-green-600"></i>
                        </div>
                    </div>
                </div>
            
            </div>
<div class="bg-white rounded-2xl p-6 mt-4 border border-slate-200">

    <div class="flex items-center justify-between mb-6">

        <div>
            <h2 class="text-xl font-bold text-slate-800">
                Revenue Analytics
            </h2>
            <p class="text-sm text-slate-500">
                Monthly & Yearly Revenue Overview
            </p>
        </div>

        <div class="flex bg-slate-100 rounded-xl p-1">
            <button id="monthlyBtn"
                class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">
                Monthly
            </button>

            <button id="yearlyBtn"
                class="px-4 py-2 rounded-lg text-slate-600 text-sm font-medium">
                Yearly
            </button>
        </div>

    </div>

    <div id="revenueChart"></div>

</div>
        </div>
    
        <div class="mt-4 bg-white rounded-2xl p-6">
    
            <div class="flex items-center justify-between mb-8">
                <div>
                    <h2 class="text-2xl font-bold text-slate-800">
                        Accounts & Finance Dashboard
                    </h2>
                    <p class="text-sm text-slate-500">
                        Revenue, Sales, Ledger & Transaction Overview
                    </p>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
            
                <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Total Revenue</p>
                    <h2 class="text-3xl font-bold text-emerald-600">₹2,62,000</h2>
                </div>
            
                <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Outstanding</p>
                    <h2 class="text-3xl font-bold text-red-500">₹45,000</h2>
                </div>
            
                <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Cash Balance</p>
                    <h2 class="text-3xl font-bold text-blue-600">₹18,500</h2>
                </div>
            
                <div class="bg-white p-4 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Net Profit</p>
                    <h2 class="text-3xl font-bold text-green-600">₹82,000</h2>
                </div>
            
            </div>
            
            <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-200 mt-4">
        
                <div class="flex items-center justify-between mb-5">
                    <h3 class="font-semibold text-lg text-slate-800">
                        Sales Overview
                    </h3>
                </div>
            
                <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
            
                    <!-- Quotations -->
                    <div
                        class="bg-pink-50 rounded-xl p-4 text-center hover:shadow-sm transition">
                        <div class="w-10 h-10 mx-auto rounded-lg bg-white flex items-center justify-center mb-3">
                            <i class="ri-file-list-3-line text-pink-500 text-xl"></i>
                        </div>
            
                        <h4 class="text-3xl font-bold text-pink-500">125</h4>
                        <p class="text-sm text-slate-600 mt-1">
                            Quotations
                        </p>
                    </div>
            
                    <!-- PI -->
                    <div
                        class="bg-blue-50 rounded-xl p-4 text-center hover:shadow-sm transition">
                        <div class="w-10 h-10 mx-auto rounded-lg bg-white flex items-center justify-center mb-3">
                            <i class="ri-draft-line text-blue-500 text-xl"></i>
                        </div>
            
                        <h4 class="text-3xl font-bold text-blue-500">89</h4>
                        <p class="text-sm text-slate-600 mt-1">
                            PI
                        </p>
                    </div>
            
                    <!-- Sales Invoice -->
                    <div
                        class="bg-green-50 rounded-xl p-4 text-center hover:shadow-sm transition">
                        <div class="w-10 h-10 mx-auto rounded-lg bg-white flex items-center justify-center mb-3">
                            <i class="ri-bill-line text-green-600 text-xl"></i>
                        </div>
            
                        <h4 class="text-3xl font-bold text-green-600">62</h4>
                        <p class="text-sm text-slate-600 mt-1">
                            Sales Invoice
                        </p>
                    </div>
            
                    <!-- Credit Note -->
                    <div
                        class="bg-red-50 rounded-xl p-4 text-center hover:shadow-sm transition">
                        <div class="w-10 h-10 mx-auto rounded-lg bg-white flex items-center justify-center mb-3">
                            <i class="ri-arrow-go-back-line text-red-500 text-xl"></i>
                        </div>
            
                        <h4 class="text-3xl font-bold text-red-500">4</h4>
                        <p class="text-sm text-slate-600 mt-1">
                            Credit Note
                        </p>
                    </div>
            
                    <!-- Debit Note -->
                    <div
                        class="bg-orange-50 rounded-xl p-4 text-center hover:shadow-sm transition">
                        <div class="w-10 h-10 mx-auto rounded-lg bg-white flex items-center justify-center mb-3">
                            <i class="ri-arrow-go-forward-line text-orange-500 text-xl"></i>
                        </div>
            
                        <h4 class="text-3xl font-bold text-orange-500">2</h4>
                        <p class="text-sm text-slate-600 mt-1">
                            Debit Note
                        </p>
                    </div>
            
                </div>
            
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            
                <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Cash Book</p>
                    <h3 class="text-3xl font-bold text-cyan-600">
                        ₹12,500
                    </h3>
                </div>
            
                <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Bank Book</p>
                    <h3 class="text-3xl font-bold text-indigo-600">
                        ₹1,24,000
                    </h3>
                </div>
            
                <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Outstanding</p>
                    <h3 class="text-3xl font-bold text-red-500">
                        ₹45,000
                    </h3>
                </div>
            
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
        
                <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Receipts Today</p>
                    <h3 class="text-3xl font-bold text-green-600">
                        ₹15,000
                    </h3>
                </div>
            
                <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Payments Today</p>
                    <h3 class="text-3xl font-bold text-orange-500">
                        ₹8,500
                    </h3>
                </div>
            
                <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200">
                    <p class="text-sm text-slate-500">Expenses Today</p>
                    <h3 class="text-3xl font-bold text-red-500">
                        ₹3,200
                    </h3>
                </div>
            
            </div>
        </div>
        
    <div class="bg-white rounded-2xl border border-slate-200 p-4 mt-4">
    
        <h3 class="text-2xl font-semibold text-slate-800 mb-4">
            Complaint Management
        </h3>
    
        <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
    
            <!-- Total -->
            <div class="bg-blue-50 rounded-xl p-3 flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                    <i class="ri-file-list-3-line text-blue-600 text-xl"></i>
                </div>
    
                <div>
                    <h4 class="text-2xl font-bold text-blue-600">245</h4>
                    <p class="text-xs text-slate-500">Total</p>
                </div>
            </div>
    
            <!-- Open -->
            <div class="bg-orange-50 rounded-xl p-3 flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                    <i class="ri-error-warning-line text-orange-500 text-xl"></i>
                </div>
    
                <div>
                    <h4 class="text-2xl font-bold text-orange-500">38</h4>
                    <p class="text-xs text-slate-500">Open</p>
                </div>
            </div>
    
            <!-- In Progress -->
            <div class="bg-amber-50 rounded-xl p-3 flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                    <i class="ri-loader-4-line text-amber-500 text-xl"></i>
                </div>
    
                <div>
                    <h4 class="text-2xl font-bold text-amber-500">21</h4>
                    <p class="text-xs text-slate-500">In Progress</p>
                </div>
            </div>
    
            <!-- Resolved -->
            <div class="bg-green-50 rounded-xl p-3 flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                    <i class="ri-checkbox-circle-line text-green-600 text-xl"></i>
                </div>
    
                <div>
                    <h4 class="text-2xl font-bold text-green-600">175</h4>
                    <p class="text-xs text-slate-500">Resolved</p>
                </div>
            </div>
    
            <!-- Closed -->
            <div class="bg-cyan-50 rounded-xl p-3 flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                    <i class="ri-lock-line text-cyan-600 text-xl"></i>
                </div>
    
                <div>
                    <h4 class="text-2xl font-bold text-cyan-600">11</h4>
                    <p class="text-xs text-slate-500">Closed</p>
                </div>
            </div>
    
        </div>
    
    </div>
    
</div>

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

<script>

const monthlyData = [
    125000, 138000, 152000, 146000,
    165000, 182000, 175000, 194000,
    205000, 214000, 225000, 240000
];

const yearlyData = [
    1200000,
    1850000,
    2400000,
    3100000,
    3850000
];

const monthlyCategories = [
    "Jan","Feb","Mar","Apr","May","Jun",
    "Jul","Aug","Sep","Oct","Nov","Dec"
];

const yearlyCategories = [
    "2021","2022","2023","2024","2025"
];

let chart;

function renderChart(type = "monthly") {

    const data =
        type === "monthly"
        ? monthlyData
        : yearlyData;

    const categories =
        type === "monthly"
        ? monthlyCategories
        : yearlyCategories;

    if (chart) {
        chart.destroy();
    }

    chart = new ApexCharts(
        document.querySelector("#revenueChart"),
        {
            series: [{
                name: "Revenue",
                data: data
            }],

            chart: {
                type: "area",
                height: 350,
                toolbar: {
                    show: false
                }
            },

            stroke: {
                curve: "smooth",
                width: 3
            },

            dataLabels: {
                enabled: false
            },

            fill: {
                type: "gradient",
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.45,
                    opacityTo: 0.1
                }
            },

            xaxis: {
                categories: categories
            },

            yaxis: {
                labels: {
                    formatter: function(value) {
                        return "₹" + value.toLocaleString();
                    }
                }
            },

            tooltip: {
                y: {
                    formatter: function(value) {
                        return "₹" + value.toLocaleString();
                    }
                }
            }
        }
    );

    chart.render();
}

/* Default Monthly */
renderChart("monthly");

/* Monthly Button */
document.getElementById("monthlyBtn")
.addEventListener("click", function() {

    renderChart("monthly");

    this.classList.add(
        "bg-blue-600",
        "text-white"
    );

    document.getElementById("yearlyBtn")
    .classList.remove(
        "bg-blue-600",
        "text-white"
    );

});

/* Yearly Button */
document.getElementById("yearlyBtn")
.addEventListener("click", function() {

    renderChart("yearly");

    this.classList.add(
        "bg-blue-600",
        "text-white"
    );

    document.getElementById("monthlyBtn")
    .classList.remove(
        "bg-blue-600",
        "text-white"
    );

});

</script>


<?php include 'footer.php'; ?>