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

<main>
    <style>
    canvas#spDataChart {
    background: #fff;
}

canvas#gdpDataChart {
    background: #fff;
}
    canvas#sp500Chart {
    background: #fff;
}
canvas#gdpChart {
    background: #fff;
}
.wrapper{
  max-width: 450px;
  margin: 150px auto;
}

.real2 .wrapper .search-input{
  background: #fff;
  width: 100%;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}

.real2 .search-input input {
    height: 55px;
    width: 100%;
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 0 60px 0 20px;
    font-size: 17px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

.real2 .search-input.active input{
  border-radius: 5px 5px 0 0;
}

.real2 .search-input .autocom-box{
    padding: 0;
    opacity: 0;
    pointer-events: none;
    max-height: 280px;
    overflow-y: auto;
}

.real2 .search-input.active .autocom-box{
    padding: 0px 5px;
    opacity: 1;
    pointer-events: auto;
    overflow-x: hidden;
}

.real2 .autocom-box li{
    list-style: none;
    padding: 8px 12px;
    display: none;
    width: 100%;
    cursor: default;
    border-radius: 3px;
    margin: 2px;
    background: #fff;
}

.real2 .search-input.active .autocom-box li{
  display: block;
}
.real2 .autocom-box li:hover{
  background: #efefef;
}

.real2 .search-input .icon{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  color: #e4ff4b;
  cursor: pointer;
}
button#downloadCSVV, #DataNormalization, #ToggleDataSets, #removeData {
     background: #2185f5;
    color: #fff;
    padding: 11px 20px;
    border-radius: 0;
    font-family: 'Poppins';
    font-size: 13px;
    cursor: pointer;
    outline: 0;
    border: 0;
}





.lione, .litwo {
    width: 100% !important;
}

.lione label, .litwo label {
    margin-bottom: 0px;
}
.real2 img.img-line {
    width: 115%;
    position: absolute;
    height: 100%;
    left: -40px;
    display: none;
}

.real2 .img-div {
    height: unset;
    width: unset;
    position: relative;
}
.form-radio label {
    padding: 0 7px 3px 0px;
    color: #ffffff;
    font-weight: 400;
}

.displayNone {
    top: 67px;
    left: 0px;
    min-width: 345px;
}

.exo-menu23>li>a {
    display: block;
    padding: 0 26px 22px 10px;
    background: transparent;
    color: #fff;
    margin-top: 10px;
    height: 57px;
}

    </style>


    <section class="banner">
        <div class="main-slide">
            <div class="h-100 position-relative">
                <div class="container real ">
                    <div class="row justify-content-center">
                        <div class="col-12 col-lg-12">
                            <ul class="real23">
                                
