@extends('layouts.admin')

@section('content')
  <div class="flex-1 p-4 lg:p-6 w-full lg:w-auto">
            <!-- Dashboard Stats -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-6">
                <!-- Today's Sales -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-blue-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-blue-100 rounded-lg">
                            <i class="fas fa-shopping-cart text-blue-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Today's Sales</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ $todaySales }}</p>
                            <p class="text-xs text-gray-500 mt-1">
                                @if($yesterdaySales > 0)
                                    @if($todaySales > $yesterdaySales)
                                        <span class="text-green-600">↑ {{ number_format((($todaySales - $yesterdaySales) / $yesterdaySales) * 100, 1) }}%</span>
                                    @else
                                        <span class="text-red-600">↓ {{ number_format((($yesterdaySales - $todaySales) / $yesterdaySales) * 100, 1) }}%</span>
                                    @endif
                                    from yesterday
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Today's Revenue -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-green-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-green-100 rounded-lg">
                            <i class="fas fa-dollar-sign text-green-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Today's Revenue</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">Rs.{{ number_format($todayRevenue, 2) }}</p>
                            <p class="text-xs text-gray-500 mt-1">
                                @if($yesterdayRevenue > 0)
                                    @if($todayRevenue > $yesterdayRevenue)
                                        <span class="text-green-600">↑ {{ number_format((($todayRevenue - $yesterdayRevenue) / $yesterdayRevenue) * 100, 1) }}%</span>
                                    @else
                                        <span class="text-red-600">↓ {{ number_format((($yesterdayRevenue - $todayRevenue) / $yesterdayRevenue) * 100, 1) }}%</span>
                                    @endif
                                    from yesterday
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Monthly Revenue -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-purple-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-purple-100 rounded-lg">
                            <i class="fas fa-chart-line text-purple-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Monthly Revenue</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">Rs.{{ number_format($monthlyRevenue, 2) }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $monthlySales }} sales this month</p>
                        </div>
                    </div>
                </div>

                <!-- Low Stock Alert -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-yellow-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-yellow-100 rounded-lg">
                            <i class="fas fa-exclamation-triangle text-yellow-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Low Stock Items</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ $lowStockCount }}</p>
                            <p class="text-xs text-gray-500 mt-1">Need immediate attention</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Stats -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 lg:gap-6 mb-6">
                <!-- Total Products -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-blue-100 rounded-lg">
                            <i class="fas fa-boxes text-blue-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Total Products</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ $totalProducts }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Customers -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-green-100 rounded-lg">
                            <i class="fas fa-users text-green-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Total Customers</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ $totalCustomers }}</p>
                        </div>
                    </div>
                </div>

                <!-- Pending Returns -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-red-100 rounded-lg">
                            <i class="fas fa-undo text-red-600 text-lg lg:text-xl"></i>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <h3 class="text-xs lg:text-sm font-medium text-gray-600">Pending Returns</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ $pendingReturnsCount }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 mb-6">
                <!-- Sales Chart -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6">
                    <h3 class="text-base lg:text-lg font-semibold text-gray-800 mb-4">Sales Trend (Last 7 Days)</h3>
                    <div class="chart-container">
                        @if($salesChartData->count() > 0)
                            <canvas id="salesChart"></canvas>
                        @else
                            <div class="flex items-center justify-center h-full">
                                <div class="text-center">
                                    <i class="fas fa-chart-bar text-4xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-500">No sales data available</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Top Products -->
                <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6">
                    <h3 class="text-base lg:text-lg font-semibold text-gray-800 mb-4">Top Products This Month</h3>
                    <div class="space-y-3">
                        @forelse($topProducts as $product)
                        <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                            <div class="truncate mr-2">
                                <span class="font-medium text-gray-800 truncate">{{ $product->product_name }}</span>
                                <p class="text-sm text-gray-600">{{ number_format($product->total_quantity) }} sold</p>
                            </div>
                            <span class="font-semibold text-green-600 whitespace-nowrap">Rs.{{ number_format($product->total_revenue, 2) }}</span>
                        </div>
                        @empty
                        <div class="text-center py-4">
                            <i class="fas fa-chart-bar text-4xl text-gray-400 mb-2"></i>
                            <p class="text-gray-500">No sales data available</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Recent Sales -->
            <div class="bg-white rounded-lg shadow-lg mb-6">
                <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                    <h3 class="text-base lg:text-lg font-semibold text-gray-800">Recent Sales</h3>
                </div>
                <div class="p-4 lg:p-6">
                    @if($recentSales->count() > 0)
                        <div class="space-y-4">
                            @foreach($recentSales as $sale)
                                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 bg-gray-50 rounded-lg">
                                    <div class="mb-2 sm:mb-0">
                                        <p class="font-semibold text-gray-800 truncate">{{ $sale->sale_code }}</p>
                                        <p class="text-sm text-gray-600">
                                            {{ $sale->created_at->format('M d, Y h:i A') }}
                                            @if($sale->customer)
                                                • {{ $sale->customer->name }}
                                            @endif
                                        </p>
                                    </div>
                                    <div class="text-left sm:text-right">
                                        <p class="font-bold text-green-600">Rs.{{ number_format($sale->total, 2) }}</p>
                                        <p class="text-sm text-gray-600 capitalize">{{ $sale->payment_method }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8">
                            <i class="fas fa-receipt text-4xl text-gray-400 mb-4"></i>
                            <p class="text-gray-500">No recent sales found</p>
                        </div>
                    @endif

                    <div class="mt-6 text-center">
                        <a href="{{ route('admin.reports.sales') }}"
                           class="text-primary-600 hover:text-primary-700 font-semibold">
                            View All Sales <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <a href="{{ route('admin.products.index') }}"
                   class="bg-primary-600 hover:bg-primary-700 text-white p-4 rounded-lg text-center flex flex-col items-center justify-center">
                    <i class="fas fa-boxes text-xl lg:text-2xl mb-2"></i>
                    <p class="font-semibold text-sm lg:text-base">Manage Products</p>
                </a>
                <a href="{{ route('admin.reports.sales') }}"
                   class="bg-green-600 hover:bg-green-700 text-white p-4 rounded-lg text-center flex flex-col items-center justify-center">
                    <i class="fas fa-chart-bar text-xl lg:text-2xl mb-2"></i>
                    <p class="font-semibold text-sm lg:text-base">View Reports</p>
                </a>
                <a href="{{ route('admin.cashiers.index') }}"
                   class="bg-purple-600 hover:bg-purple-700 text-white p-4 rounded-lg text-center flex flex-col items-center justify-center">
                    <i class="fas fa-users text-xl lg:text-2xl mb-2"></i>
                    <p class="font-semibold text-sm lg:text-base">Manage Cashiers</p>
                </a>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            

            // Sales Chart
            const salesChartCanvas = document.getElementById('salesChart');
            if (salesChartCanvas) {
                const salesCtx = salesChartCanvas.getContext('2d');
                const salesChart = new Chart(salesCtx, {
                    type: 'bar',
                    data: {
                        labels: @json($salesChartData->pluck('date')->map(fn($date) => \Carbon\Carbon::parse($date)->format('M d'))),
                        datasets: [{
                            label: 'Revenue (Rs.)',
                            data: @json($salesChartData->pluck('revenue')),
                            backgroundColor: 'rgba(16, 185, 129, 0.6)',
                            borderColor: 'rgb(16, 185, 129)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return 'Rs.' + value.toLocaleString();
                                    }
                                }
                            }
                        },
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return 'Revenue: Rs.' + context.parsed.y.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }
        });
    </script>
@endpush