@extends('modules.head') @section('contenido')
    <div class="box">
        <h3>
            <a href="{{ route('product-forecast.index') }}">Product Forecast</a>
        </h3>
    </div>

    <section>
        <div class="box">
            <div class="box-body">

                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>SKU</label>
                            <input type="text" class="form-control" id="sku" value="{{$currentProduct->plu}}" >
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Branch</label>
                            <select class="form-control" id="branch_id">
                                <option value="">All</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ $currentBranch->id == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>From Date</label>
                            <input id="date-from" class="datepicker form-control" data-date-format="yyyy-mm-dd"
                                value="{{ $dateFrom }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>To Date</label>
                            <input id="date-to" class="datepicker form-control" data-date-format="yyyy-mm-dd"
                                value="{{ $dateTo }}">
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <label>Period</label>
                            <select class="form-control" id="periods">
                                <option value="30" data-freq="D">1M</option>
                                <option value="60" data-freq="D">2M</option>
                                <option value="90" data-freq="D" selected>3M</option>
                                <option value="180" data-freq="D">6M</option>
                                <option value="365" data-freq="D">12M</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <label>Seasonality</label>
                            <select class="form-control" id="seasonality">
                                <option value="daily">Daily</option>
                                <option value="weekly" selected>Weekly</option>
                                <option value="monthly">Monthly</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <button class="btn btn-primary form-control" id="get-data-btn" onclick="getForecastData(this)">Get Data</button>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-2">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="include-stockout" checked>
                                    Include Stock-out
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="include-history" checked>
                                    Include History
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="box-body invoice boxEdit">
                <div class="row">
                    <div class="col-md-12">
                        <canvas id="forecastChart"></canvas>
                    </div>
                </div>

                <script>
                    let chart = null;
                    const ctx = document.getElementById('forecastChart').getContext('2d');

                    function drawChart(dates, forecast, upper_bound, lower_bound, historical_dates, historical_values, in_stock) {
                        // Destroy existing chart if it exists
                        if (chart) {
                            chart.destroy();
                        }

                        const toDate = new Date($('#date-to').val());
                        
                        // Helper function to check if date string is a range
                        const isDateRange = dateStr => dateStr.includes(' to ');

                        // Helper function to parse date range
                        const parseDateRange = dateStr => {
                            const [start, end] = dateStr.split(' to ').map(d => new Date(d));
                            return {start, end};
                        };

                        // Create arrays for different colors based on date or date range
                        const forecastColors = dates.map(date => {
                            if (isDateRange(date)) {
                                const {end} = parseDateRange(date);
                                return end > toDate ? 'rgb(192, 75, 75)' : 'rgb(75, 192, 192)';
                            }
                            return new Date(date) > toDate ? 'rgb(192, 75, 75)' : 'rgb(75, 192, 192)';
                        });
                        
                        const boundColors = dates.map(date => {
                            if (isDateRange(date)) {
                                const {end} = parseDateRange(date);
                                return end > toDate ? 'rgba(192, 75, 75, 0.3)' : 'rgba(75, 192, 192, 0.3)';
                            }
                            return new Date(date) > toDate ? 'rgba(192, 75, 75, 0.3)' : 'rgba(75, 192, 192, 0.3)';
                        });

                        const boundBgColors = dates.map(date => {
                            if (isDateRange(date)) {
                                const {end} = parseDateRange(date);
                                return end > toDate ? 'rgba(192, 75, 75, 0.1)' : 'rgba(75, 192, 192, 0.1)';
                            }
                            return new Date(date) > toDate ? 'rgba(192, 75, 75, 0.1)' : 'rgba(75, 192, 192, 0.1)';
                        });

                        // Create array of colors for historical values based on in_stock
                        const historicalColors = historical_values.map((value, index) => {
                            return (in_stock[index] === 0 && value === 0) ? 'rgb(179, 137, 90)' : 'rgb(76, 118, 165)';
                        });

                        const datasets = [];

                        // Only add historical values if include-history is checked
                        if ($('#include-history').is(':checked')) {
                            datasets.push({
                                label: 'Historical Values',
                                data: historical_values,
                                borderColor: historicalColors.map(color => color.replace('rgb', 'rgba').replace(')', ', 0.9)')),
                                backgroundColor: historicalColors.map(color => color.replace('rgb', 'rgba').replace(')', ', 0.5)')),
                                pointRadius: 2,
                                showLine: false
                            });
                        }

                        datasets.push(
                            {
                                label: 'Forecast',
                                data: forecast,
                                borderColor: forecastColors,
                                fill: false,
                                tension: 0.1,
                                segment: {
                                    borderColor: ctx => forecastColors[ctx.p1DataIndex]
                                }
                            },
                            {
                                label: 'Upper Bound',
                                data: upper_bound,
                                borderColor: boundColors,
                                backgroundColor: boundBgColors,
                                fill: '+1',
                                tension: 0.1,
                                hidden: true,
                                segment: {
                                    borderColor: ctx => boundColors[ctx.p1DataIndex]
                                }
                            },
                            {
                                label: 'Lower Bound',
                                data: lower_bound,
                                borderColor: boundColors,
                                backgroundColor: boundBgColors,
                                fill: false,
                                hidden: true,
                                tension: 0.1,
                                segment: {
                                    borderColor: ctx => boundColors[ctx.p1DataIndex]
                                }
                            }
                        );

                        const data = {
                            labels: dates,
                            datasets: datasets
                        };

                        const config = {
                            type: 'line',
                            data: data,
                            options: {
                                responsive: true,
                                interaction: {
                                    intersect: false,
                                    mode: 'index'
                                },
                                plugins: {
                                    title: {
                                        display: true,
                                        text: 'Forecast Prediction'
                                    }
                                },
                                scales: {
                                    x: {
                                        display: true,
                                        title: {
                                            display: true,
                                            text: 'Dates'
                                        }
                                    },
                                    y: {
                                        display: true,
                                        title: {
                                            display: true,
                                            text: 'Forecast'
                                        }
                                    }
                                }
                            }
                        };

                        chart = new Chart(ctx, config);
                    }


                    function getForecastData(el) {
                        $(el).button('loading');
                        const sku = $('#sku').val();
                        const branch_id = $('#branch_id').val();
                        const from_date = $('#date-from').val();
                        const to_date = $('#date-to').val();
                        const periods = $('#periods').val();
                        const freq = $('#periods option:selected').data('freq');
                        const seasonality = $('#seasonality').val();
                        const include_stockout = $('#include-stockout').is(':checked');
                        const include_history = $('#include-history').is(':checked');
                        $.ajax({
                            url: '/product-forecast/info/get_data',
                            method: 'GET',
                            data: {
                                sku: sku,
                                branch_id: branch_id,
                                from_date: from_date,
                                to_date: to_date,
                                periods: periods,
                                freq: freq,
                                seasonality: seasonality,
                                include_history: include_history,
                                include_stockout: include_stockout
                            },
                            success: function(response) {
                                if(!response || !response.data){
                                    swal('Empty response', '', 'info');
                                    return;
                                }
                                const dates = response.data.dates || [];
                                const forecast = response.data.forecast || [];
                                const upper_bound = response.data.upper_bound || [];
                                const lower_bound = response.data.lower_bound || [];
                                const historical_dates = response.data.historical_dates || [];
                                const historical_values = response.data.historical_values || [];
                                const in_stock = response.data.in_stock || [];
                                
                                drawChart(dates, forecast, upper_bound, lower_bound, historical_dates, historical_values, in_stock);
                            },
                            error: function(xhr, status, error) {
                                console.error('Error fetching forecast data:', error);
                            },
                            complete: function() {
                                $(el).button('reset');
                            }
                        });
                    }
                </script>

            </div>
        </div>
    </section>
@endsection

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function() {
        $('.datepicker').datepicker({
            autoclose: true,
        });
        
        $('#get-data-btn').trigger('click');
    });
</script>