<div class="typing-container">
<span id="typing"></span>
<span class="cursor">|</span>
</div>

                <li class="addGoldDiv d-none">
                    <h3>Gold</h3>
                    <h5><span class="blink blink-once goldPrice"></span></h5>
                    <p> <span class="blink blink-once goldPricePer"></span> </p>
                </li>
                            </ul>
                        </div>
                        <div class="banner-con">
                            <h2>Introducing the <br> <span>Economic Composite Index Builder</span> </h2>
                           

                           <div class="row">
                                <ul class="real2">
                                    <li class="lione row">
                                        <div class="search-input col-12 col-lg-6">
                                        <label for="">Select Your Preferred Economic Indicators.</label>
                                        </div>
                                        <div class="search-input col-12 col-lg-6 text-end">
                                       <button id="removeData">Clear Sections</button>
                                        </div>
                                        
                             
                            
                            
                                        <div class="search-input col-12 col-lg-4">
                                            
                                            
                                            
                                            
                                <input type="text" placeholder="Indicator #1" id="firstInput" class="indicator-input">
                                <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right "><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                                
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                            
                                           <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input col-12 col-lg-4">
                                            <input type="text" placeholder="Indicator #2" id="secondInput" class="indicator-input">
                                            
                                            <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">Economic Sectors & Indicators </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right "><a href="#">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                            
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input col-12 col-lg-4">
                                            <input type="text" placeholder="Indicator #3" id="thirdInput" class="indicator-input">
                                              <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right flyout-right-left"><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        
                                        
                                        <div class="search-input col-12 col-lg-4">
                                           <input type="text" placeholder="Indicator #4" id="firstInput1" class="indicator-input">
                                             <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right "><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                                           <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input col-12 col-lg-4">
                                            <input type="text" placeholder="Indicator #5" id="secondInput1" class="indicator-input">
                                              <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right "><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input col-12 col-lg-4">
                                            <input type="text" placeholder="Indicator #6" id="thirdInput1" class="indicator-input">
                                              <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right flyout-right-left"><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input col-12 col-lg-4">
                                           <input type="text" placeholder="Indicator #7" id="firstInput2" class="indicator-input">
                                             <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right "><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                                           <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input col-12 col-lg-4">
                                            <input type="text" placeholder="Indicator #8" id="secondInput2" class="indicator-input">
                                              <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right "><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        <div class="search-input col-12 col-lg-4">
                                            <input type="text" placeholder="Indicator #9" id="thirdInput2" class="indicator-input">
                                              <ul class="exo-menu exo-menu1 exo-menu23">
                                <li class="drop-down"><a href="#" class="belli">  </a>
                                    <ul class="drop-down-ul animated fadeIn displayNone">
                                        @php $sectors = \App\Models\Sector::where('status', 'active')->get(); @endphp
                                        @foreach($sectors as $sector)
                                        <li class="flyout-right flyout-right-left"><a href="javascript:;">{{ $sector->title }}</a>
                                            <ul class="animated fadeIn">
                                                <!--@if($sector->indicators)-->
                                                <!--@foreach($sector->indicators as $indicator)-->
                                                <!--<li><a class="dropdown-item populateValue" data-value="{{ $indicator->code }}" href="javascript:;" >{{ $indicator->banner_heading }}</a></li>-->
                                                <!--@endforeach-->
                                                <!--@endif-->
                                                
                                                @if($sector->fundCharts)
                                                @foreach($sector->fundCharts as $fundChart)
                                                <li><a class="dropdown-item populateValue" data-value="{{ $fundChart->sheet_name }}" href="javascript:;" >{{ $fundChart->sheet_name }}</a></li>
                                                @endforeach
                                                @endif
                                             
                                            </ul>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            </ul>
                                            <div class="autocom-box"></div>
                                        </div>
                                        
                                        
                                        
                                    </li>

                                    <li class="litwo">
                                        <label for="" style="opacity: 0;">Weight Them Based On Your
                                            Desired Relative Importance.</label>
                                        <div class="img-div">
                                            <img src="{{ URL::asset('assets/front/images/pro.png') }}" class="img-line" alt="">
                                            <div class="cir">
                                                <i class="fa-solid fa-gear"></i>
                                            </div>
                                        </div>
                                          <div class="btn-div text-center">
                                    <input type="button" class="build-index btn-rol" value="Build Index">
                                </div>
                                    </li>

                                    <li class="lithree">
                                        <div class="row">
                                            <div class="col-12 col-lg-4 pt-3">
                                                <label for="">Let The Tool Normalize, Compile and Show
                                                 You The Composite Value In a Single Chart.</label>
                                            </div>
                                              <div class="col-12 col-lg-4">
                                <!--<div class="form-radio text-center" id="yearRangi">-->
                                <!--    <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 class="form-radio text-center" id="yearRangi">
    <input type="radio" name="years" class="year-checkbox" id="all" value="all" checked>
    <label for="all">ALL</label>
    <input type="radio" name="years" class="year-checkbox" id="25y" value="25">
    <label for="25y">25Y</label>
    <input type="radio" name="years" class="year-checkbox" id="10y" value="10">
    <label for="10y">10Y</label>
    <input type="radio" name="years" class="year-checkbox" id="5y" value="5">
    <label for="5y">5Y</label>
    <input type="radio" name="years" class="year-checkbox" id="3y" value="3">
    <label for="3y">3Y</label>
    <input type="radio" name="years" class="year-checkbox" id="1y" value="1">
    <label for="1y">1Y</label>
