@extends('layouts.app')

@section('title', 'Product Report')

@section('content')
<div class="page-header">
    <h2 class="page-title">Product Report</h2>
    <p class="page-subtitle">Analyze product sales and inventory levels</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-2xl border border-gray-100 card-elevated overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="section-title mb-0">Top Selling Products</h3>
        </div>
        <div class="overflow-x-auto scrollbar-thin">
            <table class="min-w-full divide-y divide-gray-100 text-sm">
                <thead>
                    <tr>
                        <th class="table-th">Product Name</th>
                        <th class="table-th text-right">Qty Sold</th>
                        <th class="table-th text-right">Revenue</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($topProducts as $product)
                    <tr class="table-row">
                        <td class="table-td font-medium text-gray-900">{{ $product->name }}</td>
                        <td class="table-td text-right text-gray-600">{{ $product->total_qty }}</td>
                        <td class="table-td text-right font-medium text-gray-900">₹{{ number_format($product->total_revenue, 2) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="px-6 py-12 text-center text-sm text-gray-500">No sales data available.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if(isset($topProducts) && $topProducts instanceof \Illuminate\Pagination\LengthAwarePaginator && $topProducts->hasPages())
            <div class="px-6 py-4 border-t border-gray-100">
                <x-pagination :paginator="$topProducts" />
            </div>
        @endif
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 card-elevated overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="section-title mb-0">Low Stock Products</h3>
        </div>
        <div class="overflow-x-auto scrollbar-thin">
            <table class="min-w-full divide-y divide-gray-100 text-sm">
                <thead>
                    <tr>
                        <th class="table-th">Product Name</th>
                        <th class="table-th text-right">Current Stock</th>
                        <th class="table-th text-right">Alert Limit</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($lowStock as $product)
                    <tr class="table-row">
                        <td class="table-td font-medium text-gray-900">{{ $product->name }}</td>
                        <td class="table-td text-right {{ $product->current_stock <= $product->alert_limit ? 'text-red-600 font-medium' : 'text-gray-600' }}">{{ $product->current_stock }}</td>
                        <td class="table-td text-right text-gray-600">{{ $product->alert_limit }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="px-6 py-12 text-center text-sm text-gray-500">All products are sufficiently stocked.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection