@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-3">Will Call Operations Dashboard</h1>
            
            <!-- Date Range Filter -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" action="{{ route('willcall.dashboard') }}" class="row g-3">
                        <div class="col-md-4">
                            <label for="date_from" class="form-label">From Date</label>
                            <input type="date" class="form-control" id="date_from" name="date_from" value="{{ $dateFrom }}">
                        </div>
                        <div class="col-md-4">
                            <label for="date_to" class="form-label">To Date</label>
                            <input type="date" class="form-control" id="date_to" name="date_to" value="{{ $dateTo }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary">Apply Filter</button>
                                <a href="{{ route('willcall.orders') }}" class="btn btn-secondary">View Orders</a>
                                <button type="button" class="btn btn-success" onclick="exportData()">Export</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Key Metrics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Total Orders</h5>
                    <h2 class="mb-0">{{ number_format($metrics['summary']['total_orders']) }}</h2>
                    @if(isset($kpis['growth_metrics']['order_growth']))
                        <small class="{{ $kpis['growth_metrics']['order_growth'] >= 0 ? 'text-success' : 'text-danger' }}">
                            <i class="fas fa-{{ $kpis['growth_metrics']['order_growth'] >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                            {{ abs(round($kpis['growth_metrics']['order_growth'], 1)) }}%
                        </small>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Total Revenue</h5>
                    <h2 class="mb-0">${{ number_format($metrics['summary']['total_revenue'], 2) }}</h2>
                    @if(isset($kpis['growth_metrics']['revenue_growth']))
                        <small class="{{ $kpis['growth_metrics']['revenue_growth'] >= 0 ? 'text-success' : 'text-danger' }}">
                            <i class="fas fa-{{ $kpis['growth_metrics']['revenue_growth'] >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                            {{ abs(round($kpis['growth_metrics']['revenue_growth'], 1)) }}%
                        </small>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Average Order Value</h5>
                    <h2 class="mb-0">${{ number_format($metrics['summary']['avg_order_value'], 2) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Total Items</h5>
                    <h2 class="mb-0">{{ number_format($metrics['summary']['total_items']) }}</h2>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Fulfillment Metrics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Delivered Orders</h5>
                    <h2 class="mb-0">{{ number_format($metrics['fulfillment_metrics']['delivered_orders']) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Pending Fulfillment</h5>
                    <h2 class="mb-0 text-warning">{{ number_format($metrics['fulfillment_metrics']['pending_fulfillment']) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Avg. Fulfillment Time</h5>
                    <h2 class="mb-0">{{ round($metrics['fulfillment_metrics']['avg_fulfillment_hours'], 1) }} hrs</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Same-Day Deliveries</h5>
                    <h2 class="mb-0">{{ number_format($metrics['fulfillment_metrics']['same_day_deliveries']) }}</h2>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Customer Metrics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Unique Customers</h5>
                    <h2 class="mb-0">{{ number_format($metrics['customer_metrics']['unique_customers']) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Repeat Customers</h5>
                    <h2 class="mb-0">{{ number_format($metrics['customer_metrics']['repeat_customers']) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Repeat Rate</h5>
                    <h2 class="mb-0">{{ $metrics['customer_metrics']['repeat_rate'] }}%</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-muted">Avg. Customer Value</h5>
                    <h2 class="mb-0">
                        ${{ $metrics['customer_metrics']['unique_customers'] > 0 ? 
                            number_format($metrics['summary']['total_revenue'] / $metrics['customer_metrics']['unique_customers'], 2) : 
                            '0.00' }}
                    </h2>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <!-- Orders by Supplier -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Orders by Supplier</h5>
                </div>
                <div class="card-body">
                    <canvas id="supplierChart"></canvas>
                    <div class="table-responsive mt-3">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Supplier</th>
                                    <th>Orders</th>
                                    <th>Items</th>
                                    <th>Revenue</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($metrics['orders_by_supplier'] as $supplier)
                                <tr>
                                    <td>{{ $supplier->supplier_name }}</td>
                                    <td>{{ number_format($supplier->order_count) }}</td>
                                    <td>{{ number_format($supplier->item_count) }}</td>
                                    <td>${{ number_format($supplier->total_revenue, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Orders by Status -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Orders by Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="statusChart"></canvas>
                    <div class="table-responsive mt-3">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Status</th>
                                    <th>Count</th>
                                    <th>Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $totalStatusOrders = $metrics['orders_by_status']->sum('order_count');
                                @endphp
                                @foreach($metrics['orders_by_status'] as $status)
                                <tr>
                                    <td>
                                        <span class="badge" style="background-color: {{ $status->color_code ?? '#6c757d' }}">
                                            {{ $status->status_name ?? 'Unknown' }}
                                        </span>
                                    </td>
                                    <td>{{ number_format($status->order_count) }}</td>
                                    <td>{{ $totalStatusOrders > 0 ? round(($status->order_count / $totalStatusOrders) * 100, 1) : 0 }}%</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <!-- Daily Trends -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Daily Order Trends</h5>
                </div>
                <div class="card-body">
                    <canvas id="dailyTrendsChart" height="80"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <!-- Top Products -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Top 10 Products</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Part #</th>
                                    <th>Name</th>
                                    <th>Qty Sold</th>
                                    <th>Revenue</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($metrics['top_products'] as $product)
                                <tr>
                                    <td>{{ $product->part_num }}</td>
                                    <td>{{ Str::limit($product->name, 30) }}</td>
                                    <td>{{ number_format($product->total_quantity) }}</td>
                                    <td>${{ number_format($product->total_revenue, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Top Customers -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Top 10 Customers</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Customer</th>
                                    <th>Email</th>
                                    <th>Orders</th>
                                    <th>Total Spent</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($metrics['customer_metrics']['top_customers'] as $customer)
                                <tr>
                                    <td>{{ $customer->customer_name }}</td>
                                    <td>{{ Str::limit($customer->customer_email, 25) }}</td>
                                    <td>{{ number_format($customer->order_count) }}</td>
                                    <td>${{ number_format($customer->total_spent, 2) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <!-- Hourly Distribution -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Orders by Hour of Day</h5>
                </div>
                <div class="card-body">
                    <canvas id="hourlyChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Day of Week Distribution -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Orders by Day of Week</h5>
                </div>
                <div class="card-body">
                    <canvas id="dayOfWeekChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <!-- Customers by Location -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Top Customer Locations</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Orders</th>
                                    <th>Customers</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($metrics['customer_metrics']['customers_by_city'] as $location)
                                <tr>
                                    <td>{{ $location->city }}</td>
                                    <td>{{ $location->state }}</td>
                                    <td>{{ number_format($location->order_count) }}</td>
                                    <td>{{ number_format($location->customer_count) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Supplier Chart
    const supplierData = @json($metrics['orders_by_supplier']);
    new Chart(document.getElementById('supplierChart'), {
        type: 'doughnut',
        data: {
            labels: supplierData.map(s => s.supplier_name),
            datasets: [{
                data: supplierData.map(s => s.order_count),
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // Status Chart
    const statusData = @json($metrics['orders_by_status']);
    new Chart(document.getElementById('statusChart'), {
        type: 'pie',
        data: {
            labels: statusData.map(s => s.status_name || 'Unknown'),
            datasets: [{
                data: statusData.map(s => s.order_count),
                backgroundColor: statusData.map(s => s.color_code || '#6c757d')
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // Daily Trends Chart
    const trendsData = @json($metrics['daily_trends']);
    new Chart(document.getElementById('dailyTrendsChart'), {
        type: 'line',
        data: {
            labels: trendsData.map(d => d.order_date),
            datasets: [{
                label: 'Orders',
                data: trendsData.map(d => d.order_count),
                borderColor: '#36A2EB',
                fill: false,
                yAxisID: 'y'
            }, {
                label: 'Revenue',
                data: trendsData.map(d => d.daily_revenue),
                borderColor: '#FF6384',
                fill: false,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: 'Order Count'
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: 'Revenue ($)'
                    },
                    grid: {
                        drawOnChartArea: false,
                    }
                }
            }
        }
    });
    
    // Hourly Chart
    const hourlyData = @json($kpis['hourly_distribution']);
    new Chart(document.getElementById('hourlyChart'), {
        type: 'bar',
        data: {
            labels: Array.from({length: 24}, (_, i) => i + ':00'),
            datasets: [{
                label: 'Orders',
                data: Array.from({length: 24}, (_, i) => {
                    const hourData = hourlyData.find(h => h.hour === i);
                    return hourData ? hourData.order_count : 0;
                }),
                backgroundColor: '#36A2EB'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // Day of Week Chart
    const dayData = @json($kpis['day_of_week_distribution']);
    new Chart(document.getElementById('dayOfWeekChart'), {
        type: 'bar',
        data: {
            labels: dayData.map(d => d.day_name),
            datasets: [{
                label: 'Orders',
                data: dayData.map(d => d.order_count),
                backgroundColor: '#FF6384'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});

function exportData() {
    const params = new URLSearchParams({
        date_from: document.getElementById('date_from').value,
        date_to: document.getElementById('date_to').value,
        format: 'csv'
    });
    window.location.href = '{{ route("willcall.export") }}?' + params.toString();
}
</script>
@endsection