</div>
                                
                            </div>
                            
                                             <div class="col-12 col-lg-4 text-end">
                                                
                                                <button id="DataNormalization">Show Composite Chart</button>
                                                <button id="ToggleDataSets" class="">Show Individual Metrics</button>
                                            </div>
                                        </div>
                                        
                                        
                                        

                                        <canvas id="economicChart" style=" width: 100%; background: white;"></canvas>
                                        <div class="col-12">
                                            <div class="text-end">
                                                  <button id="downloadCSVV" class="btn btn-primary my-2">Download CSV</button>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                              
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="three">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-lg-4">
                    <div class="all">
                        <img src="{{ URL::asset('assets/front/images/one.png') }}" class="img-fluid" alt="">
                        <h3>All Major Indicators and More Available Upon Request!</h3>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="all ol">
                        <img src="{{ URL::asset('assets/front/images/two.png') }}" class="img-fluid" alt="">
                        <h3>Real-Time Market Indicators</h3>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="all">
                        <img src="{{ URL::asset('assets/front/images/three.png') }}" class="img-fluid" alt="">
                        <h3>CSV Data Downloads</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="benefits">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="ben-head text-center">
                        <h1>Benefits</h1>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="ben-content text-center">
                        <img src="{{ URL::asset('assets/front/images/1.png') }}" alt="">
                        <h2>Customized Economic Analysis:</h2>
                        <p>Tailor economic insights to your specific needs. Choose from a diverse range of metrics, group them by sector, and build personalized charts that align with your unique analytical requirements.</p>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="ben-content text-center">
                        <img src="{{ URL::asset('assets/front/images/2.png') }}" alt="">
                        <h2>Real-Time Market Monitoring:</h2>
                        <p>Stay ahead with real-time updates. Access live data for key indices like the S&P 500, allowing you to make informed decisions based on the latest economic trends.</p>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="ben-content text-center">
                        <img src="{{ URL::asset('assets/front/images/3.png') }}" alt="">
                        <h2>Effortless Metric Comparison:</h2>
                        <p>Streamline your analysis with easy-to-use comparison charts. Evaluate multiple economic metrics side by side, gaining a comprehensive view of their impact on the economy. </p>
                    </div>
                </div>
                <div class="text-center mt-5">
                <a href="{{ route('benefits') }}" class="ok342">See all benefits</a>
                </div>
            </div>
        </div>
    </section>

    <section class="charts">
        <div class="container">
            <div class="row gy-5">
                <div class="col-12 col-lg-6">
                    <div class="chart-head">
                        <h1>Featured Default Charts</h1>
                    </div>
                </div>
                <div class="col-12 col-lg-6 ">
                    <div class="d-flex align-items-center justify-content-end h-100">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item d-none" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                    data-bs-target="#home-tab-pane" type="button" role="tab"
                                    aria-controls="home-tab-pane" aria-selected="true">Bar Charts</button>
                            </li>
                            <!--<li class="nav-item" role="presentation">-->
                            <!--    <button class="nav-link" id="profile-tab" data-bs-toggle="tab"-->
                            <!--        data-bs-target="#profile-tab-pane" type="button" role="tab"-->
                            <!--        aria-controls="profile-tab-pane" aria-selected="false">Line Charts</button>-->
                            <!--</li>-->
                        </ul>
                    </div>

                </div>

                <div class="col-12">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                            aria-labelledby="home-tab" tabindex="0">
                            <div class="row gy-5">
                                <div class="col-12 col-lg-6">
                                    <div class="chart-img">
                                        <canvas id="sp500Chart"></canvas>
                                    </div>
                            <div>
                                <div class="form-radio text-center">
                                    <input type="radio" name="years1" class="year-checkbox2" value="all" checked>
                                    <label for="all">ALL</label>
                                    <input type="radio" name="years1" class="year-checkbox2"  value="25">
                                    <label for="25y">25Y</label>
                                    <input type="radio" name="years1" class="year-checkbox2"  value="10">
                                    <label for="10y">10Y</label>
                                    <input type="radio" name="years1" class="year-checkbox2"  value="5">
                                    <label for="5y">5Y</label>
                                    <input type="radio" name="years1" class="year-checkbox2" value="3">
                                    <label for="3y">3Y</label>
                                    <input type="radio" name="years1" class="year-checkbox2" value="1">
                                    <label for="1y">1Y</label>
                                </div>
                            </div>
                                </div>
                               
              
                   
                           
                    
                            
                         
                     
       
 
                                <div class="col-12 col-lg-6">
                                    <div class="chart-img">
                                        <canvas id="german-10-yr-us-nominal-gdp-avg" style="background-color:white;"></canvas>
                                    </div>
                            <div>
                                <div class="form-radio text-center">
                                    <input type="radio" name="years2" class="year-checkbox2" value="all" checked>
                                    <label for="all">ALL</label>
                                    <input type="radio" name="years2" class="year-checkbox2"  value="25">
                                    <label for="25y">25Y</label>
                                    <input type="radio" name="years2" class="year-checkbox2"  value="10">
                                    <label for="10y">10Y</label>
                                    <input type="radio" name="years2" class="year-checkbox2"  value="5">
                                    <label for="5y">5Y</label>
                                    <input type="radio" name="years2" class="year-checkbox2" value="3">
                                    <label for="3y">3Y</label>
                                    <input type="radio" name="years2" class="year-checkbox2" value="1">
                                    <label for="1y">1Y</label>
                                </div>
                            </div>
                                </div>
                           
                            </div>
                        </div>
                        <!--<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab"-->
                        <!--    tabindex="0">-->
                        <!--    <div class="row gy-5">-->
                        <!--      <div class="col-12 col-lg-6">-->
                        <!--            <div class="chart-img">-->
                        <!--                <canvas id="spDataChart"></canvas>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--        <div class="col-12 col-lg-6">-->
                        <!--            <div class="chart-img">-->
                                      
                        <!--                <canvas id="gdpDataChart"></canvas>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class="martop">
                    <div class="row gy-5">
                        <div class="col-12 col-lg-6">
                            <div class="market-img">
                                <img src="{{ URL::asset('assets/front/images/market.png') }}" alt="">
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <div class="market-content">
                                <h3>Elevate Your Financial Wisdom</h3>
                                <p>Explore the Economic Composite Index Builder for Strategic Decision Making
                                    Excellence!</p>
                                <!--<a href="{{ url('/page/es-252-quant-fund-lp-disclosures') }}">ES-252 Quant Fund, LP Disclosures</a>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--<section class="index">-->
    <!--    <div class="container">-->
    <!--        <div class="row">-->
    <!--            <div class="col-12">-->
    <!--                <h1>My First Total Composite Index</h1>-->
    <!--            </div>-->
    <!--            <div class="col-12">-->
    <!--                <p>(GDP, Housing Prices and Unemployment)</p>-->
    <!--            </div>-->
    <!--            <div class="col-12 mb-5">-->
    <!--                <div id="chartContainer8" style="height: 600px; width: 100%;"></div>-->
    <!--            </div>-->
    <!--            <div class="col-12">-->
    <!--                <div class="margin-top">-->
    <!--                    <a href="#">Explore Now</a>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->

