<?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>

    <!-- Tailwind -->
    <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>

        body{
            font-family:Inter,sans-serif;
            background:#f8fafc;
        }

        .metric-card{
            border:1px solid #eef2f7;
            border-radius:18px;
            background:#fff;
            transition:.3s;
            box-shadow:0 2px 10px rgba(15,23,42,.03);
        }

        .metric-card:hover{
            transform:translateY(-3px);
            box-shadow:0 15px 35px rgba(15,23,42,.08);
        }

        .metric-icon{
            width:48px;
            height:48px;
            border-radius:14px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:20px;
        }

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

        .section-card{
            border:1px solid #edf1f7;
            border-radius:20px;
            background:#fff;
            box-shadow:0 2px 10px rgba(15,23,42,.03);
        }

        .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">

    <!-- TITLE -->
    <div class="mb-5">

        <h1 class="text-2xl sm:text-3xl font-bold text-slate-800">
            Marketing Dashboard
        </h1>

    </div>

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

        <!-- CARD -->
        <div class="metric-card p-5">

            <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-[13px] text-slate-500 mt-4 font-semibold">
                Total SMM Clients
            </p>

            <h2 class="text-[34px] font-bold text-slate-800 mt-1">
                32
            </h2>

        </div>

        <!-- CARD -->
        <div class="metric-card p-5">

            <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-[13px] text-slate-500 mt-4 font-semibold">
                Active SMM Packages
            </p>

            <h2 class="text-[34px] font-bold text-slate-800 mt-1">
                28
            </h2>

        </div>

        <!-- CARD -->
        <div class="metric-card p-5">

            <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-[13px] text-slate-500 mt-4 font-semibold">
                Total SEO Clients
            </p>

            <h2 class="text-[34px] font-bold text-slate-800 mt-1">
                25
            </h2>

        </div>

        <!-- CARD -->
        <div class="metric-card p-5">

            <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-[13px] text-slate-500 mt-4 font-semibold">
                Active SEO Plans
            </p>

            <h2 class="text-[34px] font-bold text-slate-800 mt-1">
                21
            </h2>

        </div>

        <!-- CARD -->
        <div class="metric-card p-5">

            <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-[13px] text-slate-500 mt-4 font-semibold">
                Monthly Revenue
            </p>

            <h2 class="text-[34px] font-bold text-slate-800 mt-1">
                ₹4,85,000
            </h2>

        </div>

    </div>

    <!-- QUICK ACTIONS + CONTENT STATUS -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mt-6">

        <!-- QUICK ACTIONS -->
        <div class="section-card p-5 sm:p-6">

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

                <h2 class="text-xl font-bold text-slate-800">
                    Quick Actions
                </h2>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

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

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-team-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Add SMM Client
                    </p>

                </button>

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-search-eye-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Add SEO Client
                    </p>

                </button>

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-fuchsia-50 text-fuchsia-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-calendar-todo-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Create Post
                    </p>

                </button>

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-pink-50 text-pink-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-video-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Create Reel
                    </p>

                </button>

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-image-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Upload Graphics
                    </p>

                </button>

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-sky-50 text-sky-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-send-plane-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Run Campaign
                    </p>

                </button>

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-green-50 text-green-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-file-chart-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Reports
                    </p>

                </button>

                <button class="border border-slate-200 rounded-2xl p-5 hover:shadow-md transition">

                    <div class="w-14 h-14 rounded-2xl bg-cyan-50 text-cyan-600 flex items-center justify-center text-2xl mx-auto">
                        <i class="ri-calendar-check-line"></i>
                    </div>

                    <p class="text-sm font-semibold text-slate-700 mt-4">
                        Calendar
                    </p>

                </button>

            </div>

        </div>

        <!-- CONTENT STATUS -->
        <div class="section-card p-5 sm:p-6">

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

                <h2 class="text-xl font-bold text-slate-800">
                    Content Status
                </h2>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">

                <div class="flex justify-center">
                    <div id="contentStatusChart"></div>
                </div>

                <div class="space-y-5">

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

                        <div class="flex items-center gap-3">

                            <div class="w-3 h-3 rounded-full bg-blue-600"></div>

                            <p class="text-slate-700 font-medium">
                                Published
                            </p>

                        </div>

                        <p class="font-bold text-slate-800">
                            162
                        </p>

                    </div>

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

                        <div class="flex items-center gap-3">

                            <div class="w-3 h-3 rounded-full bg-emerald-500"></div>

                            <p class="text-slate-700 font-medium">
                                Scheduled
                            </p>

                        </div>

                        <p class="font-bold text-slate-800">
                            68
                        </p>

                    </div>

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

                        <div class="flex items-center gap-3">

                            <div class="w-3 h-3 rounded-full bg-amber-400"></div>

                            <p class="text-slate-700 font-medium">
                                Pending
                            </p>

                        </div>

                        <p class="font-bold text-slate-800">
                            18
                        </p>

                    </div>

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

                        <div class="flex items-center gap-3">

                            <div class="w-3 h-3 rounded-full bg-red-500"></div>

                            <p class="text-slate-700 font-medium">
                                Rejected
                            </p>

                        </div>

                        <p class="font-bold text-slate-800">
                            4
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- MARKETING ANALYTICS -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-6 mt-6">

        <div class="xl:col-span-8 section-card p-5 sm:p-6">

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

                <div>

                    <h2 class="text-xl font-bold text-slate-800">
                        Marketing Analytics
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Campaign overview
                    </p>

                </div>

                <button class="h-11 px-5 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition">
                    Export Report
                </button>

            </div>

            <div id="campaignChart"></div>

        </div>

        <!-- TEAM PERFORMANCE -->
        <div class="xl:col-span-4 section-card p-5 sm:p-6">

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

                <h2 class="text-xl font-bold text-slate-800">
                    Team Performance
                </h2>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>

            </div>

            <div class="space-y-6">

                <div>

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

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Rahul Sharma
                            </p>

                            <p class="text-xs text-slate-500">
                                Social Media Manager
                            </p>

                        </div>

                        <span class="text-sm font-bold text-emerald-600">
                            92%
                        </span>

                    </div>

                    <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full rounded-full bg-emerald-500" style="width:92%;"></div>
                    </div>

                </div>

                <div>

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

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Priya Verma
                            </p>

                            <p class="text-xs text-slate-500">
                                SEO Executive
                            </p>

                        </div>

                        <span class="text-sm font-bold text-blue-600">
                            85%
                        </span>

                    </div>

                    <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full rounded-full bg-blue-500" style="width:85%;"></div>
                    </div>

                </div>

                <div>

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

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Neha Singh
                            </p>

                            <p class="text-xs text-slate-500">
                                Ads Specialist
                            </p>

                        </div>

                        <span class="text-sm font-bold text-amber-500">
                            88%
                        </span>

                    </div>

                    <div class="w-full h-3 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full rounded-full bg-amber-500" style="width:88%;"></div>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- CHARTS -->
