@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">{{ __('Inventory Report') }}</h4>
                    <div>
                        <a href="{{ route('reports.inventory', ['export' => 'pdf']) }}" class="btn btn-light">
                            <i class="fas fa-file-pdf"></i> {{ __('Export PDF') }}
                        </a>
                        <button type="button" class="btn btn-light ms-2" onclick="window.print()">
                            <i class="fas fa-print"></i> {{ __('Print') }}
                        </button>
                    </div>
                </div>

                <div class="card-body">
                    <div class="report-header mb-4 d-flex justify-content-between align-items-center">
                        <h5>{{ __('Report Date') }}: {{ now()->format('Y-m-d') }}</h5>
                        <div class="d-flex gap-2">
                            <span class="badge bg-success">{{ __('Tracked') }}: <span id="trackedCount"></span></span>
                            <span class="badge bg-warning text-dark">{{ __('Low Stock') }}: <span id="lowStockCount"></span></span>
                        </div>
                    </div>

                    @forelse($productsByCategory as $category => $products)
                        <div class="category-section mb-4">
                            <h4 class="category-title">{{ $category ?? __('Uncategorized') }}</h4>
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Product Name') }}</th>
                                            <th>{{ __('SKU') }}</th>
                                            <th class="text-end">{{ __('Price') }}</th>
                                            <th class="text-center">{{ __('Tracked') }}</th>
                                            <th class="text-center">{{ __('Quantity') }}</th>
                                            <th class="text-center">{{ __('Reorder Level') }}</th>
                                            <th class="text-center">{{ __('Status') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($products as $product)
                                        <tr @if(method_exists($product, 'isLowStock') && $product->is_stock_tracked && $product->isLowStock()) class="table-warning" @endif>
                                            <td>
                                                <a href="{{ route('products.show', $product) }}" class="text-decoration-none">{{ $product->name }}</a>
                                            </td>
                                            <td>{{ $product->sku ?? '—' }}</td>
                                            <td class="text-end">{{ number_format($product->price, 2) }}</td>
                                            <td class="text-center">
                                                @if($product->is_stock_tracked)
                                                    <span class="badge bg-success">{{ __('Yes') }}</span>
                                                @else
                                                    <span class="badge bg-secondary">{{ __('No') }}</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @if($product->is_stock_tracked)
                                                    <span class="badge {{ (method_exists($product, 'isLowStock') && $product->isLowStock()) ? 'bg-warning text-dark' : 'bg-info' }}">
                                                        {{ $product->stock_quantity }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="text-center">{{ $product->is_stock_tracked ? ($product->reorder_level ?? '—') : '—' }}</td>
                                            <td class="text-center">
                                                @if($product->is_active)
                                                    <span class="badge bg-success">{{ __('Available') }}</span>
                                                @else
                                                    <span class="badge bg-danger">{{ __('Unavailable') }}</span>
                                                @endif
                                                @if($product->is_stock_tracked && method_exists($product, 'isLowStock') && $product->isLowStock())
                                                    <span class="badge bg-warning text-dark ms-1">{{ __('Reorder') }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @empty
                        <div class="alert alert-info">
                            {{ __('No products found in inventory') }}
                        </div>
                    @endforelse

                    <div class="mt-4">
                        <h5>{{ __('Inventory Summary') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="chart-container" style="position: relative; height:300px;">
                                    <canvas id="categoryChart"></canvas>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="chart-container" style="position: relative; height:300px;">
                                    <canvas id="availabilityChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const productsByCategory = @json($productsByCategory);
        // Counters
        let tracked = 0;
        let low = 0;
        Object.values(productsByCategory).forEach(products => {
            products.forEach(p => {
                if (p.is_stock_tracked) {
                    tracked++;
                    // Low stock if reorder_level is not null and quantity <= reorder_level
                    if (p.reorder_level !== null && Number(p.stock_quantity) <= Number(p.reorder_level)) {
                        low++;
                    }
                }
            });
        });
        const trackedEl = document.getElementById('trackedCount');
        const lowEl = document.getElementById('lowStockCount');
        if (trackedEl) trackedEl.textContent = tracked;
        if (lowEl) lowEl.textContent = low;
        
        if (Object.keys(productsByCategory).length > 0) {
            // Category distribution chart
            const categoryLabels = Object.keys(productsByCategory);
            const categoryData = categoryLabels.map(cat => productsByCategory[cat].length);
            
            const ctxCategory = document.getElementById('categoryChart').getContext('2d');
            new Chart(ctxCategory, {
                type: 'pie',
                data: {
                    labels: categoryLabels,
                    datasets: [{
                        data: categoryData,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.5)',
                            'rgba(54, 162, 235, 0.5)',
                            'rgba(255, 206, 86, 0.5)',
                            'rgba(75, 192, 192, 0.5)',
                            'rgba(153, 102, 255, 0.5)',
                            'rgba(255, 159, 64, 0.5)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        title: {
                            display: true,
                            text: '{{ __("Products by Category") }}'
                        }
                    }
                }
            });
            
            // Availability chart
            let availableCount = 0;
            let unavailableCount = 0;
            
            Object.values(productsByCategory).forEach(products => {
                products.forEach(product => {
                    if (product.is_active) {
                        availableCount++;
                    } else {
                        unavailableCount++;
                    }
                });
            });
            
            const ctxAvailability = document.getElementById('availabilityChart').getContext('2d');
            new Chart(ctxAvailability, {
                type: 'doughnut',
                data: {
                    labels: ['{{ __("Available") }}', '{{ __("Unavailable") }}'],
                    datasets: [{
                        data: [availableCount, unavailableCount],
                        backgroundColor: [
                            'rgba(75, 192, 192, 0.5)',
                            'rgba(255, 99, 132, 0.5)'
                        ],
                        borderColor: [
                            'rgba(75, 192, 192, 1)',
                            'rgba(255, 99, 132, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        title: {
                            display: true,
                            text: '{{ __("Product Availability") }}'
                        }
                    }
                }
            });
        }
    });
</script>
@endsection