</main>

@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);
    
    
    
    
    
    
$(document).ready(function() {
    const ctx = document.getElementById('economicChart').getContext('2d');
    if (window.economicChart && typeof window.economicChart.destroy === 'function') {
        window.economicChart.destroy();
    }
    window.economicChart = new Chart(ctx, {
        type: 'line', // Chart type
        data: {
            datasets: [] // No data for the empty chart
        },
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        parser: 'YYYY',
                        unit: 'year',
                        tooltipFormat: 'YYYY',
                        displayFormats: {
                            year: 'YYYY'
                        }
                    },
                    title: {
                        display: true,
                        text: 'Date'
                    },
                    grid: {
                        display: false
                    }
                },
                y: {
                    min: 0,
                    max: 100,
                    ticks: {
                        callback: function(value) {
                            return value;
                        }
                    },
                    grid: {
                        display: true
                    }
                }
            },
            elements: {
                line: {
                    tension: 0.4
                },
                point: {
                    radius: 0
                }
            },
            plugins: {
                legend: {
                    display: false // No legend for an empty chart
                },
                tooltip: {
                    enabled: false // Disable tooltips for an empty chart
                },
                zoom: {
                    enabled: false // Disable zoom for an empty chart
                },
                title: { // Add title configuration here
                    display: true,
                    text: 'Compiled Data Index',
                    position: 'top',
                    align: 'center',
                    font: {
                        size: 18 // Adjust the font size as needed
                    }
                }
            },
            responsive: true,
            maintainAspectRatio: true
        }
    });
});



