@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>

    <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 sheet_name = '{{ $fundChart->sheet_name }}';
    console.log('fundChart->sheet_name >>', sheet_name)
   
    var fetchedData = []; // Initialize the fetchedData array

    fetchUJCData(sheet_name);

    function fetchUJCData(sheet_name) {
        var apiUrl = "{{ url('/spread-sheet-data') }}"; // Make sure this points to the correct route
        var sheet = sheet_name;
        $.ajax({
            url: apiUrl,
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            data:{
                sheet_name:sheet,
            },
            success: function (data) {
                fetchedData = data; // Store the fetched data
                updateChart('all'); // Update the chart with all data
            },
            error: function (error) {
                console.error('Error fetching indicator data:', error);
            }
        });
    }
    
    function updateChart(yearRange) {
        
    var yearRange = $('input[name="years"]:checked').val(); // Get the selected year range

    var currentYear = new Date().getFullYear();
    var startYear = yearRange === 'all' ? 0 : currentYear - parseInt(yearRange);

    var filteredData = fetchedData.filter(function (item) {
        var observationYear = new Date(item[3]).getFullYear(); // Assuming item[3] is the date
        return yearRange === 'all' ? true : observationYear >= startYear;
    });

    var labels = filteredData.map(function (item) { return item[3]; });
    var values = filteredData.map(function (item) { return parseFloat(item[4]); });
    var compositeValues = filteredData.map(function (item) { return parseFloat(item[5]); });

    if (!ujcChart) {
        // Initialize the chart if it's not already initialized
        ujcChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Value',
                    data: values,
                    borderColor: 'rgba(0, 123, 255, 1)',
                    backgroundColor: 'rgba(0, 123, 255, 0.5)',
                    borderWidth: 1,
                    hidden: false // Initially show the 'Value' dataset
                }, 
                
                // {
                //     label: 'Composite Value',
                //     data: compositeValues,
                //     borderColor: 'rgba(255, 159, 64, 1)',
                //     backgroundColor: 'rgba(255, 159, 64, 0.5)',
                //     borderWidth: 1,
                //     hidden: true // Initially hide the 'Composite Value' dataset
                // }
                
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        onClick: function (e, legendItem, legend) {
                            e.preventDefault(); // Prevent default click action
                        }
                    }
                }
            }
        });
    } else {
        // Update chart data if it's already initialized
        ujcChart.data.labels = labels;
        ujcChart.data.datasets[0].data = values;
        // ujcChart.data.datasets[1].data = compositeValues;
        ujcChart.update();
    }
}

$('input[name="years"]').on('change', function () {
    console.log("Year range selected:", $(this).val());  // Check if the event triggers
    updateChart($(this).val());
});

    $('#toggleDataset').on('click', function () {
        toggleDataset();
    });

    $('#downloadCSV').on('click', function () {
        
        const loginUrl = '{{ url("/register") }}'; // Update with your actual login URL
        const membershipUrl = '{{ url("/pricing") }}'; // Update with your actual signup or subscription URL

        // Check if user data is fetched and if the user is logged in
        if (!window.AuthUser) {
            toastr.error('Please login or signup to download CSV.');
            setTimeout(function() {
                window.location.href = loginUrl;
            }, 2000); // Adjust delay time as needed
            return;
        }
        
        // if (Object.keys(chartDatasetsMap).length === 0) {
        //     toastr.error('No data fetched yet. Cannot download CSV.');
        //     return;
        // }
    
        // Check if user's membership_id is 1
        if (window.UserMembershipId !== "2") {
            toastr.error('Please subscribe our premium plan to download unlimited CSV.');
            setTimeout(function() {
                window.location.href = membershipUrl;
            }, 3000); // Adjust delay time as needed
            return;
        }
        
        
        downloadCSV($('input[name="years"]:checked').val());
    });

    function toggleDataset() {
        var ci = ujcChart;
        var valueDataset = ci.data.datasets[0];
        var compositeDataset = ci.data.datasets[1];

        valueDataset.hidden = !valueDataset.hidden;
        compositeDataset.hidden = !compositeDataset.hidden;

        var buttonText = valueDataset.hidden ? 'Value' : 'Composite Value';
        $('#toggleDataset').text('Show ' + buttonText);

        ci.update();
    }

    function downloadCSV(yearRange) {
        
        
        var filteredData = yearRange === 'all' ? fetchedData : fetchedData.filter(function (item) {
            var year = new Date(item[3]).getFullYear();
            return year.toString() === yearRange;
        });

        var csvContent = "data:text/csv;charset=utf-8,";
        csvContent += "Date,Value,Composite Value\n"; // Adding headers

        filteredData.forEach(function (item) {
            csvContent += item.join(",") + "\n"; // Assuming array format for each row
        });

        var encodedUri = encodeURI(csvContent);
        var link = document.createElement('a');
        link.setAttribute('href', encodedUri);
        link.setAttribute('download', 'ujc_data.csv');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
});



</script>

@endsection