<?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>AMC Dashboard</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

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

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

    <style>

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

    </style>

</head>

<body>

<div class="min-h-screen bg-[#f5f7fb] px-0 py-3 md:p-2 lg:p-6">

    <!-- PAGE TITLE -->
    <div class="mb-6">

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

    </div>

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

        <!-- TOTAL CLIENTS -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Total Clients
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-slate-900">
                        58
                    </h2>

                    <p class="mt-3 text-sm font-medium text-blue-600">
                        Registered Clients
                    </p>

                </div>

                <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
                    <i class="ri-team-fill text-xl text-blue-600"></i>
                </div>

            </div>

        </div>

        <!-- ACTIVE AMC -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Active AMC
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-emerald-600">
                        46
                    </h2>

                    <p class="mt-3 text-sm font-medium text-emerald-600">
                        Running Contracts
                    </p>

                </div>

                <div class="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center">
                    <i class="ri-calendar-check-fill text-xl text-emerald-600"></i>
                </div>

            </div>

        </div>

        <!-- EXPIRING -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Expiring Soon
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-amber-500">
                        7
                    </h2>

                    <p class="mt-3 text-sm font-medium text-amber-500">
                        Renewal Required
                    </p>

                </div>

                <div class="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
                    <i class="ri-error-warning-fill text-xl text-amber-500"></i>
                </div>

            </div>

        </div>

        <!-- EXPIRED -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Expired AMC
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-red-500">
                        3
                    </h2>

                    <p class="mt-3 text-sm font-medium text-red-500">
                        Immediate Action
                    </p>

                </div>

                <div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
                    <i class="ri-close-circle-fill text-xl text-red-500"></i>
                </div>

            </div>

        </div>

        <!-- REVENUE -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

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

                <div>

                    <p class="text-sm font-medium text-slate-500">
                        Monthly Revenue
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-indigo-600">
                        ₹2.45L
                    </h2>

                    <p class="mt-3 text-sm font-medium text-indigo-600">
                        Current Month
                    </p>

                </div>

                <div class="w-12 h-12 rounded-xl bg-indigo-50 flex items-center justify-center">
                    <i class="ri-money-dollar-circle-fill text-xl text-indigo-600"></i>
                </div>

            </div>

        </div>

    </div>

    <!-- CHARTS + ACTIVITY -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 mb-5">

        <!-- AMC STATUS -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    AMC Status
                </h3>

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

            </div>

            <div id="amcStatusChart"></div>

        </div>

        <!-- REVENUE ANALYTICS -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    Revenue Analytics
                </h3>

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

            </div>

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

        </div>

        <!-- RECENT ACTIVITY -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h3 class="text-base font-semibold text-slate-800">
                    Recent Activity
                </h3>

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

            </div>

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

                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                            <i class="ri-refresh-line text-blue-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                AMC Renewed Successfully
                            </p>

                            <p class="text-sm text-slate-500">
                                TechnoSoft Solutions
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400">
                        15m ago
                    </span>

                </div>

                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-green-50 flex items-center justify-center">
                            <i class="ri-money-rupee-circle-line text-green-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Payment Received
                            </p>

                            <p class="text-sm text-slate-500">
                                ₹45,000 from Smart Infotech
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400">
                        1h ago
                    </span>

                </div>

                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-yellow-50 flex items-center justify-center">
                            <i class="ri-notification-3-line text-yellow-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Renewal Reminder Sent
                            </p>

                            <p class="text-sm text-slate-500">
                                Bright Future Pvt. Ltd.
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400">
                        2h ago
                    </span>

                </div>

                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-red-50 flex items-center justify-center">
                            <i class="ri-close-circle-line text-red-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                AMC Expired
                            </p>

                            <p class="text-sm text-slate-500">
                                Global Technologies
                            </p>

                        </div>

                    </div>

                    <span class="text-xs text-slate-400">
                        4h ago
                    </span>

                </div>

            </div>

        </div>

    </div>

    <!-- UPCOMING + SUMMARY -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 mb-5">

        <!-- UPCOMING RENEWALS -->
        <div class="xl:col-span-5 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h2 class="text-lg font-semibold text-gray-800">
                    Upcoming Renewals
                </h2>

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

            </div>

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

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

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

                        <div class="w-11 h-11 rounded-xl bg-indigo-50 flex items-center justify-center">
                            <i class="ri-time-line text-indigo-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                TechnoSoft Solutions
                            </p>

                            <p class="text-xs text-slate-500">
                                Ends on 31 Mar 2025
                            </p>

                        </div>

                    </div>

                    <span class="text-sm font-semibold text-red-500">
                        12 Days
                    </span>

                </div>

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

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

                        <div class="w-11 h-11 rounded-xl bg-yellow-50 flex items-center justify-center">
                            <i class="ri-alarm-warning-line text-yellow-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Creative Minds
                            </p>

                            <p class="text-xs text-slate-500">
                                Ends on 19 Mar 2025
                            </p>

                        </div>

                    </div>

                    <span class="text-sm font-semibold text-amber-500">
                        30 Days
                    </span>

                </div>

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

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

                        <div class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center">
                            <i class="ri-close-circle-line text-red-600"></i>
                        </div>

                        <div>

                            <p class="text-sm font-semibold text-slate-800">
                                Green Field Developers
                            </p>

                            <p class="text-xs text-slate-500">
                                Ends on 04 May 2025
                            </p>

                        </div>

                    </div>

                    <span class="text-sm font-semibold text-green-600">
                        16 Days
                    </span>

                </div>

            </div>

        </div>

        <!-- AMC SUMMARY -->
        <div class="xl:col-span-7 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

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

                <h2 class="text-lg font-semibold text-gray-800">
                    AMC Summary
                </h2>

                <select class="bg-slate-100 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none">
                    <option>This Year</option>
                </select>

            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                <div class="rounded-2xl bg-slate-50 p-5 border border-slate-200">

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

                        <div>

                            <p class="text-sm text-slate-500">
                                Total AMC Value
                            </p>

                            <h3 class="mt-2 text-2xl font-bold text-slate-800">
                                ₹18.75L
                            </h3>

                        </div>

                        <div class="w-12 h-12 rounded-xl bg-indigo-100 flex items-center justify-center">
                            <i class="ri-wallet-3-line text-indigo-600 text-xl"></i>
                        </div>

                    </div>

                </div>

                <div class="rounded-2xl bg-slate-50 p-5 border border-slate-200">

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

                        <div>

                            <p class="text-sm text-slate-500">
                                Received
                            </p>

                            <h3 class="mt-2 text-2xl font-bold text-emerald-600">
                                ₹12.30L
                            </h3>

                        </div>

                        <div class="w-12 h-12 rounded-xl bg-emerald-100 flex items-center justify-center">
                            <i class="ri-checkbox-circle-line text-emerald-600 text-xl"></i>
                        </div>

                    </div>

                </div>

                <div class="rounded-2xl bg-slate-50 p-5 border border-slate-200">

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

                        <div>

                            <p class="text-sm text-slate-500">
                                Pending
                            </p>

                            <h3 class="mt-2 text-2xl font-bold text-amber-500">
                                ₹4.65L
                            </h3>

                        </div>

                        <div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center">
                            <i class="ri-time-line text-amber-500 text-xl"></i>
                        </div>

                    </div>

                </div>

                <div class="rounded-2xl bg-slate-50 p-5 border border-slate-200">

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

                        <div>

                            <p class="text-sm text-slate-500">
                                Overdue
                            </p>

                            <h3 class="mt-2 text-2xl font-bold text-red-500">
                                ₹1.20L
                            </h3>

                        </div>

                        <div class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center">
                            <i class="ri-close-circle-line text-red-500 text-xl"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- AMC OVERVIEW TABLE -->
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 overflow-hidden">

        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5">

            <h2 class="text-lg font-semibold text-gray-800">
                AMC Overview
            </h2>

            <div class="flex flex-wrap gap-3">

                <input type="text" placeholder="Search Client..." class="h-11 px-4 rounded-xl border border-slate-200 outline-none text-sm">

                <select class="h-11 px-4 rounded-xl border border-slate-200 outline-none text-sm">
                    <option>All Status</option>
                    <option>Active</option>
                    <option>Expiring Soon</option>
                    <option>Expired</option>
                </select>

            </div>

        </div>

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

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

                <thead>

                    <tr class="bg-slate-50 border-b border-slate-200">

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

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

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

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

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

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

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

                    </tr>

                </thead>

                <tbody>

                    <tr class="border-b border-slate-100 hover:bg-slate-50 transition">

                        <td class="px-4 py-4 text-sm text-slate-700">
                            TechnoSoft Solutions
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            Existing
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            01 Apr 2024
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            31 Mar 2025
                        </td>

                        <td class="px-4 py-4">

                            <span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-emerald-100 text-emerald-600">
                                Active
                            </span>

                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            12
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            ₹25,000.00
                        </td>

                    </tr>

                    <tr class="border-b border-slate-100 hover:bg-slate-50 transition">

                        <td class="px-4 py-4 text-sm text-slate-700">
                            Bright Future Pvt. Ltd.
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            Existing
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            15 Feb 2024
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            14 Feb 2025
                        </td>

                        <td class="px-4 py-4">

                            <span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-yellow-100 text-yellow-600">
                                Expiring Soon
                            </span>

                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            5
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            ₹16,000.00
                        </td>

                    </tr>

                    <tr class="hover:bg-slate-50 transition">

                        <td class="px-4 py-4 text-sm text-slate-700">
                            Smart Infotech
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            Existing
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            10 Jan 2024
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            09 Jan 2025
                        </td>

                        <td class="px-4 py-4">

                            <span class="px-3 py-1 rounded-full text-[11px] font-semibold bg-red-100 text-red-600">
                                Expired
                            </span>

                        </td>

                        <td class="px-4 py-4 text-sm text-red-500">
                            -10
                        </td>

                        <td class="px-4 py-4 text-sm text-slate-700">
                            ₹20,000.00
                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

<!-- APEX CHARTS -->
<script>

    // AMC STATUS CHART

    const amcStatusChart = new ApexCharts(document.querySelector("#amcStatusChart"), {

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

        series:[46,7,3],

        labels:[
            'Active',
            'Expiring',
            'Expired'
        ],

        colors:[
            '#22c55e',
            '#f59e0b',
            '#ef4444'
        ],

        stroke:{
            width:0
        },

        dataLabels:{
            enabled:false
        },

        legend:{
            position:'bottom'
        },

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

    });

    amcStatusChart.render();



    // REVENUE CHART

    const revenueChart = new ApexCharts(document.querySelector("#revenueChart"), {

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

        series:[{
            name:'Revenue',
            data:[1.2,1.8,2.1,2.4,2.8,3.1]
        }],

        colors:['#4f46e5'],

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

        plotOptions:{
            bar:{
                borderRadius:8,
                columnWidth:'45%'
            }
        },

        dataLabels:{
            enabled:false
        },

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

    });

    revenueChart.render();

</script>

</body>
</html>

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