@extends('layouts.main')

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

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Inventory Report</h2>
        <p class="text-gray-500 dark:text-gray-400">Current stock levels and values</p>
    </div>
    <a href="{{ route('dashboard') }}" class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg">
        <i class="fas fa-arrow-left mr-2"></i> Back
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border-l-4 border-indigo-500">
        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Products</p>
        <p class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mt-1">{{ $products->count() }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border-l-4 border-blue-500">
        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Inventory Value</p>
        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400 mt-1">${{ number_format($totalInventoryValue, 2) }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border-l-4 border-green-500">
        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Retail Value</p>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400 mt-1">${{ number_format($totalRetailValue, 2) }}</p>
    </div>
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
    <div class="p-4 border-b dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">All Products</h3>
    </div>
    @if($products->count() > 0)
        <table class="w-full">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
                    <th class="px-6 py-3 font-medium">Product</th>
                    <th class="px-6 py-3 font-medium">SKU</th>
                    <th class="px-6 py-3 font-medium text-right">Stock</th>
                    <th class="px-6 py-3 font-medium text-right">Cost</th>
                    <th class="px-6 py-3 font-medium text-right">Value</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                @foreach($products as $product)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4 font-medium text-gray-800 dark:text-white">{{ $product->name }}</td>
                        <td class="px-6 py-4 text-gray-600 dark:text-gray-400">{{ $product->sku }}</td>
                        <td class="px-6 py-4 text-right">
                            <span class="{{ $product->stock < 10 ? 'text-red-600 dark:text-red-400 font-bold' : 'text-gray-800 dark:text-white' }}">
                                {{ $product->stock }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right text-gray-600 dark:text-gray-400">${{ number_format($product->cost_price, 2) }}</td>
                        <td class="px-6 py-4 text-right font-medium text-gray-800 dark:text-white">${{ number_format($product->inventory_value, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <p class="text-gray-500 dark:text-gray-400 text-center py-8">No products in inventory</p>
    @endif
</div>

@if($lowStockProducts->count() > 0)
<div class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-xl shadow-md p-6 mt-6">
    <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-400 mb-4">
        <i class="fas fa-exclamation-triangle mr-2"></i>Low Stock Alert
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach($lowStockProducts as $product)
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border-l-4 border-yellow-400">
                <p class="font-medium text-gray-800 dark:text-white">{{ $product->name }}</p>
                <p class="text-sm text-red-600 dark:text-red-400 font-bold">Only {{ $product->stock }} left</p>
            </div>
        @endforeach
    </div>
</div>
@endif
@endsection