$(document).ready(function() {
    const config = {
        apiUrl: "{{ url('/spread-sheet-data') }}",
        csrfToken: '{{ csrf_token() }}',
        chartColors: ['rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(255, 159, 64, 1)'],
    };
    
    let showNormalizedData = false;

    let chart = null;
    let selectedIndicators = [];
    let chartDatasetsMap = {};
    $('#ToggleDataSets').addClass('d-none');
    $('#downloadCSVV').addClass('d-none');
    $('#yearRangi').addClass('d-none');
    
    $('.build-index').on("click", function() {
        $('#DataNormalization').removeClass('d-none');
        $('#ToggleDataSets').addClass('d-none');
        $('#downloadCSVV').addClass('d-none');
        $('#yearRangi').addClass('d-none');
        if (chart) chart.destroy();
        delete chartDatasetsMap['Average'];
        updateUIForChartBuilding();
        collectAndProcessIndicators();
    });

    function updateUIForChartBuilding() {
        $('.build-index').prop('disabled', true).delay(2000).prop('disabled', false);
    }

    function collectAndProcessIndicators() {
        selectedIndicators = collectIndicatorsByPrefix(['#firstInput', '#secondInput', '#thirdInput']);

        if (selectedIndicators.length) {
            fetchDataForIndicators();
        } else {
            console.error('No indicators selected');
            // Handle no indicators selected
        }
    }

    function collectIndicatorsByPrefix(prefixes) {
        return prefixes.flatMap(prefix => {
            const value = $(`${prefix}`).data("value");
            const name = $(`${prefix}`).val().trim();
            return value ? { name, value } : [];
        });
    }
    
    let originalFetchedData = {};
    let originalDatasets = {};
    function fetchDataForIndicators() {
        selectedIndicators.forEach(indicator => {
            $.ajax({
                url: config.apiUrl,
                type: 'GET',
                headers: { 'X-CSRF-TOKEN': config.csrfToken },
                data: { sheet_name: indicator.value },
                success: response => {
                    console.log("Raw AJAX response data:", response);  // This helps verify the structure
                    const processedData = processDataForChart(response);  // Check response structure
                    updateChartData(indicator.name, processedData);
                    originalFetchedData[indicator.name] = [...processedData]; // Store the original fetched data
                    originalDatasets[indicator.name] = [...processedData]; // Store the original data for possible future modifications
                    
                    fullAverageDataset = calculateAverageDataset(chartDatasetsMap);
                    console.log("Full Average Dataset Ready:", fullAverageDataset);
                },
                error: error => console.error('Error fetching data:', error)
            });
        });
    }

    function processDataForChart(data) {
        if (!Array.isArray(data)) {
            console.error('Expected an array, received:', data);
            return []; // Return an empty array to avoid errors
        }
    
        return data.map(item => ({
            x: new Date(item[3]), // Assuming item[3] contains the date string
            y: parseFloat(item[4]) // Assuming item[4] contains the numeric value
        }));
    }

    function parseDate(dateStr) {
        if (typeof dateStr !== 'string' || dateStr.length < 8) {
            console.error('Invalid or missing date string:', dateStr);
            return null; // Return null to indicate a problem with parsing
        }
    
        const year = dateStr.substring(0, 4);
        const month = dateStr.substring(4, 6);
        const day = dateStr.substring(6, 8);
        return new Date(year, month - 1, day); // Correctly construct the date
    }

    $('#toggleNormalization').on('click', function() {
    
        updateChartDisplay(); // Function to update the chart based on the new value
    });


    function updateChartDisplay() {
        if (showNormalizedData) {
            // Process and display the normalized data
            Object.keys(chartDatasetsMap).forEach(key => {
                chartDatasetsMap[key].data = normalizeData(chartDatasetsMap[key].data);
            });
        } else {
            // Display the original data
            Object.keys(chartDatasetsMap).forEach(key => {
                chartDatasetsMap[key].data = originalDatasets[key];
            });
        }
        renderChart(); // Re-render the chart with updated data
    }


    function updateChartData(indicatorName, data) {
        console.log("Processed Data for Chart:", data); // Check the data structure
    
        if (!chartDatasetsMap[indicatorName]) {
            chartDatasetsMap[indicatorName] = {
                label: indicatorName,
                data: data,
                borderColor: config.chartColors[Object.keys(chartDatasetsMap).length % config.chartColors.length],
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 2,
            };
        } else {
            // If the dataset already exists, update its data property
            chartDatasetsMap[indicatorName].data = data;
        }
    
        // Ensure that the chart is re-rendered after updating the data
        renderChart();
    }

    function renderChart() {
        
        const ctx = document.getElementById('economicChart').getContext('2d');

        // Destroy the existing chart if it exists
        if (window.economicChart) {
            window.economicChart.destroy();
        }

        // Your existing chart initialization code...
        window.economicChart = new Chart(ctx, {
            type: 'line',
            
            data: {
                datasets: Object.values(chartDatasetsMap).map(dataset => ({
                    label: dataset.label,
                    data: dataset.data,
                    borderColor: dataset.borderColor,
                    backgroundColor: dataset.backgroundColor,
                    borderWidth: dataset.borderWidth
                }))
            },
            options: {
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            parser: 'YYYY', // Use the appropriate format for your dates
                            unit: 'year',
                            tooltipFormat: 'YYYY',
                            displayFormats: {
                                year: 'YYYY'
                            }
                        },
                        title: {
                            display: true,
                            text: 'Date'
                        },
                        grid: {
                            display: false // Hide the grid lines for a cleaner look
                        }
                    },
                    y: {
                        min: showNormalizedData ? -100 :
                        undefined, // Set min to -100 if normalized data is shown
                        max: showNormalizedData ? 100 : undefined, // End at 100%
                        ticks: {
                            callback: function(value) {
                                return value; // Append a '%' sign to y-axis labels
                            }
                        },
                        grid: {
                            display: true // Show the grid lines by default
                        }
                    }
                },
                elements: {
                    line: {
                        tension: 0.4 // Adjust line tension for a smoother curve, set to 0 for straight lines
                    },
                    point: {
                        radius: 0 // Hide points by setting radius to 0
                    }
                },
                plugins: {
                    legend: {
                        display: true, // Display the legend
                        position: 'top', // Position the legend at the top
                    },
                    tooltip: {
                        mode: 'nearest', // Display tooltip of the nearest item
                        intersect: true, // Allow tooltips to intersect
                        callbacks: {
                            label: function(context) {
                                const datasetLabel = context.dataset.label || '';
                                if (context.parsed.y !== null) {
                                    return datasetLabel + ': ' + context.parsed.y;
                                }
                                return ''; // Hide tooltip for datasets with null values
                            }
                        }
                    },
                    title: { // Add title configuration here
                        display: true,
                        text: 'My First Total Composite Index',
                        position: 'top',
                        align: 'center',
                        font: {
                            size: 18 // You can adjust the font size as needed
                        }
                    }
                },
                responsive: true,
                maintainAspectRatio: true
            }
        });

        // Retrieve the current count from local storage
        var counting = localStorage.getItem('counting');

        // If the counting variable is null, set it to 0
        if (counting === null) {
            counting = 0;
        } else {
            // If counting exists in local storage, convert it to a number
            counting = parseInt(counting);
        }

        // Increment the count
        counting++;

        // Store the updated count in local storage
        localStorage.setItem('counting', counting);
        console.log('counting ==>', counting)

        // Set a timeout to clear the count after 48 hours
        setTimeout(function() {
            localStorage.removeItem('counting');
        }, 48 * 60 * 60 * 1000); // 48 hours in milliseconds

    }

    function getChartOptions() {
        return {
            scales: {
                x: { type: 'time', time: { parser: 'YYYY', unit: 'year', tooltipFormat: 'YYYY', displayFormats: { year: 'YYYY' } } },
                y: { min: showNormalizedData ? -100 : undefined, max: showNormalizedData ? 100 : undefined }
            },
            plugins: { legend: { display: true, position: 'top' }, tooltip: { mode: 'index', intersect: false } },
            responsive: true,
            maintainAspectRatio: false
        };
    }

    $('#DataNormalization').on('click', function() {
        $('#DataNormalization').addClass('d-none');
        $('#ToggleDataSets').removeClass('d-none');
        $('#downloadCSVV').removeClass('d-none');
        $('#yearRangi').removeClass('d-none');
        var toggleBtnSp = document.querySelector("#DataNormalization");
        // toggleBtnSp.disabled = true;
    
        // Calculate and set the average dataset
        const averageDataset = calculateAverageDataset(chartDatasetsMap);
        chartDatasetsMap = {
            'Average': averageDataset
        }; // Set the map to only have the average
        console.log('Average:', averageDataset);
        renderChart(); // Re-render the chart with the updated average dataset
    });
    
    $('#ToggleDataSets').on('click', function() {
        // Toggle button visibility
        $('#DataNormalization').removeClass('d-none');
        $('#ToggleDataSets').addClass('d-none');
        $('#downloadCSVV').addClass('d-none');
        $('#yearRangi').addClass('d-none');
        
        // Reset chart datasets to the original fetched data
        
        chartDatasetsMap = {};
        Object.keys(originalDatasets).forEach(indicatorName => {
            chartDatasetsMap[indicatorName] = {
                label: indicatorName,
                data: [...originalDatasets[
                indicatorName]], // Make sure this is an array
                //... other chart dataset properties
            };
        });
        // chartDatasetsMap = { ...originalDatasets };
        console.log('Original Values', chartDatasetsMap);
        renderChart(); // Re-render the chart with the original datasets
    });

    let masterAverageDataset = []; // Holds the unfiltered average dataset

    // // Function to calculate the average dataset
    function calculateAverageDataset(chartDatasetsMap) {
        const dateSumsAndCounts = {};
    
        Object.values(chartDatasetsMap).forEach((dataset) => {
            if (dataset && Array.isArray(dataset.data)) {
                dataset.data.forEach((dataPoint) => {
                    // Check if dataPoint.x is a valid date object
                    if (!(dataPoint.x instanceof Date && !isNaN(dataPoint.x.getTime()))) {
                        console.error('Invalid date:', dataPoint.x);
                        return; // Skip this data point if the date is invalid
                    }
                    const dateKey = dataPoint.x.toISOString();
                    if (!dateSumsAndCounts[dateKey]) {
                        dateSumsAndCounts[dateKey] = {
                            sum: 0,
                            count: 0
                        };
                    }
                    dateSumsAndCounts[dateKey].sum += dataPoint.y;
                    dateSumsAndCounts[dateKey].count++;
                });
            } else {
                console.error('Dataset data is undefined or not an array:', dataset);
            }
        });
    
        const averageData = Object.entries(dateSumsAndCounts).map(([dateKey, { sum, count }]) => {
            return {
                x: new Date(dateKey),
                y: sum / count
            };
        });
    
        averageData.sort((a, b) => a.x - b.x);
        
        return {
            label: 'Average',
            data: averageData,
            borderColor: '#2185f5', // Default to black if no color is set
            backgroundColor: '#2185f5',
            borderWidth: 2
        };
    }
    
    
    $('.year-checkbox').on('change', function() {
        var selectedYears = $(this).val();
        console.log('Selected year range from checkbox:', selectedYears);
        console.log("Full Average Dataset:", fullAverageDataset);
        updateChartForSelectedYears(selectedYears);
    });
    
    function updateChartForSelectedYears(yearRange) {
        var thisYear = new Date().getFullYear();
        var startingYear = yearRange === 'all' ? 0 : thisYear - parseInt(yearRange);
        console.log("Selected year range starting year:", startingYear);
    
        const filteredAverageDataset = filterDataByYearRange(fullAverageDataset.data, startingYear);
        console.log("Filtered Average Dataset:", filteredAverageDataset);
    
        const updatedAverageDataset = {
            label: fullAverageDataset.label,
            data: filteredAverageDataset,
            borderColor: fullAverageDataset.borderColor,
            backgroundColor: fullAverageDataset.backgroundColor,
            borderWidth: fullAverageDataset.borderWidth
        };
    
        chartDatasetsMap['Average'] = updatedAverageDataset;
        renderChart(); // Re-render the chart with the updated average dataset
    }

    function filterDataByYearRange(dataset, startingYear) {
        console.log("Filtering data starting from year:", startingYear);
        return dataset.filter(dataPoint => {
            console.log("Data point year:", dataPoint.x.getFullYear(), "Data point value:", dataPoint.y);
            return dataPoint.x.getFullYear() >= startingYear;
        });
    }

});
    
