@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">{{ __('Product Performance Report') }}</h4>
                    <div>
                        <a href="{{ route('reports.products', ['report_type' => request('report_type'), 'start_date' => request('start_date'), 'end_date' => request('end_date'), 'category_id' => request('category_id'), '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">
                    <form method="GET" action="{{ route('reports.products') }}" class="mb-4">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label for="report_type" class="form-label">{{ __('Report Type') }}</label>
                                <select class="form-select" id="report_type" name="report_type" onchange="this.form.submit()">
                                    <option value="daily" {{ request('report_type') == 'daily' ? 'selected' : '' }}>{{ __('Daily') }}</option>
                                    <option value="weekly" {{ request('report_type') == 'weekly' ? 'selected' : '' }}>{{ __('Weekly') }}</option>
                                    <option value="monthly" {{ request('report_type') == 'monthly' ? 'selected' : '' }}>{{ __('Monthly') }}</option>
                                    <option value="custom" {{ request('report_type') == 'custom' ? 'selected' : '' }}>{{ __('Custom Range') }}</option>
                                </select>
                            </div>
                            
                            @if(request('report_type') == 'custom')
                            <div class="col-md-3 mb-3">
                                <label for="start_date" class="form-label">{{ __('Start Date') }}</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" value="{{ request('start_date', $startDate) }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="end_date" class="form-label">{{ __('End Date') }}</label>
                                <input type="date" class="form-control" id="end_date" name="end_date" value="{{ request('end_date', $endDate) }}">
                            </div>
                            @endif
                            
                            <div class="col-md-3 mb-3">
                                <label for="category_id" class="form-label">{{ __('Category') }}</label>
                                <select class="form-select" id="category_id" name="category_id">
                                    <option value="">{{ __('All Categories') }}</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            @if(request('report_type') == 'custom')
                            <div class="col-md-3 mb-3 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary">{{ __('Apply Filters') }}</button>
                            </div>
                            @endif
                        </div>
                    </form>

                    <div class="report-header mb-4">
                        <h5>{{ __('Report Period') }}: {{ $startDate }} {{ __('to') }} {{ $endDate }}</h5>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>{{ __('Product') }}</th>
                                    <th>{{ __('Category') }}</th>
                                    <th class="text-end">{{ __('Quantity Sold') }}</th>
                                    <th class="text-end">{{ __('Total Sales') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($products as $product)
                                <tr>
                                    <td>{{ $product->product->name }}</td>
                                    <td>{{ $product->product->category->name }}</td>
                                    <td class="text-end">{{ $product->total_quantity }}</td>
                                    <td class="text-end">{{ number_format($product->total_sales, 2) }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center">{{ __('No product data available for the selected period') }}</td>
                                </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr class="fw-bold">
                                    <td colspan="2">{{ __('Total') }}</td>
                                    <td class="text-end">{{ $products->sum('total_quantity') }}</td>
                                    <td class="text-end">{{ number_format($products->sum('total_sales'), 2) }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div class="mt-4">
                        <h5>{{ __('Top 5 Products') }}</h5>
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="productChart"></canvas>
                        </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() {
        // Get top 5 products
        const products = @json($products->take(5));
        
        if (products.length > 0) {
            const ctx = document.getElementById('productChart').getContext('2d');
            
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: products.map(p => p.product.name),
                    datasets: [{
                        label: '{{ __("Quantity Sold") }}',
                        data: products.map(p => p.total_quantity),
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
        
        // Handle report type change
        document.getElementById('report_type').addEventListener('change', function() {
            if (this.value === 'custom') {
                // Don't submit form automatically for custom, let user select dates
                return false;
            }
            this.form.submit();
        });
    });
</script>
@endsection