{% extends 'base.html' %}
{% block 'content' %}

<div class="jumbotron bg-dark mb-0" id="main">
	<div class="container mt-5">	
		{% if user.is_authenticated %}
		<div class="row" style="min-height: 70vh;">
			<div class="col-sm-8 mr-0">
				<canvas id="myChart" width="600" height="300"></canvas>
				<form action="" method="POST"class="input-group mt-5">
					{% csrf_token %}
					<select class="custom-select rounded-left bg-dark text-muted border-primary" id="inputGroupSelect01" name="option">
						<option value="  ">Choose Company</option>
						{%  for company in companies %}
						<option value="{{company.id}}">{{company.name}}</option>
						{% endfor %}
					</select>
					<div class="input-group-append">
						<button type="submit" class="btn btn-primary" name='submit'>Submit</button>
					</div>
				</form>
			</div>
			<div class="col-sm-4 ml-0">
				
<!-- 1 day table
+  
{% if priceObj %}
		  <p class="text-light">
			  Prediction for next day
		  </p>
			  <p class="text-light">Last Close at {{priceObj.end}}: {{priceObj.endPrice}}</p>
			  <p class="text-light">prediction for {{priceObj.tommorow|date:'Y-m-d'}}:{{priceObj.prediction}} </p>
			  {% endif %} -->

			  <!-- 30 days table -->
			  {% if nextDays %}
			  <h5 class="text-light m-3">Predcition for next 30 days</h5>
			  <div class=" overflow-auto" style=" height: calc(70vh - 70px);">
			  	<table class="table table-striped table-dark table-sm parent">
			  		<thead class="bg-dark" style="position: sticky; position: -webkit-sticky; top: 0">
			  			<tr>
			  				<th scope="col" class="text-center">Day</th>
			  				<th scope="col" class="text-center">Closing Price</th>
			  			</tr>
			  		</thead>
			  		<tbody>
			  			{% for price in nextDays %}
			  			<tr class="text-center">
			  				<th scope="row">{{forloop.counter}}</th>
			  				<td>{{ price|floatformat:2 }}</td>
			  			</tr>
			  			{% endfor %}
			  		</tbody>
			  	</table>
			  </div>
			  {% endif %}
			</div>
		</div>
		{% else %}
		<div class="row">
			<div class="col-sm-8 mr-5">
				<canvas id="myChart" width="600" height="300"></canvas>
			</div>
			<div class="col-sm-3 ml-3 rounded-lg shadow-lg">
				<h2 class="fw-light text-center pt-4"><i class="fa fa-line-chart px-2" aria-hidden="true"></i></h2>
				<h5 class="fw-light mb-4">Login</h5>
				<p class="text-danger text-center">{{ error }}</p>
				<form method="POST">
					{% csrf_token %}
					<div class="mb-3">
						<input type="text" class="form-control bg-dark text-white" id="exampleInputEmail1" name="username" placeholder="Username">
					</div>
					<div class="mb-4">
						<input type="password" class="form-control bg-dark text-white" id="exampleInputPassword1" name="password" placeholder="Password">
					</div>
					<input type="submit" class="btn btn-primary btn-block rounded-lg shadow-sm col" name="login" value="Login">
					<div class="text-center py-4">
						<a class="text-form py-4" href="{% url 'signupuser' %}">Create account for Predictions</a>	
					</div>
				</form>
			</div>
		</div>
		{% endif %}
	</div>
	{% if not user.is_authenticated %}
	<div class="alert bg-dark text-light font-italic text-center mx-5" role="alert">
		Please login or register for making predictions.
	</div>
	{% endif %}


	<!-- <div class="col-md-6">
           
		<div class="container m-5 border-2 text-light ">
		  {% if priceObj %}
		  <div class="container alert-info ">
			  <h5>Showing Prediction for :</h5>
			  <h3>{{selectedOption}}</h3>
		  </div>
		  <h5 class="text-light">
			  Prediction for next day
		  </h5>
		 1 day table
		<table class="table">
		  <thead>
			<tr>
			  <th class="col text-light">Last Close at {{priceObj.end}}</th>
			  <th class="col text-light">prediction for {{priceObj.tommorow|date:'Y-m-d'}} </th>
			  
			</tr>
		  </thead>
		  <tbody>
			<tr>
			  <td class="text-light">{{priceObj.endPrice}}</th>
			  
			  <td class="text-light">{{priceObj.prediction}}</td>
			 
			</tr>
		   
		  </tbody>
		</table>
		{% endif %}
		

	-->

	<!-- News Section -->
	<hr class="bg-secondary" id="news">
	<section class="pt-5">
		<div class="container">
			<div class="row">
				<div class="col-6">
					<h3 class="mb-5">Top Stories </h3>
				</div>
				<div class="col-6 text-right">
					<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
						<i class="fa fa-arrow-left"></i>
					</a>
					<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
						<i class="fa fa-arrow-right"></i>
					</a>
				</div>
				<div class="col-12">
					<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">

						<div class="carousel-inner">
							<div class="carousel-item active">
								<div class="row">
									{% for result in news|slice:":8" %}
									<a class="col-md-3" href="https://{{ result.link }}" style="text-decoration: none;">
										<div class="card mb-4 box-shadow bg-dark shadow-lg rounded-lg" style="height:200px">
											<!-- <img class="rounded-top" src="{{ result.img }}" alt="Card image cap"> -->
											<div class="card-body">	
												{% if result.title|length > 100 %}
												<p class="card-text text-light">{{ result.title|slice:":100" }}...</p>
												{% else %}
												<p class="card-text text-light">{{ result.title|slice:":100" }}</p>
												{% endif %}
												<div class="d-flex justify-content-between align-items-center">
													<small class="text-secondary">{{ result.date }}</small>
												</div>
											</div>
										</div>
									</a>
									{% endfor %} 
								</div>
							</div>
							{% for i in news_length %}
							<div class="carousel-item">
								<div class="row">
									{% for result in i %}
									<a class="col-md-3" href="https://{{ result.link }}" style="text-decoration: none;">
										<div class="card mb-4 box-shadow bg-dark shadow-lg rounded-lg" style="height:200px">
											<!-- <img class="rounded-top" src="{{ result.img }}" alt="Card image cap"> -->
											<div class="card-body">
												{% if result.title|length > 100 %}
												<p class="card-text text-light">{{ result.title|slice:":100" }}...</p>
												{% else %}
												<p class="card-text text-light">{{ result.title|slice:":100" }}</p>
												{% endif %}
												<div class="d-flex justify-content-between align-items-center">
													<small class="text-secondary">{{ result.date }}</small>
												</div>
											</div>
										</div>
									</a>
									{% endfor %} 
								</div>
							</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>


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

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		var ctx = document.getElementById('myChart').getContext('2d');
		var gradient_primary = ctx.createLinearGradient(0, 0, 0, 400);
		gradient_primary.addColorStop(0, 'rgba(2, 117, 216, 0.3)');   
		gradient_primary.addColorStop(1, 'rgba(2, 117, 216, 0.001)');
		var gradient_danger = ctx.createLinearGradient(0, 0, 0, 400);
		gradient_danger.addColorStop(0, 'rgba(217, 83, 79, 0.3)');   
		gradient_danger.addColorStop(1, 'rgba(217, 83, 79, 0.001)');
		var gradient_success = ctx.createLinearGradient(0, 0, 0, 400);
		gradient_success.addColorStop(0, 'rgba(92, 184, 92, 0.3)');   
		gradient_success.addColorStop(1, 'rgba(92, 184, 92, 0.001)');
		var myChart = new Chart(ctx, {
			type: 'line',
			data: {
				{% if nextDays %}
				labels: [{% for i in nextDays_labels %}'{{ i }}',{% endfor %}],
				datasets: [{
					label: 
					'Past Closing Price',
					data: [
					{% for i in current_data %}
					'{{ i }}',
					{% endfor %}
					],
					backgroundColor: gradient_primary,
					borderColor: [
					'rgba(54, 162, 235, 1)',
					],
					pointBackgroundColor: 'rgba(54, 162, 235, 0.2)',
					pointBorderColor: 'rgba(54, 162, 235, 1)',
					borderWidth: 1
				},
				{
					label: 
					'Predicted Closing Price',
					data: [{% for i in nextDays_data %}'{{ i|floatformat:2 }}',{% endfor %}],
					{% if color  %}
					backgroundColor: gradient_danger,
					borderColor: [
					'rgba(255, 99, 132, 1)',
					],
					pointBackgroundColor: 'rgba(255, 99, 132, 0.2)',
					pointBorderColor: 'rgba(255, 99, 132, 1)',
					{% else %}
					backgroundColor: gradient_success,
					borderColor: [
					'rgba(92, 184, 92, 1)',
					],
					pointBackgroundColor: 'rgba(92, 184, 92, 0.2)',
					pointBorderColor: 'rgba(92, 184, 92, 1)',
					{% endif %}
					borderWidth: 1
				}],
				{% else %}
				labels: [{% for i in labels %}'{{ i }}',{% endfor %}],
				datasets: [{
					label: 
					'Current Nifty Closing Price',
					data: [
					{% for i in data %}
					'{{ i|floatformat:2 }}',
					{% endfor %}
					],
					backgroundColor: gradient_primary,
					borderColor: [
					'rgba(54, 162, 235, 1)',
					],
					pointBackgroundColor: 'rgba(2, 117, 216, 0.2)',
					pointBorderColor: 'rgba(2, 117, 216, 1)',
					borderWidth: 1
				}],
				{% endif %}

			},
			options: {
				legend: {
					position: 'top',
					align: 'end',
					labels: {
						fontColor: '#fff',
						
					},
				},
				title: {
					display: true,
					text: '{{ selectedOption }}',
					fontColor: '#fff'
				},
				scales: {
					yAxes: [{
						gridLines: {
							//display: false,
							color: 'rgba(255, 255, 255, 0.2)',
						},	
						ticks: {
							fontColor: '#fff',
						}
					}],
					xAxes: [{
						gridLines: {
							display: false,
							//color: "#42647F",
						},
						ticks: {
							display: false,
						}
					}]
				},
				hoverBackgroundColor: 'rgba(54, 162, 235, 5)',
			}
		});
	});
</script>


{% endblock 'content' %}