{% extends "cao_blogr:templates/layout.jinja2" %}

{% block content %}

	<p>
		<a href="allocation_edit/0" class="btn btn-success" role="button">
			<span class="glyphicon glyphicon-plus"></span> Nouvelle classe</a>
	</p>
	<div class="row">
		<div class="col-md-6">
		<table class="table table-condensed table-bordered">
			<thead>
				<tr>
					<th>Classe</th>
					<th class="text-right">% cible</th>
					<th class="text-right">% actuel</th>
					<th class="text-right">Ecart</th>
					<th class="text-right">Valeur</th>
				</tr>
			</thead>
			<tbody>
				{% for item in items %}
					<tr>
						<td class="{{ item.bg_color }}">{{ item.classe }}</td>
						<td class="text-right"><a href="allocation_edit/{{ item.no_cat }}">{{ item.pc_cible }} %</a></td>
						<td class="text-right">{{ item.pc_atteint }}</td>
						{% if (item.pc_atteint - item.pc_cible) >= 0 %}
							<td class="text-right" style="color: green;">{{ item.pc_atteint }}</td>
						{% else %}
							<td class="text-right" style="color: red;">{{ item.pc_atteint }}</td>
						{% endif %}
						<td class="text-right">{{ '{0:0.2f} €'.format(item.valeur) }}</td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
		</div>
		<div class="col-md-6">
		<table id="portfolio" class="table table-condensed table-bordered">
			<thead>
				<tr>
					<th>Portefeuille</th>
					<th class="text-right">Montant</th>
					<th class="text-right">%</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Valorisation</td>
					<td class="text-right">{{ '{0:0.2f} €'.format(total_valeur) }}</td>
					<td></td>
				</tr>
				<tr>
					<td>Plus value</td>
					<td class="text-right">{{ '{0:0.2f} €'.format(total_pv) }}</td>
					<td class="text-right">{{ '{0:0.1f} %'.format(total_pc_value) }}</td>
				</tr>
				<tr>
					<td>Safe Withdrawal Rate</td>
					<td class="text-right text-success"><b>{{ '{0:0.1f} %'.format(swr_amount) }}</b></td>
					<td class="text-right text-success"><b>{{ '{0:0.1f} %'.format(swr_rate) }}</b></td>
				</tr>
			</tbody>
		</table>
		<p>
			<b>Allocation globale</b> : 70% actions + 30% obligations<br />
			[Inspirée du 
			<a href="https://www.nbim.no/en/the-fund/how-we-invest/benchmark-index/" target="_blank">Fond souverain Norvégien</a>]<br />
			<b>Allocation actions</b> : 80% Monde (56%) + 20% Croissance (14%)<br />
		</p>
		</div>

	</div>
	
	<div class="row">
		<div class="col-md-6">
			<!--   graphique donut cible -->
			<div id="donutchart_cible" style="width: 100%; height: 500px;"></div>
		</div>
		<div class="col-md-6">
			<!--   graphique donut actuel -->
			<div id="donutchart_actuel" style="width: 100%; height: 500px;"></div>
		</div>
	</div>

	<div class="row">
		<h3>Mes actifs</h3>
		<p>"<i>Diversification is not determined by the number of securities held.</i>" 
			<a href="http://www.etf.com/sections/index-investor-corner" target="_blank">Larry Swedroe</a></p>

	<form id="actif_list-form" action="{{ url }}" method="post">
		<div class="form-group"> 
			<button id="updateButton" class="btn btn-primary" type="submit" name="form.submitted">
				<i class="glyphicon glyphicon-refresh"></i> MAJ du portefeuille</button>
			<a href="#" class="btn btn-success" role="button"
				data-toggle="modal" data-target="#choixTypeActif"><span class="glyphicon glyphicon-plus"></span> Nouvel actif</a>
			<a href="/histo_list" class="btn btn-default" role="button">
				<span class="glyphicon glyphicon-stats"></span> Historique</a>
			<a href="/blog/2/mouvements-du-portefeuille" class="btn btn-default" role="button">
				<span class="glyphicon glyphicon-folder-close"></span> Mouvements</a>
		</div>
	</form>

		<table id="actifs_list" class="table table-condensed table-bordered">
			<thead>
				<tr>
					<th>Classe</th>
					<th>Libellé</th>
					<th class="text-right">Cours</th>
					<th class="text-right">Nb</th>
					<th class="text-right">Valeur</th>
					<th class="text-right">+/- Valeur</th>
					<th class="text-right">% de +/-</th>
					<th class="text-right">% TER</th>
					<th class="text-right">% PF</th>
				</tr>
			</thead>
			<tbody>
				{% for ligne in actifs %}
					<tr>
						<td class="{{ ligne.bg_color }}">{{ ligne.classe }}</td>
						{% if ligne.type=='ACTION' %}
							<td><a href="actif_edit/{{ ligne.no_id }}">{{ ligne.libelle }}</a></td>
						{% else %}
							<td><a href="actif2_edit/{{ ligne.no_id }}">{{ ligne.libelle }}</a></td>
						{% endif %}
						{% if ligne.devise=='EUR' %}
							<td>{{ '{0:0.2f} €'.format(ligne.cours) }}</td>
						{% else %}
							<td>{{ '{0:0.2f} $'.format(ligne.cours) }}</td>
						{% endif %}
						<td class="text-right">{{ ligne.nombre }}</td>
						<td class="text-right">{{ '{0:0.2f} €'.format(ligne.valeur) }}</td>
						{% if ligne.plus_value >= 0 %}
							<td class="text-right" style="color: green;">{{ '{0:0.2f} €'.format(ligne.plus_value) }}</td>
							<td class="text-right" style="color: green;">{{ '{0:0.1f}'.format(ligne.pc_plusvalue) }}</td>
						{% else %}
							<td class="text-right" style="color: red;">{{ '{0:0.2f} €'.format(ligne.plus_value) }}</td>
							<td class="text-right" style="color: red;">{{ '{0:0.1f}'.format(ligne.pc_plusvalue) }}</td>
						{% endif %}
						<td class="text-right">{{ '{0:0.1f}'.format(ligne.ter) }}</td>
						<td class="text-right">{{ '{0:0.1f}'.format(ligne.pc_allocation) }}</td>
					</tr>
				{% endfor %}

			<tr>
				<td  class="text-right" colspan="4"><b>Total</b></td>
				<td>{{ '{0:0.2f} €'.format(total_valeur) }}</td>
				{% if total_pv >= 0 %}
					<td class="text-right" style="color: green;">{{ '{0:0.1f}'.format(total_pv) }}</td>
					<td class="text-right" style="color: green;">{{ '{0:0.2f} €'.format(total_pc_value) }}</td>
				{% else %}
					<td class="text-right" style="color: red;">{{ '{0:0.1f}'.format(total_pv) }}</td>
					<td class="text-right" style="color: red;">{{ '{0:0.2f} €'.format(total_pc_value) }}</td>
				{% endif %}
				<td></td>
				<td class="text-right"><b>100.0</b></td>
			</tr>
			</tbody>
		</table>
	</div>
	<div class="row">
		<div>
			<!--   graphique evolution -->
			<div id="curve_chart" style="width: 100%; height: 500px;"></div>
		</div>
	</div>

	<!-- MODAL POPUP : Affichage de la FAQ -->		
	<div class="modal fade" id="choixTypeActif" tabindex="-1" role="dialog" aria-labelledby="choixTypeActif" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></button>
				<h4 class="modal-title" id="choixTypeActif">Choix du type d'actif à créer</h4>
			</div>
			<div class="modal-body">
				<p>
					Voulez-vous créer un actif de type <br />
					<br />
					<a href="/actif_edit/0" class="btn btn-primary" role="button">
						ACTION</a> ou 
					<a href="/actif2_edit/0" class="btn btn-warning" role="button">
						AUTRE</a>
					<br />
					<br />
				<p>
			</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
	$('#updateButton').on('click', function(){
		$('i.gly-spin').removeClass('gly-spin');
		$('i').addClass('gly-spin');
	});
	</script>

	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">
		google.charts.load("current", {packages:["corechart"]});
		google.charts.setOnLoadCallback(drawChart);
		var dataSet_cible = {{ donut_cible | safe }};
		var dataSet_actuel = {{ donut_actuel | safe }};
		var dataSet_evoln = {{ courbe_evoln | safe }};

	function drawChart() {
		var data_cible = google.visualization.arrayToDataTable(dataSet_cible);
		var data_actuel = google.visualization.arrayToDataTable(dataSet_actuel);
		var data_evoln = google.visualization.arrayToDataTable(dataSet_evoln);

		var options_cible = {
			title: 'Allocation cible',
			pieHole: 0.4,
			slices: {
				0: {color: 'SteelBlue'}, 1: {color: 'LightSteelBlue'},
				2: {color: 'Maroon'}, 3: {color: 'Brown'},
				5: {offset: 0.2, color: 'DarkGreen'}, 6: {offset: 0.3, color: 'Green'},
			},
		};
		var options_actuel = {
			title: 'Allocation actuelle',
			pieHole: 0.4,
			slices: {
				0: {color: 'SteelBlue'}, 1: {color: 'LightSteelBlue'},
				2: {color: 'Maroon'}, 3: {color: 'Brown'},
				5: {offset: 0.2, color: 'DarkGreen'}, 6: {offset: 0.3, color: 'Green'},
			},
		};
		var options_evoln = {
			title: 'Evolution du portefeuille VS fond Carmignac Investissement',
			curveType: 'function',
			legend: { position: 'top' }
		};
	
		var chart_cible = new google.visualization.PieChart(document.getElementById('donutchart_cible'));
		chart_cible.draw(data_cible, options_cible);
		var chart_actuel = new google.visualization.PieChart(document.getElementById('donutchart_actuel'));
		chart_actuel.draw(data_actuel, options_actuel);
		var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
		chart.draw(data_evoln, options_evoln);
	}
	</script>

</div><!-- content -->
</div>

{% endblock %}