@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-header mb-4">
                <h1 class="h3">Global Reporting</h1>
                <p class="text-muted">Analytics and insights across all {{ auth()->user()->isSuperAdmin() ? '' : 'your assigned' }} companies</p>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" action="{{ route('global.reporting.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <label for="company_id" class="form-label">Company</label>
                            <select name="company_id" id="company_id" class="form-select">
                                <option value="">All Companies</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" {{ $selectedCompanyId == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="date_from" class="form-label">From Date</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" value="{{ $startDate }}">
                        </div>
                        <div class="col-md-3">
                            <label for="date_to" class="form-label">To Date</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" value="{{ $endDate }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary">Apply Filters</button>
                                <a href="{{ route('global.reporting.export', request()->all()) }}" class="btn btn-success">
                                    <i class="bi bi-download"></i> Export
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Key Performance Indicators -->
            <div class="row mb-4">
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">Total Revenue</h6>
                            <h3 class="mb-0 text-success">RM {{ number_format($kpis['total_revenue'], 2) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">Total Orders</h6>
                            <h3 class="mb-0">{{ number_format($kpis['total_orders']) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">Avg Order Value</h6>
                            <h3 class="mb-0">RM {{ number_format($kpis['average_order_value'], 2) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">Conversion Rate</h6>
                            <h3 class="mb-0">{{ $kpis['conversion_rate'] }}%</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">Total Customers</h6>
                            <h3 class="mb-0">{{ number_format($kpis['total_customers']) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">New Customers</h6>
                            <h3 class="mb-0">{{ number_format($kpis['new_customers']) }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <!-- Company Performance -->
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Company Performance</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Company</th>
                                            <th class="text-end">Revenue</th>
                                            <th class="text-end">Orders</th>
                                            <th class="text-end">Users</th>
                                            <th class="text-end">Websites</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($companyPerformance as $performance)
                                            <tr>
                                                <td>{{ $performance['company'] }}</td>
                                                <td class="text-end">RM {{ number_format($performance['revenue'], 2) }}</td>
                                                <td class="text-end">{{ $performance['orders'] }}</td>
                                                <td class="text-end">{{ $performance['users'] }}</td>
                                                <td class="text-end">{{ $performance['websites'] }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Top Products -->
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Top Products</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th class="text-end">Quantity</th>
                                            <th class="text-end">Revenue</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($topProducts as $product)
                                            <tr>
                                                <td>{{ Str::limit($product->product_name, 30) }}</td>
                                                <td class="text-end">{{ $product->total_quantity }}</td>
                                                <td class="text-end">RM {{ number_format($product->total_revenue, 2) }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center text-muted">No product data available</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <!-- Revenue by Company Chart -->
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Revenue by Company</h5>
                        </div>
                        <div class="card-body">
                            @if($revenueByCompany->count() > 0)
                                <canvas id="revenueChart"></canvas>
                            @else
                                <p class="text-center text-muted">No revenue data available</p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Payment Methods -->
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Payment Methods Distribution</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Method</th>
                                            <th class="text-end">Count</th>
                                            <th class="text-end">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($paymentMethods as $method)
                                            <tr>
                                                <td>{{ $method['method'] }}</td>
                                                <td class="text-end">{{ $method['count'] }}</td>
                                                <td class="text-end">RM {{ number_format($method['amount'], 2) }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center text-muted">No payment data available</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Orders Trend -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Orders Trend (Last 30 Days)</h5>
                </div>
                <div class="card-body">
                    @if($ordersTrend->count() > 0)
                        <canvas id="ordersTrendChart"></canvas>
                    @else
                        <p class="text-center text-muted">No order trend data available</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Revenue by Company Chart
    @if($revenueByCompany->count() > 0)
    const revenueCtx = document.getElementById('revenueChart');
    if (revenueCtx) {
        new Chart(revenueCtx, {
            type: 'pie',
            data: {
                labels: {!! json_encode($revenueByCompany->pluck('company')) !!},
                datasets: [{
                    data: {!! json_encode($revenueByCompany->pluck('revenue')) !!},
                    backgroundColor: [
                        '#FF6384',
                        '#36A2EB',
                        '#FFCE56',
                        '#4BC0C0',
                        '#9966FF',
                        '#FF9F40'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    }
    @endif

    // Orders Trend Chart
    @if($ordersTrend->count() > 0)
    const trendCtx = document.getElementById('ordersTrendChart');
    if (trendCtx) {
        new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($ordersTrend->pluck('date')) !!},
                datasets: [{
                    label: 'Orders',
                    data: {!! json_encode($ordersTrend->pluck('orders')) !!},
                    borderColor: '#36A2EB',
                    tension: 0.1,
                    yAxisID: 'y'
                }, {
                    label: 'Revenue (RM)',
                    data: {!! json_encode($ordersTrend->pluck('revenue')) !!},
                    borderColor: '#FF6384',
                    tension: 0.1,
                    yAxisID: 'y1'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left'
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
    }
    @endif
});
</script>
@endpush
@endsection