<script>

    // CONTENT STATUS CHART

    const contentOptions = {

        series:[162,68,18,4],

        chart:{
            type:'donut',
            width:280
        },

        labels:[
            'Published',
            'Scheduled',
            'Pending',
            'Rejected'
        ],

        colors:[
            '#2563eb',
            '#22c55e',
            '#facc15',
            '#ef4444'
        ],

        legend:{
            show:false
        },

        dataLabels:{
            enabled:false
        },

        stroke:{
            width:0
        },

        plotOptions:{
            pie:{
                donut:{
                    size:'72%',
                    labels:{
                        show:true,
                        total:{
                            show:true,
                            label:'Total',
                            formatter:function(){
                                return '252';
                            }
                        }
                    }
                }
            }
        }

    };

    const contentChart = new ApexCharts(
        document.querySelector("#contentStatusChart"),
        contentOptions
    );

    contentChart.render();



    // CAMPAIGN CHART

    const campaignOptions = {

        series:[
            {
                name:'Leads',
                data:[120,180,220,260,310,420]
            },
            {
                name:'Conversions',
                data:[35,52,68,84,102,126]
            }
        ],

        chart:{
            type:'line',
            height:320,
            toolbar:{
                show:false
            }
        },

        colors:[
            '#2563eb',
            '#16a34a'
        ],

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

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

        dataLabels:{
            enabled:false
        },

        markers:{
            size:5
        },

        xaxis:{
            categories:[
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun'
            ]
        },

        legend:{
            position:'top'
        }

    };

    const campaignChart = new ApexCharts(
        document.querySelector("#campaignChart"),
        campaignOptions
    );

    campaignChart.render();

</script>

</body>
</html>

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