</script>






<script>
 
$(document).ready(function () {
    var chartContext = document.getElementById('sp500Chart').getContext('2d');
    var stockChart;
    var datasetName = 'Stock Risk Premium';
    console.log('fundChart->sheet_name >>', datasetName)

    var retrievedData = []; // Initialize the retrievedData array

    fetchData(datasetName);

    function fetchData(datasetName) {
        var dataApiUrl = "{{ url('/spread-sheet-data') }}"; // Make sure this points to the correct route
        var sheetIdentifier = datasetName;
        $.ajax({
            url: dataApiUrl,
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            data: {
                sheet_name: sheetIdentifier,
            },
            success: function (response) {
                retrievedData = response; // Store the fetched data
                refreshChart('all'); // Update the chart with all data
            },
            error: function (errorResponse) {
                console.error('Error fetching data:', errorResponse);
            }
        });
    }
    
    function refreshChart(selectedYears) {
        
    var selectedYearRange = $('input[name="years1"]:checked').val(); // Get the selected year range

    var thisYear = new Date().getFullYear();
    var evaluationStartYear = selectedYearRange === 'all' ? 0 : thisYear - parseInt(selectedYearRange);

    var filteredData = retrievedData.filter(function (dataItem) {
        var dataYear = new Date(dataItem[3]).getFullYear(); // Assuming dataItem[3] is the date
        return selectedYearRange === 'all' ? true : dataYear >= evaluationStartYear;
    });

    var dataLabels = filteredData.map(function (dataItem) { return dataItem[3]; });
    var dataValues = filteredData.map(function (dataItem) { return parseFloat(dataItem[4]); });

    if (!stockChart) {
        // Initialize the chart if it's not already initialized
        stockChart = new Chart(chartContext, {
            type: 'line',
            data: {
                labels: dataLabels,
                datasets: [{
                    label: 'Stock Risk Premium',
                    data: dataValues,
                    borderColor: 'rgba(0, 123, 255, 1)',
                    backgroundColor: 'rgba(0, 123, 255, 0.5)',
                    borderWidth: 1,
                    hidden: false // Initially show the 'Value' dataset
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        onClick: function (event, legendItem, legend) {
                            event.preventDefault(); // Prevent default click action
                        }
                    }
                }
            }
        });
    } else {
        stockChart.data.labels = dataLabels;
        stockChart.data.datasets[0].data = dataValues;
        stockChart.update();
    }
}

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

});    

