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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Group Dashboard — Admin</title>
    <link rel="icon" type="image/x-icon" href="assets/images/Logo.webp">

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <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: #f4f7fb;
        }

        .dashboard-card {
            background: #fff;
            border-radius: 24px;
            border: 1px solid #edf2f7;
            box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
            transition: .3s;
        }


        .status {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #64748b;
        }

        .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10b981;
        }

        .workspace-footer a {
            color: #94a3b8;
            text-decoration: none;
        }

        .workspace-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #edf2f7;
            box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
            transition: .3s;
        }

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

        /* Banner */
        .lockora-banner {
            height: 120px;
            background: #fdf0e7;
            position: relative;
            overflow: hidden;
        }

        .lockora-banner::before {
            content: "";
            width: 90px;
            height: 90px;
            background: #f8d8be;
            border-radius: 50%;
            position: absolute;
            left: -20px;
            top: 30px;
        }

        .lockora-banner::after {
            content: "";
            width: 140px;
            height: 140px;
            background: #f8d8be;
            border-radius: 50%;
            position: absolute;
            right: -40px;
            top: -40px;
        }

        /* Logo */
        .lockora-logo {
            width: 180px;
            height: 70px;
            background: #111;
            border-radius: 18px;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 2;

            box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
        }

        .lockora-logo img {
            width: 130px;
            object-fit: contain;
        }

        /* Body */
        .workspace-body {
            padding: 20px;
        }

        .workspace-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .workspace-title {
            font-size: 28px;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
        }

        .workspace-subtitle {
            font-size: 15px;
            color: #64748b;
            margin-top: 4px;
        }

        .workspace-arrow {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: #f1f5f9;

            display: flex;
            align-items: center;
            justify-content: center;

            color: #64748b;
            text-decoration: none;

            font-size: 20px;
        }

        /* Tags */
        .workspace-tags {
            display: flex;
            gap: 10px;
            margin-top: 18px;
        }

        .workspace-tags span {
            background: #fff4ed;
            color: #ea580c;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
        }

        /* Footer */
        .workspace-footer {
            border-top: 1px solid #e5e7eb;
            padding: 14px 20px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .status {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #64748b;
            font-size: 14px;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
        }

        .workspace-footer a {
            text-decoration: none;
            color: #64748b;
            font-size: 14px;
            font-weight: 500;
        }

        /* PURESAAS */
        .puresaas-banner {
            height: 120px;
            background: #eef2ff;
            position: relative;
            overflow: hidden;
        }

        .puresaas-banner::before {
            content: "";
            width: 90px;
            height: 90px;
            background: #c7d2fe;
            border-radius: 50%;
            position: absolute;
            left: -20px;
            top: 30px;
        }

        .puresaas-banner::after {
            content: "";
            width: 140px;
            height: 140px;
            background: #c7d2fe;
            border-radius: 50%;
            position: absolute;
            right: -40px;
            top: -40px;
        }

        .puresaas-logo {
            width: 120px;
            height: 70px;
            background: #fff;
            border-radius: 18px;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 2;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        }

        .puresaas-logo img {
            width: 85px;
        }

        .puresaas-tags span {
            background: #eef2ff;
            color: #4f46e5;
        }

        /* UTURN */
        .uturn-banner {
            height: 120px;
            background: #fef7db;
            position: relative;
            overflow: hidden;
        }

        .uturn-banner::before {
            content: "";
            width: 90px;
            height: 90px;
            background: #fde68a;
            border-radius: 50%;
            position: absolute;
            left: -20px;
            top: 30px;
        }

        .uturn-banner::after {
            content: "";
            width: 140px;
            height: 140px;
            background: #fde68a;
            border-radius: 50%;
            position: absolute;
            right: -40px;
            top: -40px;
        }

        .uturn-logo {
            width: 110px;
            height: 80px;
            background: #fff;
            border-radius: 18px;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 2;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        }

        .uturn-logo img {
            width: 70px;
        }

        .uturn-tags span {
            background: #fff7ed;
            color: #d97706;
        }

        /* SUCCESS IT */
        .success-banner {
            height: 120px;
            background: #dff8f6;
            position: relative;
            overflow: hidden;
        }

        .success-banner::before {
            content: "";
            width: 90px;
            height: 90px;
            background: #a7ece6;
            border-radius: 50%;
            position: absolute;
            left: -20px;
            top: 30px;
        }

        .success-banner::after {
            content: "";
            width: 140px;
            height: 140px;
            background: #a7ece6;
            border-radius: 50%;
            position: absolute;
            right: -40px;
            top: -40px;
        }

        .success-logo {
            width: 110px;
            height: 80px;
            background: #fff;
            border-radius: 18px;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 2;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        }

        .success-logo img {
            width: 55px;
            height: auto;
        }

        .success-tags span {
            background: #ecfeff;
            color: #0ea5a8;
        }
    </style>
</head>

<body>

    <main class="p-4 md:p-6">

        <div class="max-w-[1850px] mx-auto px-0 md:px-6 py-5">

            <!-- Welcome Header -->
            <div class="bg-white rounded-3xl border border-slate-100 p-6 mb-8 shadow-sm">

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

                    <div>
                        <div
                            class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 text-slate-600 text-xs font-medium mb-3">
                            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                            Workspace Overview
                        </div>

                        <h1 id="greetingText" class="text-3xl font-bold text-slate-900">
                            Good Morning, Admin
                        </h1>

                        <p class="text-slate-500 mt-2">
                            Manage all company workspaces from one place.
                        </p>
                    </div>

                    <div class="flex items-center gap-3 flex-wrap">
                        <div>
                            <p class="text-xs uppercase tracking-wider text-slate-400">
                                Quick Actions
                            </p>
                            <p class="text-sm text-slate-500">
                                Reports & Backups
                            </p>
                        </div>


                        <select id="reportRange"
                            class="px-4 py-2.5 border border-slate-200 rounded-2xl text-sm">
                            <option value="today">Today</option>
                            <option value="week">This Week</option>
                            <option value="month">This Month</option>
                            <option value="lastmonth">Last Month</option>
                            <option value="custom">Custom Range</option>
                        </select>

                        <!-- Hidden Initially -->
                        <div id="customDateRange" class="hidden flex items-center gap-2">

                            <input type="date"
                                class="px-4 py-2.5 border border-slate-200 rounded-2xl text-sm">

                            <span class="text-slate-400">to</span>

                            <input type="date"
                                class="px-4 py-2.5 border border-slate-200 rounded-2xl text-sm">

                        </div>

                        <button id="generateReportBtn"
                            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl bg-slate-900 text-white font-medium">
                            <i class="ri-file-chart-line"></i>
                            Generate Report
                        </button>
                        
                        <button id="backupBtn"
                            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl border border-slate-200 text-slate-700 font-medium">
                            <i class="ri-database-2-line"></i>
                            Backup Data
                        </button>

                    </div>

                </div>

            </div>

            <!--COMPANIES -->
            <div class="mt-10 p-4 rounded-2xl">


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

                    <!-- SUCCESS IT -->
                    <div class="workspace-card cursor-pointer"
                        onclick="window.location.href='dashboard.php'">

                        <div class="workspace-banner success-banner">
                            <div class="success-logo">
                                <img src="assets/images/Logo_1.webp" alt="Success IT">
                            </div>
                        </div>

                        <div class="workspace-body">

                            <div class="workspace-header">
                                <div>
                                    <h3 class="workspace-title">Success IT</h3>
                                    <p class="workspace-subtitle">Innovative Technologies</p>
                                </div>

                                <div class="workspace-arrow">
                                    <i class="ri-arrow-right-up-line"></i>
                                </div>
                            </div>

                            <div class="workspace-tags success-tags">
                                <span>CRM</span>
                                <span>ERP</span>
                                <span>Web Apps</span>
                            </div>

                        </div>

                    </div>

                    <!-- LOCKORA -->
                    <div class="workspace-card cursor-pointer"
                        onclick="window.location.href='lockora_dashboard.php'">

                        <div class="workspace-banner lockora-banner">
                            <div class="workspace-logo lockora-logo">
                                <img src="assets/images/lockora_logo.png" alt="Lockora">
                            </div>
                        </div>

                        <div class="workspace-body">

                            <div class="workspace-header">
                                <div>
                                    <h3 class="workspace-title">Lockora</h3>
                                    <p class="workspace-subtitle">Security Platform</p>
                                </div>

                                <div class="workspace-arrow">
                                    <i class="ri-arrow-right-up-line"></i>
                                </div>
                            </div>

                            <div class="workspace-tags">
                                <span>Orders</span>
                                <span>Warranty</span>
                                <span>Install</span>
                            </div>

                        </div>

                    </div>

                    <!-- PURESAAS -->
                    <div class="workspace-card cursor-pointer"
                        onclick="window.location.href='puresaas_dashboard.php'">

                        <div class="workspace-banner puresaas-banner">
                            <div class="puresaas-logo">
                                <img src="assets/images/puresaas_logo.png" alt="PureSaaS">
                            </div>
                        </div>

                        <div class="workspace-body">

                            <div class="workspace-header">
                                <div>
                                    <h3 class="workspace-title">PureSaaS</h3>
                                    <p class="workspace-subtitle">SaaS Business Suite</p>
                                </div>

                                <div class="workspace-arrow">
                                    <i class="ri-arrow-right-up-line"></i>
                                </div>
                            </div>

                            <div class="workspace-tags puresaas-tags">
                                <span>CRM</span>
                                <span>Billing</span>
                                <span>Analytics</span>
                            </div>

                        </div>

                    </div>


                    <!-- U-TURN MEDIA -->
                    <div class="workspace-card cursor-pointer"
                        onclick="window.location.href='uturn_dashboard.php'">

                        <div class="workspace-banner uturn-banner">
                            <div class="uturn-logo">
                                <img src="assets/images/uturn_logo.png" alt="U-Turn Media">
                            </div>
                        </div>

                        <div class="workspace-body">

                            <div class="workspace-header">
                                <div>
                                    <h3 class="workspace-title">U-Turn Media</h3>
                                    <p class="workspace-subtitle">Digital Marketing</p>
                                </div>

                                <div class="workspace-arrow">
                                    <i class="ri-arrow-right-up-line"></i>
                                </div>
                            </div>

                            <div class="workspace-tags uturn-tags">
                                <span>Campaigns</span>
                                <span>Leads</span>
                                <span>Reports</span>
                            </div>

                        </div>

                    </div>

                </div>

            </div>


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

                <!-- COMPANY GROWTH -->
                <div class="xl:col-span-8 dashboard-card p-6">

                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h2 class="text-xl font-bold text-slate-800">Company Growth Analytics</h2>
                            <p class="text-sm text-slate-500 mt-1">Revenue growth by company</p>
                        </div>
                        <div class="flex items-center gap-2 text-sm font-semibold text-emerald-600">
                            <i class="ri-arrow-up-line"></i>
                            14%
                        </div>
                    </div>

                    <div id="growthChart"></div>

                </div>

                <!-- REVENUE SHARE -->
                <div class="xl:col-span-4 dashboard-card p-6">

                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h2 class="text-xl font-bold text-slate-800">Revenue Share</h2>
                            <p class="text-sm text-slate-500 mt-1">Contribution by company</p>
                        </div>
                        <div class="w-12 h-12 rounded-2xl bg-purple-100 flex items-center justify-center">
                            <i class="ri-pie-chart-2-line text-xl text-purple-600"></i>
                        </div>
                    </div>

                    <div id="departmentChart"></div>

                </div>

            </div>

            <!-- FINANCIAL OVERVIEW -->
            <div class="grid grid-cols-1 xl:grid-cols-12 gap-5 mt-8">

                <!-- FINANCIAL STATS -->
                <div class="xl:col-span-4 dashboard-card p-6">

                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h2 class="text-xl font-bold text-slate-800">Financial Overview</h2>
                            <p class="text-sm text-slate-500 mt-1">Combined finance summary</p>
                        </div>
                        <div class="w-12 h-12 rounded-2xl bg-emerald-100 flex items-center justify-center">
                            <i class="ri-money-rupee-circle-line text-2xl text-emerald-600"></i>
                        </div>
                    </div>

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

                        <div class="flex items-center justify-between p-4 rounded-2xl bg-emerald-50">
                            <div>
                                <p class="text-sm text-slate-500">Combined Revenue</p>
                                <h3 class="text-xl font-bold text-emerald-600">₹38.6L</h3>
                            </div>
                            <i class="ri-line-chart-line text-3xl text-emerald-500"></i>
                        </div>

                        <div class="flex items-center justify-between p-4 rounded-2xl bg-red-50">
                            <div>
                                <p class="text-sm text-slate-500">Combined Expenses</p>
                                <h3 class="text-xl font-bold text-red-600">₹13.2L</h3>
                            </div>
                            <i class="ri-arrow-down-circle-line text-3xl text-red-500"></i>
                        </div>

                        <div class="flex items-center justify-between p-4 rounded-2xl bg-indigo-50">
                            <div>
                                <p class="text-sm text-slate-500">Combined Profit</p>
                                <h3 class="text-xl font-bold text-indigo-600">₹25.4L</h3>
                            </div>
                            <i class="ri-funds-box-line text-3xl text-indigo-500"></i>
                        </div>

                    </div>

                </div>

                <!-- BAR CHART -->
                <div class="xl:col-span-4 dashboard-card p-6">

                    <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 mt-1">Revenue vs Expenses by company</p>
                        </div>
                        <div class="w-12 h-12 rounded-2xl bg-indigo-100 flex items-center justify-center">
                            <i class="ri-bar-chart-grouped-line text-2xl text-indigo-600"></i>
                        </div>
                    </div>

                    <div id="financeBarChart"></div>

                </div>

                <!-- PIE CHART -->
                <div class="xl:col-span-4 dashboard-card p-6">

                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h2 class="text-xl font-bold text-slate-800">Expense Breakdown</h2>
                            <p class="text-sm text-slate-500 mt-1">Expenses by company</p>
                        </div>
                        <div class="w-12 h-12 rounded-2xl bg-pink-100 flex items-center justify-center">
                            <i class="ri-pie-chart-2-line text-2xl text-pink-600"></i>
                        </div>
                    </div>

                    <div id="expensePieChart"></div>

                </div>

            </div>

        </div>

    </main>

    <!-- DASHBOARD CHARTS -->
    <script>
        // GROUP STATUS
        const companyStatusChart = new ApexCharts(document.querySelector("#companyStatusChart"), {
            chart: {
                type: 'radialBar',
                height: 300
            },
            series: [87],
            colors: ['#10b981'],
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: '68%'
                    },
                    dataLabels: {
                        name: {
                            show: true,
                            fontSize: '15px'
                        },
                        value: {
                            fontSize: '34px',
                            fontWeight: 700
                        }
                    }
                }
            },
            labels: ['Performance']
        });
        companyStatusChart.render();

        // COMPANY GROWTH
        const growthChart = new ApexCharts(document.querySelector("#growthChart"), {
            chart: {
                type: 'area',
                height: 350,
                toolbar: {
                    show: false
                }
            },
            series: [{
                    name: 'Success IT',
                    data: [8, 9, 10, 11, 12, 12.4]
                },
                {
                    name: 'Lockora',
                    data: [6, 6.5, 7, 8, 8.5, 9.1]
                },
                {
                    name: 'PureSaaS',
                    data: [7, 8, 9, 9.8, 10.5, 11.2]
                },
                {
                    name: 'U-Turn Media',
                    data: [3.5, 4, 4.5, 5, 5.5, 5.9]
                }
            ],
            colors: ['#00b8b8', '#ea580c', '#4f46e5', '#a16207'],
            stroke: {
                curve: 'smooth',
                width: 4
            },
            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.35,
                    opacityTo: 0.04
                }
            },
            dataLabels: {
                enabled: false
            },
            grid: {
                borderColor: '#e2e8f0',
                strokeDashArray: 5
            },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
            },
            yaxis: {
                labels: {
                    formatter: v => '₹' + v + 'L'
                }
            }
        });
        growthChart.render();

        // REVENUE SHARE
        const departmentChart = new ApexCharts(
    document.querySelector("#departmentChart"), {
        chart: {
            type: 'pie',
            height: 320
        },
        series: [12.4, 9.1, 11.2, 5.9],
        labels: [
            'Success IT',
            'Lockora',
            'PureSaaS',
            'U-Turn Media'
        ],
        colors: [
            '#00b8b8',
            '#ea580c',
            '#4f46e5',
            '#a16207'
        ],
        legend: {
            position: 'bottom'
        },
        dataLabels: {
            enabled: true,
            formatter: function(val) {
                return val.toFixed(1) + "%";
            }
        },
        stroke: {
            width: 2,
            colors: ['#fff']
        }
    }
);

        departmentChart.render();

        // FINANCE BAR CHART
        const financeBarChart = new ApexCharts(document.querySelector("#financeBarChart"), {
            chart: {
                type: 'bar',
                height: 320,
                toolbar: {
                    show: false
                }
            },
            series: [{
                    name: 'Revenue',
                    data: [12.4, 9.1, 11.2, 5.9]
                },
                {
                    name: 'Expenses',
                    data: [4.2, 3.1, 3.8, 2.1]
                }
            ],
            colors: ['#10b981', '#ef4444'],
            plotOptions: {
                bar: {
                    borderRadius: 8,
                    columnWidth: '45%'
                }
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: ['Success IT', 'Lockora', 'PureSaaS', 'U-Turn Media']
            },
            yaxis: {
                labels: {
                    formatter: v => '₹' + v + 'L'
                }
            }
        });
        financeBarChart.render();

        // EXPENSE PIE CHART
        const expensePieChart = new ApexCharts(document.querySelector("#expensePieChart"), {
            chart: {
                type: 'pie',
                height: 320
            },
            series: [4.2, 3.1, 3.8, 2.1],
            labels: ['Success IT', 'Lockora', 'PureSaaS', 'U-Turn Media'],
            colors: ['#00b8b8', '#ea580c', '#4f46e5', '#a16207']
        });
        expensePieChart.render();

        // TASK AREA CHART
        const taskAreaChart = new ApexCharts(document.querySelector("#taskAreaChart"), {
            chart: {
                type: 'area',
                height: 340,
                toolbar: {
                    show: false
                }
            },
            series: [{
                    name: 'Success IT',
                    data: [20, 28, 35, 40, 46, 55]
                },
                {
                    name: 'Lockora',
                    data: [10, 14, 18, 22, 26, 30]
                },
                {
                    name: 'PureSaaS',
                    data: [15, 20, 26, 33, 40, 48]
                },
                {
                    name: 'U-Turn Media',
                    data: [8, 10, 13, 16, 19, 22]
                }
            ],
            colors: ['#00b8b8', '#ea580c', '#4f46e5', '#a16207'],
            stroke: {
                curve: 'smooth',
                width: 4
            },
            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.4,
                    opacityTo: 0.05
                }
            },
            dataLabels: {
                enabled: false
            },
            grid: {
                borderColor: '#e2e8f0',
                strokeDashArray: 5
            },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
            }
        });
        taskAreaChart.render();
    </script>
    <script>
        function updateGreeting() {
            const hour = new Date().getHours();
            let greeting = "";

            if (hour >= 5 && hour < 12) {
                greeting = "Good Morning";
            } else if (hour >= 12 && hour < 17) {
                greeting = "Good Afternoon";
            } else {
                greeting = "Good Evening";
            }

            document.getElementById("greetingText").textContent =
                `${greeting}, Admin`;
        }

        updateGreeting();
    </script>
    <script>
        const reportRange = document.getElementById('reportRange');
        const customDateRange = document.getElementById('customDateRange');

        reportRange.addEventListener('change', function() {
            if (this.value === 'custom') {
                customDateRange.classList.remove('hidden');
            } else {
                customDateRange.classList.add('hidden');
            }
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
document.getElementById('generateReportBtn').addEventListener('click', () => {
    Swal.fire({
        icon: 'success',
        title: 'Report Generated',
        text: 'Your report has been generated successfully.',
        confirmButtonText: 'Done',
        confirmButtonColor: '#0f172a',
        width: '420px'
    });
});

document.getElementById('backupBtn').addEventListener('click', () => {
    Swal.fire({
        icon: 'success',
        title: 'Backup Completed',
        text: 'All workspace data has been backed up successfully.',
        confirmButtonText: 'Done',
        confirmButtonColor: '#0f172a',
        width: '420px'
    });
});
</script>
</body>

</html>