@extends('layouts.fixed-steelmint')
@section('content')
<link rel="stylesheet" href="{{ url('/assets/css/forecast.css') }}?v={{ time() }}">

<main class="mainSection dashboard ">
    <div class="container-fluid px-3 px-md-4">
        <div class="prices-page">
            <div class="prices-page__content">
            	<div class="forcast-tabs">
            		<div class="position-relative tabs-container">
		            	<ul class="nav nav-tabs" id="commodityTabs" role="tablist">
						    <li class="nav-item" role="presentation">
						      <button class="nav-link active" id="dashboard-tab" data-bs-toggle="tab" data-bs-target="#dashboard" type="button" role="tab">Dashboard</button>
						    </li>
						    <li class="nav-item" role="presentation">
						      <button class="nav-link" id="commodity-tab" data-bs-toggle="tab" data-bs-target="#commodity" type="button" role="tab">Commodity market drives </button>
						    </li>
						    <li class="nav-item" role="presentation">
						      <button class="nav-link" id="methodology-tab" data-bs-toggle="tab" data-bs-target="#methodology" type="button" role="tab">Methodology</button>
						    </li>
						</ul>
						<div class="custom-select-button">
						    <select>
						      <option selected>HRC</option>
						      <option>Option 1</option>
						      <option>Option 2</option>
						      <option>Option 3</option>
						    </select>
						</div>
					</div>
					<!-- Tabs content -->
					<div class="tab-content mt-3" id="commodityTabsContent">
						<div class="tab-pane fade show active" id="dashboard" role="tabpanel">
						 	<ul class="nav nav-tabs inner-tabs" id="commodityTabs" role="tablist">
							    <li class="nav-item" role="presentation">
							      <button class="nav-link active" id="short-term-tab" data-bs-toggle="tab" data-bs-target="#short-term" type="button" role="tab">Short term</button>
							    </li>
							    <li class="nav-item" role="presentation">
							      <button class="nav-link" id="medium-term-tab" data-bs-toggle="tab" data-bs-target="#medium-term" type="button" role="tab">Medium term </button>
							    </li>
							    <li class="nav-item" role="presentation">
							      <button class="nav-link" id="long-term-tab" data-bs-toggle="tab" data-bs-target="#long-term" type="button" role="tab">long-term</button>
							    </li>
							</ul>
							<div class="tab-content" id="dashboardTabsContent">
								<div class="tab-pane fade show active" id="short-term" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="container" style="height: 400px; width: 100%; max-width: 100%;"></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="medium-term" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="container" style="height: 400px; width: 100%; max-width: 100%;"></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="long-term" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="container" style="height: 400px; width: 100%; max-width: 100%;"></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="tab-pane fade" id="commodity" role="tabpanel">
							<ul class="nav nav-tabs inner-tabs" id="commodity-innerTabs" role="tablist">
							    <li class="nav-item" role="presentation">
							      <button class="nav-link active" id="raw-material-tab" data-bs-toggle="tab" data-bs-target="#raw-material" type="button" role="tab">Raw material cost</button>
							    </li>
							    <li class="nav-item" role="presentation">
							      <button class="nav-link" id="production-tab" data-bs-toggle="tab" data-bs-target="#production" type="button" role="tab">Production</button>
							    </li>
							    <li class="nav-item" role="presentation">
							      <button class="nav-link" id="macroeconomic-tab" data-bs-toggle="tab" data-bs-target="#macroeconomic" type="button" role="tab">Macroeconomic</button>
							    </li>
							    <li class="nav-item" role="presentation">
							      <button class="nav-link" id="consumption-tab" data-bs-toggle="tab" data-bs-target="#consumption" type="button" role="tab">Consumption</button>
							    </li>
							    <li class="nav-item" role="presentation">
							      <button class="nav-link" id="key-indicator-tab" data-bs-toggle="tab" data-bs-target="#key-indicator" type="button" role="tab">Key indicator 5</button>
							    </li>
							</ul>
							<div class="tab-content" id="commodityInnerTabsContent">
								<div class="tab-pane fade show active" id="raw-material" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="production-container" style="height: 400px; width: 100%; max-width: 100%;"></div>
											<div class="compare-link"><a href="#"><input type="checkbox" name="">Compare with price movement</a></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="production" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="production-container" style="height: 400px; width: 100%; max-width: 100%;"></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="macroeconomic" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="production-container" style="height: 400px; width: 100%; max-width: 100%;"></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="consumption" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="production-container" style="height: 400px; width: 100%; max-width: 100%;"></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="key-indicator" role="tabpanel">
									<div class="terms-row">
										<div class="graph-collunm">
											<div id="production-container" style="height: 400px; width: 100%; max-width: 100%;"></div>
										</div>
										<div class="content-collunm">
											<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
											<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="tab-pane fade" id="methodology" role="tabpanel">
							<div class="row">
								<div class="col-md-8 methodology-content">
									<h6>Methodology</h6>
									<p>We used past data to build this forecasting feature. First, we collected and cleaned the data to make sure it was accurate and consistent. Then, we tested a few simple models to find which one gave the most reliable results.</p>
									<p>We tried out a few basic forecasting models and compared their results. The one that performed best on past data was selected.</p>
									<p>Once we chose the best model, we trained it using historical data and checked how well it predicted future values. We continue to monitor its performance and update it regularly with new data to keep the forecasts accurate.</p>
								</div>
								<div class="col-md-4">
									<img src="{{ url('public/bm/new-images/forecast-triangle.jpg') }}" alt="My Image">

								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom-content">
					<h6>Disclaimer:</h6>
					<p>BigMint has prepared this information with care and provides it for general reference only. It should not be used as the sole basis for trading, investment, or other critical decisions. The views expressed may come from various contributors and do not necessarily represent those of BigMint or its management.</p>
					<p>BigMint, including its employees, directors, and aliates, is not responsible for any losses, damages, or actions resulting from the use or reliance on this information. Price forecasts are generated using a defined methodology based on selected factors from available data. Some relevant factors may not be included due to data availability or suitability, and the model does not account for unexpected events, market disruptions, or sentiment-driven changes</p>
					<p>Users should keep these limitations in mind when interpreting the forecasts.</p>
				</div>
            </div>
        </div>
    </div>
