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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Marketing Dashboard</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Remix Icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

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

    <style>
        .metric-card {
            border: 1px solid #eef2f7;
            border-radius: 14px;
            background: #ffffff;
            transition: 0.3s;
        }

        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
        }

        .metric-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .up {
            color: #16a34a;
            font-size: 12px;
            font-weight: 700;
        }

        .section-card {
            border: 1px solid #edf1f7;
            border-radius: 16px;
            background: #ffffff;
        }

        .mini-metric {
            border-right: 1px solid #f1f5f9;
            padding-right: 14px;
        }

        .mini-metric:last-child {
            border-right: none;
            padding-right: 0;
        }

        .table-head {
            background: #f8fafc;
        }

        .tag-upcoming {
            background: #fff3e8;
            color: #db8a2e;
            font-weight: 700;
            font-size: 12px;
            border-radius: 999px;
            padding: 4px 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body class="bg-slate-50 min-h-screen">

<div class="w-full max-w-[1600px] mx-auto px-3 sm:px-5 lg:px-6 xl:px-8 py-4 sm:py-6">

        <!-- TOP CARDS -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4">

            <div class="metric-card p-4">
                <div class="flex items-start justify-between">
                    <div class="metric-icon bg-blue-50 text-blue-600">
                        <i class="ri-team-line"></i>
                    </div>

                    <span class="up">
                        <i class="ri-arrow-up-line"></i> 12%
                    </span>
                </div>

                <p class="text-[12px] text-slate-500 mt-4 font-semibold">
                    Total SMM Clients
                </p>

                <p class="text-[30px] font-bold text-slate-800 leading-tight mt-1">
                    32
                </p>
            </div>

            <div class="metric-card p-4">
                <div class="flex items-start justify-between">
                    <div class="metric-icon bg-emerald-50 text-emerald-600">
                        <i class="ri-calendar-check-line"></i>
                    </div>

                    <span class="up">
                        <i class="ri-arrow-up-line"></i> 8%
                    </span>
                </div>

                <p class="text-[12px] text-slate-500 mt-4 font-semibold">
                    Active SMM Packages
                </p>

                <p class="text-[30px] font-bold text-slate-800 leading-tight mt-1">
                    28
                </p>
            </div>

            <div class="metric-card p-4">
                <div class="flex items-start justify-between">
                    <div class="metric-icon bg-amber-50 text-amber-600">
                        <i class="ri-user-star-line"></i>
                    </div>

                    <span class="up">
                        <i class="ri-arrow-up-line"></i> 15%
                    </span>
                </div>

                <p class="text-[12px] text-slate-500 mt-4 font-semibold">
                    Total SEO Clients
                </p>

                <p class="text-[30px] font-bold text-slate-800 leading-tight mt-1">
                    25
                </p>
            </div>

            <div class="metric-card p-4">
                <div class="flex items-start justify-between">
                    <div class="metric-icon bg-teal-50 text-teal-600">
                        <i class="ri-pie-chart-2-line"></i>
                    </div>

                    <span class="up">
                        <i class="ri-arrow-up-line"></i> 10%
                    </span>
                </div>

                <p class="text-[12px] text-slate-500 mt-4 font-semibold">
                    Active SEO Plans
                </p>

                <p class="text-[30px] font-bold text-slate-800 leading-tight mt-1">
                    21
                </p>
            </div>

            <div class="metric-card p-4">
                <div class="flex items-start justify-between">
                    <div class="metric-icon bg-indigo-50 text-indigo-600">
                        <i class="ri-money-rupee-circle-line"></i>
                    </div>

                    <span class="up">
                        <i class="ri-arrow-up-line"></i> 18%
                    </span>
                </div>

                <p class="text-[12px] text-slate-500 mt-4 font-semibold">
                    Monthly Revenue
                </p>

                <p class="text-[30px] font-bold text-slate-800 leading-tight mt-1">
                    ₹4,85,000
                </p>
            </div>

        </div>

        <!-- MAIN GRID -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mt-6">

            <!-- LEFT -->
            <div class="2xl:col-span-12 space-y-6 min-w-0">

                <!-- SMM PERFORMANCE -->
                <div class="section-card p-5 sm:p-6">

                    <h2 class="text-xl font-bold text-slate-800 mb-6">
                        SMM Performance (May 2025)
                    </h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-5">

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-blue-50 text-blue-600">
                                    <i class="ri-calendar-event-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Posts Published
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                128
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 12%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-violet-50 text-violet-600">
                                    <i class="ri-instagram-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Reels Published
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                48
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 8%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-emerald-50 text-emerald-600">
                                    <i class="ri-line-chart-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Graphics Designed
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                76
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 15%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-rose-50 text-rose-500">
                                    <i class="ri-megaphone-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Ads Run
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                24
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 20%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-indigo-50 text-indigo-500">
                                    <i class="ri-radar-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Total Reach
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                2.45M
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 10%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-red-50 text-red-500">
                                    <i class="ri-focus-3-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Total Engagement
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                185K
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 22%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-amber-50 text-amber-500">
                                    <i class="ri-notification-3-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Profile Visits
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                32,450
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 17%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-pink-50 text-pink-500">
                                    <i class="ri-user-add-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    New Followers
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                8,250
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 19%
                            </p>
                        </div>

                    </div>

                </div>

                <!-- SEO PERFORMANCE -->
                <div class="section-card p-5 sm:p-6">

                    <h2 class="text-xl font-bold text-slate-800 mb-6">
                        SEO Performance (May 2025)
                    </h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-5 mb-6">

                        <div class="mini-metric border-b sm:border-b-0 pb-4 sm:pb-0">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-blue-50 text-blue-600">
                                    <i class="ri-user-search-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Keywords Ranked
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                312
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 16%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-indigo-50 text-indigo-600">
                                    <i class="ri-award-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Top 10 Rankings
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                85
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 20%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-teal-50 text-teal-600">
                                    <i class="ri-line-chart-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Organic Traffic
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                12.6K
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 25%
                            </p>
                        </div>

                        <div class="mini-metric">
                            <div class="flex items-center gap-3">
                                <div class="metric-icon bg-sky-50 text-sky-600">
                                    <i class="ri-links-line"></i>
                                </div>

                                <p class="text-[12px] text-slate-500 font-semibold">
                                    Backlinks
                                </p>
                            </div>

                            <p class="text-[28px] font-bold text-slate-800 mt-3">
                                1.2K
                            </p>

                            <p class="up mt-1">
                                <i class="ri-arrow-up-line"></i> 15%
                            </p>
                        </div>

                    </div>

                    <!-- CHART -->
                    <div class="border border-slate-200 rounded-2xl p-4 bg-white">

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

                            <div class="2xl:col-span-4 min-w-0">
                                <h3 class="text-base font-semibold text-slate-800">
                                    Organic Traffic
                                </h3>

                                <p class="text-sm text-slate-500">
                                    Performance overview
                                </p>
                            </div>

                            <div class="flex items-center gap-2 text-sm text-emerald-600 font-semibold">
                                <i class="ri-arrow-up-line"></i>
                                25%
                            </div>

                        </div>

                        <div id="seoChart" class="w-full overflow-hidden"></div>

                    </div>

                </div>
                
                
                            
            <div class="2xl:col-span-4 min-w-0">

                <div class="section-card p-5 sm:p-6 w-full">

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

                        <h2 class="text-xl font-bold text-slate-800">
                            Upcoming Renewals
                        </h2>

                        <a href="#" class="text-sm font-semibold text-blue-600">
                            View all
                        </a>

                    </div>

                    <div class="overflow-x-auto w-full">

                        <table class="w-full min-w-[700px]">

                            <thead class="table-head">

                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500">
                                        Client
                                    </th>

                                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500">
                                        Subscription
                                    </th>

                                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500">
                                        Expiry
                                    </th>

                                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500">
                                        Projects
                                    </th>

                                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500">
                                        Status
                                    </th>
                                </tr>

                            </thead>

                            <tbody>

                                <tr class="border-t border-slate-100">
                                    <td class="px-4 py-4 text-sm font-semibold text-slate-800">
                                        Bright Future
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        SMM Package
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        05 Jun 2025
                                    </td>

                                    <td class="px-4 py-4 text-sm font-semibold text-emerald-600">
                                        5
                                    </td>

                                    <td class="px-4 py-4">
                                        <span class="tag-upcoming">
                                            Upcoming
                                        </span>
                                    </td>
                                </tr>

                                <tr class="border-t border-slate-100">
                                    <td class="px-4 py-4 text-sm font-semibold text-slate-800">
                                        Technosoft
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        SEO Plan
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        07 Jun 2025
                                    </td>

                                    <td class="px-4 py-4 text-sm font-semibold text-emerald-600">
                                        7
                                    </td>

                                    <td class="px-4 py-4">
                                        <span class="tag-upcoming">
                                            Upcoming
                                        </span>
                                    </td>
                                </tr>

                                <tr class="border-t border-slate-100">
                                    <td class="px-4 py-4 text-sm font-semibold text-slate-800">
                                        Alpha Systems
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        SEO Plan
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        12 Jun 2025
                                    </td>

                                    <td class="px-4 py-4 text-sm font-semibold text-emerald-600">
                                        12
                                    </td>

                                    <td class="px-4 py-4">
                                        <span class="tag-upcoming">
                                            Upcoming
                                        </span>
                                    </td>
                                </tr>

                                <tr class="border-t border-slate-100">
                                    <td class="px-4 py-4 text-sm font-semibold text-slate-800">
                                        Creative Mindz
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        SMM Package
                                    </td>

                                    <td class="px-4 py-4 text-sm text-slate-600">
                                        15 Jun 2025
                                    </td>

                                    <td class="px-4 py-4 text-sm font-semibold text-emerald-600">
                                        15
                                    </td>

                                    <td class="px-4 py-4">
                                        <span class="tag-upcoming">
                                            Upcoming
                                        </span>
                                    </td>
                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

            </div>

        </div>

    </div>

    <!-- CHART SCRIPT -->
    <script>

        document.addEventListener("DOMContentLoaded", function () {

            const options = {

                series: [{
                    name: 'Organic Traffic',
                    data: [4200, 3900, 6800, 5200, 4700, 7100, 6200, 8500, 7900, 6100, 7400, 9300, 8200, 10500]
                }],

                chart: {
                    type: 'area',
                    height: window.innerWidth < 640 ? 260 : 320,
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: false
                    }
                },

                colors: ['#2563eb'],

                stroke: {
                    curve: 'smooth',
                    width: 4
                },

                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.35,
                        opacityTo: 0.04,
                        stops: [0, 90, 100]
                    }
                },

                dataLabels: {
                    enabled: false
                },

                markers: {
                    size: 5,
                    strokeWidth: 3,
                    hover: {
                        size: 7
                    }
                },

                grid: {
                    borderColor: '#edf2f7',
                    strokeDashArray: 5
                },

                xaxis: {

                    categories: [
                        '01 May',
                        '03 May',
                        '05 May',
                        '07 May',
                        '09 May',
                        '11 May',
                        '13 May',
                        '15 May',
                        '18 May',
                        '21 May',
                        '24 May',
                        '27 May',
                        '29 May',
                        '31 May'
                    ],

                    labels: {
                        style: {
                            colors: '#64748b',
                            fontSize: '12px'
                        }
                    },

                    axisBorder: {
                        show: false
                    },

                    axisTicks: {
                        show: false
                    }

                },

                yaxis: {

                    labels: {

                        style: {
                            colors: '#64748b',
                            fontSize: '12px'
                        },

                        formatter: function (val) {
                            return (val / 1000) + 'K';
                        }

                    }

                },

                tooltip: {

                    theme: 'light',

                    y: {
                        formatter: function (val) {
                            return val.toLocaleString();
                        }
                    }

                },

                legend: {
                    show: false
                }

            };

            const chart = new ApexCharts(
                document.querySelector("#seoChart"),
                options
            );

            chart.render();

        });

    </script>

</body>

</html>

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