@extends('front.layout.app')
@section('content')

<style>
 section.indi-content {
    margin-bottom: 60px;
}
button#toggleDataset {
    color: #fff;
    background: #2185f5;
    border-radius: 10px;
    font-size: 12px;
    padding: 10px 25px;
    font-family: "Poppins";
    font-weight: 500;
    border: 0;
}
</style>

<main>


    <!--<section class="indi-banner">-->
    <!--    <div class="container">-->
    <!--        <div class="row">-->
    <!--            <div class="col-12">-->
    <!--                <h1 class="indi-ban-head">{{ $fundChart->sheet_name }}</h1>-->
    <!--            </div>-->
    <!--            <div class="col-12">-->
    <!--                <p class="indi-ban-para">{{ $fundChart->banner_desc ? $fundChart->banner_desc : '' }}</p>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->
    
     <form id="sheetForm">
            <div class="mb-3">
                <label for="input-1" class="form-label">Sheet 1 Name:</label>
                <input type="text" class="form-control sheet-input" id="input-1" required>
            </div>
            <div class="mb-3">
                <label for="input-2" class="form-label">Sheet 2 Name:</label>
                <input type="text" class="form-control sheet-input" id="input-2" required>
            </div>
            <!-- Add more input fields as needed -->
            <div class="mb-3">
                <label for="input-3" class="form-label">Sheet 3 Name:</label>
                <input type="text" class="form-control sheet-input" id="input-3" required>
            </div>
            <button type="button" class="btn btn-primary" id="fetchData">Fetch Data</button>
        </form>
        
        <button id="getAverageBtn">Get Average</button>
        
        

    <section class="indicators">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-lg-6">
                    <h4>{{ $fundChart->banner_heading ? $fundChart->banner_heading : '' }}</h4>
                </div>
                <div class="col-12 col-lg-6">
                </div>
            </div>
        </div>
    </section>
    <section class="indi-form">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="javascript:;"  onsubmit="return false;">
                        <div class="row gy-4">
                            <div class="col-12 col-lg-4">
                                <div class="diff-form">
                                    <label for="country">Country</label>
                                    <select name="country" id="country" class="country">
                                        <option selected value="united States (US)">United States (US)</option>
                                    </select>
                                </div>
                            </div>
                             
                            <div class="col-12 col-lg-4">
                                <div class="form-radio text-center">
                                    <input type="radio" name="years" class="year-checkbox" value="all" checked>
                                    <label for="all">ALL</label>
                                    <input type="radio" name="years" class="year-checkbox"  value="25">
                                    <label for="25y">25Y</label>
                                    <input type="radio" name="years" class="year-checkbox"  value="10">
                                    <label for="10y">10Y</label>
                                    <input type="radio" name="years" class="year-checkbox"  value="5">
                                    <label for="5y">5Y</label>
                                    <input type="radio" name="years" class="year-checkbox" value="3">
                                    <label for="3y">3Y</label>
                                    <input type="radio" name="years" class="year-checkbox" value="1">
                                    <label for="1y">1Y</label>
                                </div>
                            </div>
                              
                            <div class="col-12 col-lg-4">
                                <div class="text-center">
                                      <button id="downloadCSV">Download CSV</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <section class="indi-graph">
        <div class="container">
            <div class="row">
                      <div class="col-12 mt-5 mb-4 text-center">
         <!--<button id="toggleDataset">Toggle Data Sets</button>-->
    </div>
                <div class="col-12">
                    <canvas id="{{ $fundChart->slug }}" width="800" height="400"></canvas>
                </div>
          
            </div>
        </div>
    </section>


    <section class="faq-links">
        <div class="container">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p>Sources: <a href="#"> {{ $fundChart->sources ? $fundChart->sources : '' }} </a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section class="indi-f-aq">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    Additional Indicator Details
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                   {!! $fundChart->additional_detail ? $fundChart->additional_detail : '' !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section class="indi-content">
        <div class="container">
            <div class="row">
               <!--{!! $fundChart->description ? $fundChart->description : '' !!}-->
            </div>
        </div>
    </section>
    
</main>

@endsection
@section('script')

<script src="{{ asset('assets/front/js/suggestions.js') }}"></script>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- Include Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- Include Chart.js library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Include Chart.js adapter for Moment.js -->
<script src="https://unpkg.com/chartjs-adapter-moment@latest/dist/chartjs-adapter-moment.min.js"></script>

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@latest"></script>

<script type="text/javascript">
    // Assuming you use Auth to check user status and a User model that includes a membership_id attribute
    window.AuthUser = @json(Auth::check());
    window.UserMembershipId = @json(Auth::check() ? Auth::user()->membership_id : null);
</script>



<script>
    
    
$(document).ready(function () {
    var ctx = document.getElementById('{{ $fundChart->slug }}').getContext('2d');
    var ujcChart;
    var masterData = {}; // Object to hold all original data keyed by sheet name

    $('#fetchData').click(function() {
        if (ujcChart) {
            ujcChart.destroy(); // Destroy the existing chart to start fresh
        }
        masterData = {}; // Reset the master data
        $('.sheet-input').each(function() {
            var sheetName = $(this).val();
            if (sheetName) {
                fetchUJCData(sheetName);
            }
        });
    });

function fetchUJCData(sheetName) {
    var apiUrl = "{{ url('/spread-sheet-data') }}";
    $.ajax({
        url: apiUrl,
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        data: {
            sheet_name: sheetName,
        },
        success: function(data) {
            console.log('Raw data for sheet:', sheetName, data); // Log the raw data
            masterData[sheetName] = data.map(function(row) {
                console.log('Row:', row); // Log the row data
                var date = new Date(row[3]); // Convert string to date
                var value = parseFloat(row[5]);
                console.log('Parsed Date:', date, 'Value:', value); // Log the parsed date and value
                return { date: date, value: value };
            }).filter(item => !isNaN(item.date.getTime())); // Filter out invalid dates
            console.log('Processed data:', masterData[sheetName]); // Check the processed data
            filterAndDisplayData(); // Filter and display the data based on the current selected radio button
        },
        error: function(error) {
            console.error('Error fetching sheet data:', error);
        }
    });
}

    $('.year-checkbox').change(function() {
        filterAndDisplayData(); // Filter and display the data when a radio button changes
    });

 function filterAndDisplayData() {
    var selectedYears = $('.year-checkbox:checked').val();
    var currentYear = new Date().getFullYear();
    var filteredData = {};

    // Filter the masterData based on the selected year range
    Object.keys(masterData).forEach(function(sheetName) {
        filteredData[sheetName] = masterData[sheetName].filter(function(item) {
            var itemYear = item.date.getFullYear();
            return selectedYears === 'all' || currentYear - itemYear < parseInt(selectedYears);
        });
    });

    console.log('Filtered data ready for chart update:', filteredData); // This should show the filtered data
    updateChart(filteredData);
}

// Attach click event handler to the "Get Average" button
$('#getAverageBtn').click(function() {
    // Calculate the average dataset
    const averageDataset = calculateAverageDataset(masterData);
    
    // Update the chart with the average dataset
    updateChartWithAverage(averageDataset);
});

// Function to calculate the average dataset
function calculateAverageDataset(masterData) {
    const dateSumsAndCounts = {};

    // Loop through all datasets in masterData
    Object.values(masterData).forEach((dataset) => {
        dataset.forEach((dataPoint) => {
            const dateKey = dataPoint.date.toISOString();
            if (!dateSumsAndCounts[dateKey]) {
                dateSumsAndCounts[dateKey] = { sum: 0, count: 0 };
            }
            dateSumsAndCounts[dateKey].sum += dataPoint.value;
            dateSumsAndCounts[dateKey].count++;
        });
    });

    // Calculate the average for each date
    const averageData = Object.entries(dateSumsAndCounts).map(([dateKey, { sum, count }]) => {
        return { x: new Date(dateKey), y: sum / count };
    });

    // Sort the average data by date
    averageData.sort((a, b) => a.x - b.x);

    return averageData;
}

// Function to update the chart with the average dataset
function updateChartWithAverage(averageDataset) {
    if (!ujcChart) {
        console.error('Chart is not initialized.');
        return;
    }

    ujcChart.data.datasets.push({
        label: 'Average',
        data: averageDataset,
        borderColor: '#2185f5', // Default to blue if no color is set
        backgroundColor: '#2185f5',
        borderWidth: 2
    });

    ujcChart.update();
}

    function updateChart(filteredData) {
         console.log('Filtered Data for Chart:', filteredData); 
        if (ujcChart) {
            ujcChart.destroy(); // Destroy the existing chart to start fresh
        }
        var datasets = [];
        var labels = [];

        // Generate labels only if filteredData has at least one sheet with data
        if (Object.keys(filteredData).length > 0 && filteredData[Object.keys(filteredData)[0]].length > 0) {
            labels = filteredData[Object.keys(filteredData)[0]]
                .map(item => item.date)
                .filter(date => !isNaN(date.getTime()))  // Filter out invalid dates
                .map(date => date.toISOString().substring(0, 10)); // Format date
        }

        Object.keys(filteredData).forEach(function(sheetName) {
            datasets.push({
                label: sheetName,
                data: filteredData[sheetName].map(item => item.value),
                borderColor: getRandomColor(),
                fill: false
            });
        });

        // Initialize the chart with the datasets
        ujcChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'year',
                            tooltipFormat: 'yyyy-MM-dd'
                        },
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Value'
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                }
            }
        });
    }

    function getRandomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return `rgb(${r},${g},${b})`; // Generate a random color for the dataset
    }
});






</script>

@endsection