</main>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
	Highcharts.chart('container', {
	  chart: {
	    type: 'line'
	  },
	  title: {
	    text: 'Actual vs Projected Data (2025)'
	  },
	  xAxis: {
	    categories: [
	      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
	      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
	    ]
	  },
	  yAxis: {
	    title: {
	      text: 'Values'
	    }
	  },
	  series: [
	    {
	      name: 'Actual',
	      data: [29, 71, 85, 49, 62, 75, 88, 93, 55, 60, null, null], // stop at Oct
	      dashStyle: 'Solid',
	      color: '#1e46a1'
	    },
	    {
	      name: 'Projected',
	      data: [80, 72, 60, 55, 93, 88, 75, 62, 49, 85, 71, 29], // goes till Dec
	      dashStyle: 'Dash',
	      color: '#ff0000'
	    }
	  ]
	});
</script>


  <script>
    Highcharts.chart('production-container', {
      chart: {
        zoomType: 'xy'
      },
      title: {
        text: 'Actual vs Projected Data (2025)'
      },
      xAxis: [{
        categories: [
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ],
        crosshair: true
      }],
      yAxis: [{ // Primary yAxis
        labels: {
          format: '{value}',
        },
        title: {
          text: 'Values'
        }
      }],
      tooltip: {
        shared: true
      },
      series: [
        {
          name: 'Actual (Bar)',
          type: 'column',
          data: [29, 71, 85, 49, 62, 75, 88, 93, 55, 60, null, null],
          color: '#1e46a1'
        },
        {
          name: 'Projected (Line)',
          type: 'line',
          data: [29, 71, 85, 49, 62, 75, 88, 93, 55, 60, 72, 80],
          dashStyle: 'Dash',
          color: '#ff0000'
        }
      ]
    });
  </script>

@endsection('content')