@extends('patent::layouts.master')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('patent.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('patent.reports.index') }}">Reports</a></li>
                        <li class="breadcrumb-item active">Forecasting</li>
                    </ol>
                </div>
                <h4 class="page-title">Forecasting Report</h4>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Filters</h4>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('patent.reports.forecasting') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="date_from" class="form-label">Date From</label>
                                <input type="date" name="date_from" id="date_from" class="form-control" value="{{ $filters['date_from'] }}">
                            </div>
                            <div class="col-md-3">
                                <label for="date_to" class="form-label">Date To</label>
                                <input type="date" name="date_to" id="date_to" class="form-control" value="{{ $filters['date_to'] }}">
                            </div>
                            <div class="col-md-3">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-select">
                                    <option value="">All Statuses</option>
                                    <option value="pending" {{ $filters['status'] == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="approved" {{ $filters['status'] == 'approved' ? 'selected' : '' }}>Approved</option>
                                    <option value="paid" {{ $filters['status'] == 'paid' ? 'selected' : '' }}>Paid</option>
                                    <option value="rejected" {{ $filters['status'] == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="country" class="form-label">Country</label>
                                <input type="text" name="country" id="country" class="form-control" value="{{ $filters['country'] }}" placeholder="Enter country">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="mdi mdi-filter me-1"></i> Apply Filters
                                </button>
                                <a href="{{ route('patent.reports.forecasting') }}" class="btn btn-secondary">
                                    <i class="mdi mdi-refresh me-1"></i> Clear Filters
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Forecast Overview -->
    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-calendar-month widget-icon bg-primary-lighten text-primary"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Next Month Forecast">Next Month Forecast</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($forecasts['next_month_forecast']) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-primary me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Expected transactions
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-calendar-quarter widget-icon bg-success-lighten text-success"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Next Quarter Forecast">Next Quarter Forecast</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($forecasts['next_quarter_forecast']) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-success me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Expected transactions
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-calendar-year widget-icon bg-info-lighten text-info"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Next Year Forecast">Next Year Forecast</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($forecasts['next_year_forecast']) }}</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-info me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Expected transactions
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card widget-flat">
                <div class="card-body">
                    <div class="float-end">
                        <i class="mdi mdi-chart-line widget-icon bg-warning-lighten text-warning"></i>
                    </div>
                    <h5 class="text-muted fw-normal mt-0" title="Forecasting Accuracy">Forecasting Accuracy</h5>
                    <h3 class="mt-3 mb-3">{{ number_format($accuracyMetrics['accuracy_score'] * 100, 1) }}%</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-warning me-2"><i class="mdi mdi-arrow-up-bold"></i></span>
                        Model accuracy
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Revenue Projections -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Revenue Projections</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Monthly Revenue Forecast</h5>
                                <h3 class="text-primary">${{ number_format($revenueProjections['monthly_revenue_forecast'], 2) }}</h3>
                                <p class="text-muted mb-0">Next month</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Quarterly Revenue Forecast</h5>
                                <h3 class="text-success">${{ number_format($revenueProjections['quarterly_revenue_forecast'], 2) }}</h3>
                                <p class="text-muted mb-0">Next quarter</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Annual Revenue Forecast</h5>
                                <h3 class="text-info">${{ number_format($revenueProjections['annual_revenue_forecast'], 2) }}</h3>
                                <p class="text-muted mb-0">Next year</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Revenue Growth Rate</h5>
                                <h3 class="text-warning">{{ number_format($revenueProjections['revenue_growth_rate'], 2) }}%</h3>
                                <p class="text-muted mb-0">Expected growth</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Forecasting Charts -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Transaction Volume Forecast</h4>
                </div>
                <div class="card-body">
                    <canvas id="forecastChart" height="100"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Confidence Intervals</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Period</th>
                                    <th>Lower Bound</th>
                                    <th>Upper Bound</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Next Month</td>
                                    <td>{{ number_format($forecasts['next_month_forecast'] * 0.8) }}</td>
                                    <td>{{ number_format($forecasts['next_month_forecast'] * 1.2) }}</td>
                                </tr>
                                <tr>
                                    <td>Next Quarter</td>
                                    <td>{{ number_format($forecasts['next_quarter_forecast'] * 0.8) }}</td>
                                    <td>{{ number_format($forecasts['next_quarter_forecast'] * 1.2) }}</td>
                                </tr>
                                <tr>
                                    <td>Next Year</td>
                                    <td>{{ number_format($forecasts['next_year_forecast'] * 0.8) }}</td>
                                    <td>{{ number_format($forecasts['next_year_forecast'] * 1.2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Demand Forecasting -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Demand Forecasting</h4>
                </div>
                <div class="card-body">
                    <canvas id="demandChart" height="100"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Capacity Planning</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="text-center">
                                <h5 class="text-muted">Current Capacity</h5>
                                <h3 class="text-info">100%</h3>
                                <p class="text-muted mb-0">Utilization</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h5 class="text-muted">Required Capacity</h5>
                                <h3 class="text-warning">120%</h3>
                                <p class="text-muted mb-0">Next quarter</p>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="alert alert-warning">
                        <i class="mdi mdi-alert-circle me-2"></i>
                        <strong>Capacity Alert:</strong> Consider scaling up resources for the next quarter.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scenario Analysis -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Scenario Analysis</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card border-success">
                                <div class="card-body text-center">
                                    <i class="mdi mdi-trending-up text-success" style="font-size: 48px;"></i>
                                    <h5 class="mt-3 text-success">Best Case Scenario</h5>
                                    <h3 class="text-success">+25%</h3>
                                    <p class="text-muted">Optimistic growth</p>
                                    <span class="badge bg-success">20% Probability</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-primary">
                                <div class="card-body text-center">
                                    <i class="mdi mdi-chart-line text-primary" style="font-size: 48px;"></i>
                                    <h5 class="mt-3 text-primary">Most Likely Scenario</h5>
                                    <h3 class="text-primary">+10%</h3>
                                    <p class="text-muted">Expected growth</p>
                                    <span class="badge bg-primary">60% Probability</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-danger">
                                <div class="card-body text-center">
                                    <i class="mdi mdi-trending-down text-danger" style="font-size: 48px;"></i>
                                    <h5 class="mt-3 text-danger">Worst Case Scenario</h5>
                                    <h3 class="text-danger">-5%</h3>
                                    <p class="text-muted">Conservative estimate</p>
                                    <span class="badge bg-danger">20% Probability</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Accuracy Metrics -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Forecasting Accuracy Metrics</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Mean Absolute Error (MAE)</h5>
                                <h3 class="text-primary">{{ number_format($accuracyMetrics['mae'], 2) }}</h3>
                                <p class="text-muted mb-0">Average error</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Root Mean Square Error (RMSE)</h5>
                                <h3 class="text-success">{{ number_format($accuracyMetrics['rmse'], 2) }}</h3>
                                <p class="text-muted mb-0">Standard deviation</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Mean Absolute Percentage Error (MAPE)</h5>
                                <h3 class="text-info">{{ number_format($accuracyMetrics['mape'], 2) }}%</h3>
                                <p class="text-muted mb-0">Percentage error</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="text-muted">Overall Accuracy</h5>
                                <h3 class="text-warning">{{ number_format($accuracyMetrics['accuracy_score'] * 100, 1) }}%</h3>
                                <p class="text-muted mb-0">Model performance</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Forecast Chart
    const forecastCtx = document.getElementById('forecastChart').getContext('2d');
    
    // Generate sample historical and forecast data
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan+1', 'Feb+1', 'Mar+1'];
    const historicalData = [45, 52, 48, 61, 55, 67, 72, 68, 75, 82, 78, 85];
    const forecastData = [null, null, null, null, null, null, null, null, null, null, null, null, 88, 92, 95];
    
    new Chart(forecastCtx, {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'Historical Data',
                data: historicalData,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1,
                fill: false
            }, {
                label: 'Forecast',
                data: forecastData,
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderDash: [5, 5],
                tension: 0.1,
                fill: false
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Transactions'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Month'
                    }
                }
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            }
        }
    });

    // Demand Chart
    const demandCtx = document.getElementById('demandChart').getContext('2d');
    
    new Chart(demandCtx, {
        type: 'bar',
        data: {
            labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1+1', 'Q2+1'],
            datasets: [{
                label: 'Demand Forecast',
                data: [180, 220, 195, 240, 260, 280],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(255, 206, 86, 0.8)'
                ],
                borderColor: [
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Demand (Transactions)'
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.widget-flat {
    transition: transform 0.2s;
}

.widget-flat:hover {
    transform: translateY(-2px);
}

.widget-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.bg-primary-lighten {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.bg-success-lighten {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.bg-info-lighten {
    background-color: rgba(23, 162, 184, 0.1) !important;
}

.bg-warning-lighten {
    background-color: rgba(255, 193, 7, 0.1) !important;
}
</style>
@endpush