$(document).ready(function () {
    var chartContext = document.getElementById('german-10-yr-us-nominal-gdp-avg').getContext('2d');
    var stockChart;
    var datasetName = 'German 10-Yr and Nom GDP AVG';
    console.log('fundChart->sheet_name >>', datasetName)

    var retrievedData = []; // Initialize the retrievedData array

    fetchData(datasetName);

    function fetchData(datasetName) {
        var dataApiUrl = "{{ url('/spread-sheet-data') }}"; // Make sure this points to the correct route
        var sheetIdentifier = datasetName;
        $.ajax({
            url: dataApiUrl,
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            data: {
                sheet_name: sheetIdentifier,
            },
            success: function (response) {
                retrievedData = response; // Store the fetched data
                refreshChart('all'); // Update the chart with all data
            },
            error: function (errorResponse) {
                console.error('Error fetching data:', errorResponse);
            }
        });
    }
    
    function refreshChart(selectedYears) {
        
    var selectedYearRange = $('input[name="years2"]:checked').val(); // Get the selected year range

    var thisYear = new Date().getFullYear();
    var evaluationStartYear = selectedYearRange === 'all' ? 0 : thisYear - parseInt(selectedYearRange);

    var filteredData = retrievedData.filter(function (dataItem) {
        var dataYear = new Date(dataItem[3]).getFullYear(); // Assuming dataItem[3] is the date
        return selectedYearRange === 'all' ? true : dataYear >= evaluationStartYear;
    });

    var dataLabels = filteredData.map(function (dataItem) { return dataItem[3]; });
    var dataValues = filteredData.map(function (dataItem) { return parseFloat(dataItem[4]); });

    if (!stockChart) {
        // Initialize the chart if it's not already initialized
        stockChart = new Chart(chartContext, {
            type: 'line',
            data: {
                labels: dataLabels,
                datasets: [{
                    label: 'German 10-Yr and Nom GDP AVG',
                    data: dataValues,
                    borderColor: 'rgba(0, 123, 255, 1)',
                    backgroundColor: 'rgba(0, 123, 255, 0.5)',
                    borderWidth: 1,
                    hidden: false // Initially show the 'Value' dataset
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        onClick: function (event, legendItem, legend) {
                            event.preventDefault(); // Prevent default click action
                        }
                    }
                }
            }
        });
    } else {
        stockChart.data.labels = dataLabels;
        stockChart.data.datasets[0].data = dataValues;
        stockChart.update();
    }
}

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

});    

