@extends('layouts.admin')

@section('content')
  <div class="flex-1 p-4 lg:p-6 w-full lg:w-auto">
            <!-- Header Section -->
            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-6">
                <h1 class="text-xl lg:text-2xl font-bold text-gray-800 mb-4 lg:mb-0">Inventory Reports</h1>
                <div class="flex">
                    <a href="{{ route('admin.products.index') }}"
                       class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center text-sm lg:text-base w-full lg:w-auto">
                        <i class="fas fa-boxes mr-2"></i> Manage Products
                    </a>
                </div>
            </div>

            <!-- Report Type Filter -->
            <div class="bg-white rounded-lg shadow-lg p-4 lg:p-6 mb-6">
                <form method="GET" class="flex">
                    <div class="flex-1">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Report Type</label>
                        <select name="report_type" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base"
                                onchange="this.form.submit()">
                            <option value="stock_levels" {{ $reportType == 'stock_levels' ? 'selected' : '' }}>Stock Levels</option>
                            <option value="low_stock" {{ $reportType == 'low_stock' ? 'selected' : '' }}>Low Stock Alerts</option>
                            <option value="best_sellers" {{ $reportType == 'best_sellers' ? 'selected' : '' }}>Best Sellers</option>
                        </select>
                    </div>
                </form>
            </div>

            <!-- Summary Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-6">
                <div class="stat-card 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-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">{{ number_format($products->count()) }}</p>
                        </div>
                    </div>
                </div>

                <div class="stat-card 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</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($lowStockProducts->count()) }}</p>
                        </div>
                    </div>
                </div>

                <div class="stat-card bg-white rounded-lg shadow-lg p-4 lg:p-6 border-l-4 border-red-500">
                    <div class="flex items-center">
                        <div class="p-2 lg:p-3 bg-red-100 rounded-lg">
                            <i class="fas fa-times-circle 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">Out of Stock</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">{{ number_format($outOfStockProducts->count()) }}</p>
                        </div>
                    </div>
                </div>

                <div class="stat-card 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">Stock Value</h3>
                            <p class="text-xl lg:text-2xl font-bold text-gray-900">Rs.{{ number_format($totalStockValue, 2) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            @if($reportType == 'stock_levels')
            <!-- Stock Levels Report -->
            <div class="bg-white rounded-lg shadow-lg overflow-hidden 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">Current Stock Levels</h3>
                </div>

                <!-- Desktop Table View -->
                <div class="hidden lg:block">
                    <div class="table-container overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Code</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Stock</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Threshold</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock Value</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($products as $product)
                                <tr class="{{ $product->isLowStock() ? 'bg-yellow-50' : '' }} hover:bg-gray-50">
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $product->product_name }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $product->product_code }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900 capitalize">
                                        {{ $product->product_type }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ number_format($product->quantity_in_stock) }} {{ $product->unit }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ number_format($product->low_stock_threshold) }} {{ $product->unit }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                                        @if($product->quantity_in_stock <= 0)
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                Out of Stock
                                            </span>
                                        @elseif($product->isLowStock())
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                Low Stock
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                In Stock
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-semibold text-green-600">
                                        Rs.{{ number_format($product->quantity_in_stock * $product->cost, 2) }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Mobile Card View -->
                <div class="lg:hidden space-y-4 p-4">
                    @foreach($products as $product)
                    <div class="product-card bg-white border border-gray-200 rounded-lg p-4 {{ $product->isLowStock() ? 'bg-yellow-50 border-yellow-200' : '' }}">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-800 text-sm">{{ $product->product_name }}</h4>
                                <p class="text-xs text-gray-600">{{ $product->product_code }} • {{ $product->product_type }}</p>
                            </div>
                            <div class="text-right">
                                @if($product->quantity_in_stock <= 0)
                                    <span class="status-badge inline-flex items-center px-2 py-1 rounded-full font-medium bg-red-100 text-red-800">
                                        Out
                                    </span>
                                @elseif($product->isLowStock())
                                    <span class="status-badge inline-flex items-center px-2 py-1 rounded-full font-medium bg-yellow-100 text-yellow-800">
                                        Low
                                    </span>
                                @else
                                    <span class="status-badge inline-flex items-center px-2 py-1 rounded-full font-medium bg-green-100 text-green-800">
                                        OK
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3 text-xs">
                            <div>
                                <span class="text-gray-600">Current:</span>
                                <span class="font-medium ml-1">{{ number_format($product->quantity_in_stock) }} {{ $product->unit }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600">Threshold:</span>
                                <span class="font-medium ml-1">{{ number_format($product->low_stock_threshold) }} {{ $product->unit }}</span>
                            </div>
                            <div class="col-span-2">
                                <span class="text-gray-600">Stock Value:</span>
                                <span class="font-semibold text-green-600 ml-1">Rs.{{ number_format($product->quantity_in_stock * $product->cost, 2) }}</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if($reportType == 'low_stock')
            <!-- Low Stock Alerts -->
            <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
                <div class="px-4 lg:px-6 py-4 border-b border-gray-200 bg-yellow-50">
                    <h3 class="text-base lg:text-lg font-semibold text-yellow-800">Low Stock Alerts</h3>
                    <p class="text-xs lg:text-sm text-yellow-600 mt-1">Products that need immediate attention</p>
                </div>

                <!-- Desktop Table View -->
                <div class="hidden lg:block">
                    <div class="table-container overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Stock</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Threshold</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shortfall</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Sold</th>
                                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($reorderProducts as $product)
                                <tr class="bg-yellow-50 hover:bg-yellow-100">
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $product->product_name }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">
                                        {{ number_format($product->quantity_in_stock) }} {{ $product->unit }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ number_format($product->low_stock_threshold) }} {{ $product->unit }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">
                                        {{ number_format(max(0, $product->low_stock_threshold - $product->quantity_in_stock)) }} {{ $product->unit }}
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @php
                                            $lastSale = $product->sales->sortByDesc('created_at')->first();
                                        @endphp
                                        @if($lastSale)
                                            {{ $lastSale->created_at->diffForHumans() }}
                                        @else
                                            Never
                                        @endif
                                    </td>
                                    <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="{{ route('admin.products.edit', $product) }}"
                                           class="text-blue-600 hover:text-blue-900 flex items-center">
                                            <i class="fas fa-edit mr-1"></i> Restock
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Mobile Card View -->
                <div class="lg:hidden space-y-4 p-4">
                    @foreach($reorderProducts as $product)
                    <div class="product-card bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-800 text-sm">{{ $product->product_name }}</h4>
                                <p class="text-xs text-yellow-700 font-medium">Needs Restocking</p>
                            </div>
                            <a href="{{ route('admin.products.edit', $product) }}"
                               class="text-blue-600 hover:text-blue-800 text-sm flex items-center">
                                <i class="fas fa-edit mr-1"></i> Restock
                            </a>
                        </div>

                        <div class="grid grid-cols-2 gap-3 text-xs">
                            <div>
                                <span class="text-gray-600">Current:</span>
                                <span class="font-semibold text-red-600 ml-1">{{ number_format($product->quantity_in_stock) }} {{ $product->unit }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600">Threshold:</span>
                                <span class="font-medium ml-1">{{ number_format($product->low_stock_threshold) }} {{ $product->unit }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600">Shortfall:</span>
                                <span class="font-semibold text-red-600 ml-1">{{ number_format(max(0, $product->low_stock_threshold - $product->quantity_in_stock)) }} {{ $product->unit }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600">Last Sold:</span>
                                <span class="font-medium ml-1">
                                    @php
                                        $lastSale = $product->sales->sortByDesc('created_at')->first();
                                    @endphp
                                    @if($lastSale)
                                        {{ $lastSale->created_at->diffForHumans() }}
                                    @else
                                        Never
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if($reportType == 'best_sellers')
            <!-- Best Sellers -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
                <!-- Best Selling Products -->
                <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                    <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">Best Selling Products (Last 30 Days)</h3>
                    </div>
                    <div class="p-4 lg:p-6">
                        <div class="space-y-3">
                            @foreach($bestSellingProducts as $product)
                            <div class="product-card flex items-center justify-between p-3 lg:p-4 bg-gray-50 rounded-lg">
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-semibold text-gray-800 text-sm lg:text-base truncate">{{ $product->product_name }}</h4>
                                    <p class="text-xs lg:text-sm text-gray-600 truncate">{{ $product->product_code }}</p>
                                </div>
                                <div class="text-right ml-3">
                                    <p class="font-bold text-green-600 text-sm lg:text-base">{{ number_format($product->total_sold) }} sold</p>
                                    <p class="text-xs lg:text-sm text-gray-600">
                                        Rs.{{ number_format(($product->sales_sum_total_price ?? 0), 2) }} revenue
                                    </p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Stock Value by Product -->
                <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                    <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">Highest Stock Value</h3>
                    </div>
                    <div class="p-4 lg:p-6">
                        <div class="space-y-3">
                            @foreach($products->sortByDesc(fn($p) => $p->quantity_in_stock * $p->cost)->take(10) as $product)
                            <div class="product-card flex items-center justify-between p-3 lg:p-4 bg-gray-50 rounded-lg">
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-semibold text-gray-800 text-sm lg:text-base truncate">{{ $product->product_name }}</h4>
                                    <p class="text-xs lg:text-sm text-gray-600">{{ number_format($product->quantity_in_stock) }} in stock</p>
                                </div>
                                <div class="text-right ml-3">
                                    <p class="font-bold text-blue-600 text-sm lg:text-base">Rs.{{ number_format($product->quantity_in_stock * $product->cost, 2) }}</p>
                                    <p class="text-xs lg:text-sm text-gray-600">Cost: Rs.{{ number_format($product->cost, 2) }}</p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
@endsection