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

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

<!-- Compact Welcome Banner -->
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-gray-900 via-gray-800 to-gray-700 px-6 py-5 text-white shadow-lg">

    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(245,166,35,0.18),transparent_40%)]"></div>

    <div class="relative z-10 flex flex-col md:flex-row md:items-center md:justify-between gap-4">

        <div>
            <h1 class="text-2xl md:text-3xl font-bold">
                Welcome Back 
            </h1>

            <p class="mt-1 text-sm md:text-base text-gray-300">
                Manage your Lockora smart locks and installations.
            </p>
        </div>

    </div>

</div>

    <!-- Stats -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 mt-8">

        <div class="rounded-3xl bg-gradient-to-r from-orange-500 to-amber-400 p-6 text-white shadow-xl">
            <div class="flex justify-between">
                <div>
                    <p class="text-orange-100">Total Products</p>
                    <h2 class="text-4xl font-bold mt-2">1,250</h2>
                </div>
                <i class="ri-lock-2-fill text-5xl opacity-30"></i>
            </div>
        </div>

        <div class="rounded-3xl bg-gradient-to-r from-green-500 to-emerald-400 p-6 text-white shadow-xl">
            <div class="flex justify-between">
                <div>
                    <p class="text-green-100">Active Devices</p>
                    <h2 class="text-4xl font-bold mt-2">980</h2>
                </div>
                <i class="ri-shield-check-fill text-5xl opacity-30"></i>
            </div>
        </div>

        <div class="rounded-3xl bg-gradient-to-r from-blue-500 to-cyan-400 p-6 text-white shadow-xl">
            <div class="flex justify-between">
                <div>
                    <p class="text-blue-100">Installations</p>
                    <h2 class="text-4xl font-bold mt-2">765</h2>
                </div>
                <i class="ri-tools-fill text-5xl opacity-30"></i>
            </div>
        </div>

        <div class="rounded-3xl bg-gradient-to-r from-purple-500 to-pink-500 p-6 text-white shadow-xl">
            <div class="flex justify-between">
                <div>
                    <p class="text-purple-100">Revenue</p>
                    <h2 class="text-4xl font-bold mt-2">₹8.5L</h2>
                </div>
                <i class="ri-money-rupee-circle-fill text-5xl opacity-30"></i>
            </div>
        </div>
        
        <div class="rounded-3xl bg-gradient-to-r from-red-500 to-rose-400 p-6 text-white shadow-xl">
            <div class="flex justify-between">
                <div>
                    <p class="text-red-100">Replacements</p>
                    <h2 class="text-4xl font-bold mt-2">25</h2>
                </div>
                <i class="ri-refresh-line text-5xl opacity-30"></i>
            </div>
        </div>
        
        <div class="rounded-3xl bg-gradient-to-r from-yellow-500 to-amber-400 p-6 text-white shadow-xl">
            <div class="flex justify-between">
                <div>
                    <p class="text-yellow-100">Returns</p>
                    <h2 class="text-4xl font-bold mt-2">18</h2>
                </div>
                <i class="ri-arrow-go-back-line text-5xl opacity-30"></i>
            </div>
        </div>

    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-3xl shadow-xl p-6 mt-8">

        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold">Quick Actions</h2>
        </div>

       <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3">

            <a href="lockora_demo.php"
                class="group rounded-2xl border border-gray-300 p-3 hover:shadow-lg hover:-translate-y-1 transition block">
        
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
                    <i class="ri-presentation-fill text-2xl text-blue-500"></i>
                </div>
        
                <p class="mt-2 text-sm font-medium text-center">
                    Demo
                </p>
        
            </a>
        
            <a href="lockora_warranty_registration.php"
                class="group rounded-2xl border border-gray-300 p-3 hover:shadow-lg hover:-translate-y-1 transition block">
        
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-green-100">
                    <i class="ri-shield-check-fill text-2xl text-green-500"></i>
                </div>
        
                <p class="mt-2 text-sm font-medium text-center leading-tight">
                    Warranty Registration
                </p>
        
            </a>
        
        
            <a href="lockora_installation.php"
                class="group rounded-2xl border border-gray-300 p-3 hover:shadow-lg hover:-translate-y-1 transition block">
        
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-pink-100">
                    <i class="ri-tools-fill text-2xl text-pink-500"></i>
                </div>
        
                <p class="mt-2 text-sm font-medium text-center">
                    Installation
                </p>
        
            </a>
        
            <a href="lockora_sales_partner.php"
                class="group rounded-2xl border border-gray-300 p-3 hover:shadow-lg hover:-translate-y-1 transition block">
        
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-100">
                    <i class="ri-team-fill text-2xl text-yellow-500"></i>
                </div>
        
                <p class="mt-2 text-sm font-medium text-center">
                    Sales Partner
                </p>
        
            </a>
        
            <a href="lockora_dealer.php"
                class="group rounded-2xl border border-gray-300 p-3 hover:shadow-lg hover:-translate-y-1 transition block">
        
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-orange-100">
                    <i class="ri-store-3-fill text-2xl text-orange-500"></i>
                </div>
        
                <p class="mt-2 text-sm font-medium text-center">
                    Dealer
                </p>
        
            </a>
        
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-6 mt-8">
    
        <!-- Revenue Chart -->
        <div class="lg:col-span-2 bg-white rounded-3xl shadow-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold">Revenue Analytics</h2>
                    
                <select id="revenueFilter" class="border border-gray-300 text-sm">
                    <option value="month">Month Wise</option>
                    <option value="year">Year Wise</option>
                </select>
            </div>
    
            <div id="revenueChart"></div>
        </div>
    
        <!-- Payment Status Pie Chart -->
        <div class="bg-white rounded-3xl shadow-xl p-6">
            <h2 class="text-xl font-bold mb-4">
                Payment Status
            </h2>
        
            <div id="paymentChart"></div>
        </div>
    </div>
    
    <!-- New Row -->
<div class="grid lg:grid-cols-2 gap-6 mt-8">

    <!-- Top Selling Products -->
    <div class="bg-white rounded-3xl shadow-xl p-6">
        <h2 class="text-xl font-bold mb-4">
            Top Selling Products
        </h2>

        <div id="topSellingChart"></div>
    </div>

<div class="bg-white rounded-3xl shadow-xl p-6">

    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold">
            Recent Orders
        </h2>
    </div>

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

        <div class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 hover:bg-slate-100 transition">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
                    <i class="ri-shopping-bag-3-fill text-green-600"></i>
                </div>

                <div>
                    <h4 class="font-semibold">L2 Plus</h4>
                    <p class="text-xs text-slate-500">
                        Order #ORD001
                    </p>
                </div>
            </div>

            <div class="text-right">
                <p class="font-bold text-green-600">₹12,500</p>
                <span class="text-xs text-green-500">
                    Paid
                </span>
            </div>
        </div>

        <div class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 hover:bg-slate-100 transition">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
                    <i class="ri-shopping-bag-3-fill text-blue-600"></i>
                </div>

                <div>
                    <h4 class="font-semibold">L1 Core</h4>
                    <p class="text-xs text-slate-500">
                        Order #ORD002
                    </p>
                </div>
            </div>

            <div class="text-right">
                <p class="font-bold text-green-600">₹9,800</p>
                <span class="text-xs text-yellow-500">
                    Pending
                </span>
            </div>
        </div>

        <div class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 hover:bg-slate-100 transition">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center">
                    <i class="ri-shopping-bag-3-fill text-purple-600"></i>
                </div>

                <div>
                    <h4 class="font-semibold">L5 Ultra</h4>
                    <p class="text-xs text-slate-500">
                        Order #ORD003
                    </p>
                </div>
            </div>

            <div class="text-right">
                <p class="font-bold text-green-600">₹15,200</p>
                <span class="text-xs text-green-500">
                    Paid
                </span>
            </div>
        </div>

    </div>

</div>

</div>
    
</div>

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

<script>
var paymentOptions = {
    series: [65, 25, 10],

    chart: {
        type: 'pie',
        height: 320
    },

    labels: [
        'Paid Payment',
        'Pending Payment',
        'Overdue Payment'
    ],

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

    legend: {
        position: 'bottom'
    },

    dataLabels: {
        enabled: true,
        formatter: function (val) {
            return val.toFixed(0) + "%";
        }
    },

    tooltip: {
        y: {
            formatter: function(val) {
                return val + '%';
            }
        }
    },

    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                height: 250
            }
        }
    }]
};

var paymentChart = new ApexCharts(
    document.querySelector("#paymentChart"),
    paymentOptions
);

paymentChart.render();
</script>

<script>
var monthlyData = [
    100000, 200000, 250000, 220000,
    50000, 450000
];

var yearlyData = [
    2500000, 3200000, 4100000,
    5800000, 7200000, 8000000
];

var options = {
    series: [{
        name: 'Revenue',
        data: monthlyData
    }],

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

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

    dataLabels: {
        enabled: true,
        formatter: function(val) {
            return '₹' + (val / 1000) + 'K';
        },
        offsetY: -20,
        style: {
            fontSize: '11px',
            fontWeight: '600'
        }
    },

    tooltip: {
        y: {
            formatter: function(val) {
                return 'Revenue: ₹' + val.toLocaleString();
            }
        }
    },

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

    yaxis: {
        labels: {
            formatter: function(val) {
                return '₹' + (val / 1000) + 'K';
            }
        }
    },

    colors: ['#2196F3']
};

var chart = new ApexCharts(
    document.querySelector("#revenueChart"),
    options
);

chart.render();

document.getElementById('revenueFilter').addEventListener('change', function() {

    if (this.value === 'month') {

        chart.updateOptions({
        xaxis: {
            categories: [
                'Jan', 'Feb', 'Mar', 'Apr',
                'May', 'Jun'
            ],
            tickPlacement: 'on',
            labels: {
                rotate: 0,
                trim: false
            }
        },
        });

        chart.updateSeries([{
            name: 'Revenue',
            data: monthlyData
        }]);

    } else {

        chart.updateOptions({
            xaxis: {
                categories: [
                    '2021',
                    '2022',
                    '2023',
                    '2024',
                    '2025',
                    '2026'
                ],
                tickPlacement: 'on'
            }
        });

        chart.updateSeries([{
            name: 'Revenue',
            data: yearlyData
        }]);

    }

});
</script>

<script>
var topSellingOptions = {
    series: [{
        data: [250, 210, 145, 95, 80]
    }],

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

    plotOptions: {
        bar: {
            horizontal: true,
            borderRadius: 6
        }
    },

    dataLabels: {
        enabled: true
    },

    colors: ['#f97316'],

    xaxis: {
        categories: [
            'L2 Plus',
            'L1 Core',
            'L5 Ultra',
            'L3 Pro',
            'L4 Smart'
        ]
    }
};

var topSellingChart = new ApexCharts(
    document.querySelector("#topSellingChart"),
    topSellingOptions
);

topSellingChart.render();
</script>


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