@extends('layouts.app')

@section('title', 'Admin Dashboard')
@section('page-title', 'Admin Dashboard')

@section('content')
<div class="space-y-6">
    <!-- KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Users -->
        <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-users text-blue-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-medium text-gray-500">Total Users</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $kpis['total_users'] ?? 0 }}</p>
                </div>
            </div>
        </div>

        <!-- Total Orders -->
        <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-shopping-cart text-green-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-medium text-gray-500">Total Orders</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $kpis['total_orders'] ?? 0 }}</p>
                </div>
            </div>
        </div>

        <!-- Total Commission -->
        <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-rupee-sign text-yellow-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-medium text-gray-500">Total Commission</p>
                    <p class="text-2xl font-bold text-gray-900">₹{{ number_format($kpis['total_commission'] ?? 0) }}</p>
                </div>
            </div>
        </div>

        <!-- Active Conversations -->
        <div class="bg-white rounded-lg shadow-sm p-6 card-hover">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fab fa-whatsapp text-purple-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-medium text-gray-500">Active Conversations</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $kpis['active_conversations'] ?? 0 }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Welcome Message -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <div class="text-center">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">Welcome to Textile Agency CRM</h2>
            <p class="text-gray-600 mb-6">Your comprehensive solution for managing textile trading operations, WhatsApp communications, and commission tracking.</p>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="p-4 border border-gray-200 rounded-lg">
                    <i class="fas fa-comments text-green-500 text-2xl mb-2"></i>
                    <h3 class="font-semibold text-gray-900">WhatsApp Integration</h3>
                    <p class="text-sm text-gray-600">Manage customer conversations seamlessly</p>
                </div>
                
                <div class="p-4 border border-gray-200 rounded-lg">
                    <i class="fas fa-chart-line text-blue-500 text-2xl mb-2"></i>
                    <h3 class="font-semibold text-gray-900">Order Management</h3>
                    <p class="text-sm text-gray-600">Track orders from requirement to delivery</p>
                </div>
                
                <div class="p-4 border border-gray-200 rounded-lg">
                    <i class="fas fa-percentage text-yellow-500 text-2xl mb-2"></i>
                    <h3 class="font-semibold text-gray-900">Commission Tracking</h3>
                    <p class="text-sm text-gray-600">Automated commission calculation and payments</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection