{% extends 'base.html.twig' %}

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('produit_index') }}">Produits</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('produit_show', { 'id': produit.id }) }}">Détails</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Mouvements de stock</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>
	
	<div class="portlet light bordered">
        <div class="portlet-title">
			<div class="caption"><i class="fa fa-search"></i>MOUVEMENTS PAR PIECE: {{ produit.reference }}</div>
        </div>
		
		<div class="portlet-body">
			<div class="row">
				
				<div class="col-md-6">
					<div class="portlet-body form">
						<div class="form-body">
							<div class="form-group">
								<div class="input-icon">
									<i class="fa fa-calendar font-red"></i>
									<input type="text" class="form-control" name="date_commande" id="date_commande" value="{{ 'now'|date('m-d-Y') }} - {{ 'tomorrow'|date('m-d-Y') }}" autocomplete=off data-date-end-date="0d">
                                    <input type="hidden" id="date_start" value="{{ 'now'|date('Y-m-d') }}">
                                    <input type="hidden" id="date_end" value="{{ 'now'|date_modify('+1 day')|date('Y-m-d') }}">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-euro"></i><span class="titre-header">Liste des opérations</span>
			</div>
			<div class="actions">
				
                <div class="btn-group">
                    <a class="btn white" href="javascript:;" aria-expanded="false" onClick="exportTableToExcel('mouvements-stock', 'Mouvements')"> 
                        <i class="fa fa-download"></i> Exporter
                    </a>
                </div>
			</div>

        </div>
        <div class="portlet-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="mouvements-stock">
                    <thead>
                        <tr>
                            <th>TYPE OP.</th>
                            <th>BON</th>
                            <th>FACTURE</th>
                            <th>CLT/FRS</th>
                            <th>DATE OP.</th>
                            <th>QTT ENTREE</th>
                            <th>QTT SORTIE</th>
                            <th>DIFF</th>
                        </tr>
                    </thead>
                    <tbody id="mouvements-liste">
						
                    </tbody>
			</table>
		</div>
	</div>
</div>

{% endblock %}

{% block javascripts %}
<script>
$(document).ready(function()
{

	$('input[name="date_commande"]').daterangepicker({
	    opens: 'left',
	    ranges: {
                    "Aujourd'hui": [moment(), moment().subtract("days", -1)],
                    "Hier": [moment().subtract("days", 1), moment()],
                    "7 Jours": [moment().subtract("days", 6), moment()],
                    "Ce mois": [moment().startOf("month"), moment().endOf("month")],
                    "Le mois dernier": [moment().subtract("month", 1).startOf("month"), moment().subtract("month", 1).endOf("month")],
                    "Cette année": [moment().subtract("year", 0).startOf("year"), moment().subtract("year", 0).endOf("year")],
                    "L'année dernière": [moment().subtract("year", 1).startOf("year"), moment().subtract("year", 1).endOf("year")],
                },
        format: "DD/MM/YYYY",
                separator: " au ",
                locale: {
                    applyLabel: "Appliquer",
                    fromLabel: "Depuis",
                    toLabel: "Jusqu'au",
                    customRangeLabel: "Choisir",
                    daysOfWeek: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
                    monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
                    firstDay: 1
                }
	}, function(start, end, label) {
		page = 0;
		$("#date_start").val(start.format('YYYY-MM-DD'));
		$("#date_end").val(end.format('YYYY-MM-DD'));
		charger_ventes();
	});

    $('.dates').bind('click', function(e){
    	page = 0;
		var val = $(this).data('value');
		$('#date_commande').val(val);
		charger_ventes();
    });
	
	charger_ventes();
    
})

function charger_ventes()
{
	var quantite_entree = quantite_sortie = 0;
	var dateStart = $('#date_start').val();
	var dateEnd = $('#date_end').val();

	var postData = {dateStart: dateStart, dateEnd: dateEnd, id: {{ produit.id }} };

	$('#mouvements-liste').append("<tr><td colspan=7 class='load'><img src='"+img_root+"/loading.gif' class='loading'></td></tr>");
	var ajaxCall = $.ajax({
		url: base_url + "ajax/filtremouvementspiece/",
		type: 'post',
		dataType: "json",
		data: postData,
	}).done(function(data) {
		if(data!=null){
			var items = [];
			$.each(data, function(i, item) {
				var bg = 'white';
				var link = '';
				switch(item.type){
					case 'BON DE RECEPTION':
						bg = '#3598dc';
						link = `<a href="` + base_url + `achat/` + item.operation_id + `" class="btn btn-xs blue hidden-print" title="Afficher" target="_blank"><i class="fa fa-mail-forward"></i></a>`;
						break;
					case 'BON DE LIVRAISON':
						link = `<a href="` + base_url + `vente/` + item.operation_id + `" class="btn btn-xs blue hidden-print" title="Afficher" target="_blank"><i class="fa fa-mail-forward"></i></a>`;
						bg = '#32c5d2'; break;
					case 'AVOIR':
						link = `<a href="` + base_url + `vente/` + item.operation_id + `" class="btn btn-xs blue hidden-print" title="Afficher" target="_blank"><i class="fa fa-mail-forward"></i></a>`;
						bg = '#e7505a'; break;
					case 'BON DE RETOUR':
						link = `<a href="` + base_url + `achat/` + item.operation_id + `" class="btn btn-xs blue hidden-print" title="Afficher" target="_blank"><i class="fa fa-mail-forward"></i></a>`;
						bg = '#e7505a'; break;
				}
				
				quantite_entree += parseFloat(item.quantite_entree);
				quantite_sortie += parseFloat(item.quantite_sortie);
				
				items.push(`<tr style='background-color:`+bg+`;'>
					<td>` + item.type + `</td>
					<td>` + item.num_bon + `</td>
					<td>` + item.num_facture + ` ` + link + `</td>
					<td>` + item.client + `</td>
					<td>` + item.date_operation + `</td>
					<td>` + (item.quantite_entree) + `</td>
					<td>` + (item.quantite_sortie) + `</td>
					<td>` + (quantite_entree - quantite_sortie).toFixed(2) + `</td>
					</tr>`);
					
				
			});
			
			items.push(`<tr>
					<th>TOTAUX</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<th>` + quantite_entree.toFixed(2) + `</th>
					<th>` + quantite_sortie.toFixed(2) + `</th>
					<th>` + (quantite_entree - quantite_sortie).toFixed(2) + `</th>
					</tr>`);
					
			$('.load').remove();
			$('#mouvements-liste').html(items);
		}
		else
		{
			$('.load').remove();
			if(page==0) $('#mouvements-liste').html('');
		}
	});
}

</script>
{% endblock %}