@extends('layouts.app')

@section('title', 'Agent Dashboard')
@section('page-title', 'Agent 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">
        <!-- My 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-green-100 rounded-lg flex items-center justify-center">
                        <i class="fab fa-whatsapp text-green-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>

        <!-- My 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-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-shopping-cart text-blue-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-medium text-gray-500">My Orders</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $kpis['total_orders'] ?? 0 }}</p>
                </div>
            </div>
        </div>

        <!-- My 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">My Commission</p>
                    <p class="text-2xl font-bold text-gray-900">₹{{ number_format($kpis['total_commission'] ?? 0) }}</p>
                </div>
            </div>
        </div>

        <!-- Performance -->
        <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="fas fa-chart-line text-purple-600 text-xl"></i>
                    </div>
                </div>
                <div class="ml-4 flex-1">
                    <p class="text-sm font-medium text-gray-500">Performance</p>
                    <p class="text-2xl font-bold text-gray-900">85%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <a href="{{ route('whatsapp.conversations') }}" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <i class="fab fa-whatsapp text-green-500 text-2xl mb-2"></i>
                <h4 class="font-semibold text-gray-900">Check Messages</h4>
                <p class="text-sm text-gray-600">View and respond to customer messages</p>
            </a>
            
            <a href="{{ route('buyers.index') }}" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <i class="fas fa-store text-blue-500 text-2xl mb-2"></i>
                <h4 class="font-semibold text-gray-900">Manage Buyers</h4>
                <p class="text-sm text-gray-600">Add and update buyer information</p>
            </a>
            
            <a href="{{ route('suppliers.index') }}" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <i class="fas fa-industry text-purple-500 text-2xl mb-2"></i>
                <h4 class="font-semibold text-gray-900">View Suppliers</h4>
                <p class="text-sm text-gray-600">Browse available suppliers</p>
            </a>
        </div>
    </div>
</div>
@endsection