</script>

<script>

$(document).ready(function () {
    fetchPMIData1();

    function fetchPMIData1() {
        var apiUrl = "{{ url('/get-pmi-data1') }}";
        $.ajax({
            url: apiUrl,
            type: 'GET',
            success: function (response) {
                // console.log('Data fetched successfully', response);
                updateEconomicDataList(response);
            },
            error: function (error) {
                console.log('Error fetching data:', error);
            }
        });
    }

    function updateEconomicDataList(data) {
    var $anim = $(".typing-container");
    var $list = $(".real23");
    $anim.remove();
    // $list.empty(); // Clear the list before adding new items

    // Define a mapping for the series IDs to their display names
    const seriesNames = {
        'GDP': 'GDP',
        'SP500': 'S&P500',
        'Nasdaq': 'Nasdaq',
        'DOW': 'DOW',
        // 'Gold': 'Gold'
    };

    // Iterate over the data object and create list items for each indicator
    $.each(seriesNames, function(key, displayName) {
        if (data[key] && data[key].observations.length > 1) {
            var observations = data[key].observations;
            var latestValue = observations[observations.length - 1].value;
            var previousValue = observations[observations.length - 2].value;
            var change = ((latestValue - previousValue) / previousValue) * 100;
            var changeFormatted = change.toFixed(2) + '%'; // Format to two decimal places

            // Determine if the change is positive or negative for conditional formatting
            var changeText = change >= 0 ? `+${changeFormatted}` : changeFormatted;

            // Append list item to the list
            $list.append(
                `<li>
                    <h3>${displayName}</h3>
                    <h5><span class="blink">${latestValue}</span></h5>
                    <p> <span class="blink">${changeText}</span> </p>
                </li>`
            );
            $('.addGoldDiv').removeClass('d-none');
        } else {
            // If there's no data for the key or not enough observations, append a message
            $list.append(
                `<li>
                    <h3>${displayName}</h3>
                    <h5>Data Not Available</h5>
                    <p>N/A</p>
                </li>`
            );
        }
    });
}

});









$(document).ready(function() {
  // Set an interval to toggle the blink class every 3 seconds
  setInterval(function() {
    $('.blink').toggleClass("blink-once");
  }, 2000); // 3000 milliseconds = 3 seconds
});


$(document).ready(function() {
  var text = "Loading Real-Time Values";
  var i = 0;
  var speed = 150; // Speed in milliseconds
  var delayAfter = 1000; // Delay after finishing before restarting in milliseconds

  function typeWriter() {
    if (i < text.length) {
      $('#typing').append(text.charAt(i));
      i++;
      setTimeout(typeWriter, speed);
    } else {
      // Wait a bit after typing is complete, then reset and start over
      setTimeout(function() {
        $('#typing').html('');
        i = 0;
        typeWriter();
      }, delayAfter);
    }
  }

  typeWriter(); // Start the typing effect
});


$(document).ready(function(){
    $(".populateValue").click(function(){
        var dataValue = $(this).attr("data-value");
        var inputValue = $(this).text();
     var inputs = $(this).parent().parent().parent().parent().parent().parent().parent().find(".indicator-input");
     inputs.attr("data-value", dataValue);
     inputs.val(inputValue);
        console.log('newVar=>', inputValue); // You can use this value as you like
 });



var myHeaders = new Headers();
myHeaders.append("x-access-token", "goldapi-23bb617lv2x2ja9-io");
myHeaders.append("Content-Type", "application/json");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("https://www.goldapi.io/api/XAU/USD", requestOptions)
  .then(response => response.json()) // Parse the response as JSON
  .then(result => {
    // Access the price from the parsed JSON object
    console.log('result ==>', result)
    var currentPrice  = result.price;
    var prevClosePrice = result.prev_close_price;
    
    // Calculate the percentage change
    var percentageChange = ((currentPrice - prevClosePrice) / prevClosePrice) * 100;

    // Check if the percentage change is negative
    var percentageMinus = percentageChange < 0 ? percentageChange : 0;

    console.log('Percentage Minus:', percentageMinus.toFixed(2) + '%');
    
    
   $('.goldPrice').text(currentPrice );
    $('.goldPricePer').text(percentageMinus.toFixed(2) + '%');
    // Now you can store the price in a variable or perform any other operations
  })
  .catch(error => console.log('error', error));
  
});
  

$("#removeData").click(function(){
     location.reload();
});

</script>


@endsection
@endsection