{% 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>
                <span>Statistiques</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->

        <div class="page-toolbar">
            <button class="btn blue-sharp hidden-print" onClick="javascript:window.print();"><i class="fa fa-print"></i> Imprimer le rapport</button>    	
        </div>
    </div>

    <br/>


	<div class="portlet light bordered">
		<div class="portlet-title">
			<div class="caption">
				<i class="icon-bar-chart"></i>
				STATISTIQUES PAR ANNEE
			</div>
            <div class="actions">
                <div class="input-icon">
                    <i class="fa fa-calendar font-red"></i>
                    <input type="text" class="form-control" name="annee_commande" id="annee_commande" value="{{ 'now'|date('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('Y-m-d') }}">
                </div>
            </div>
		</div>
		
		<div class="portlet-body">
            <h3>VENTES</h3>

			<div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 blue-sharp" href="#">
                        <div class="visual">
                            <i class="fa fa-shopping-cart"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="total_cmd" data-counter="counterup" data-value="0">0</span>
                            </div>
                            <div class="desc"> Ventes </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 red-soft" href="#">
                        <div class="visual">
                            <i class="fa fa-money"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="ca_vente" data-counter="counterup" data-value="0">0</div>
                            <div class="desc"> Chiffre d'affaire </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 blue-soft" href="#">
                        <div class="visual">
                            <i class="fa fa-bar-chart-o"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="total_marge" data-counter="counterup" data-value="0">0</span>
                            </div>
                            <div class="desc"> Marge </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 grey-mint" href="#">
                        <div class="visual">
                            <i class="fa fa-globe"></i>
                        </div>
                        <div class="details">
                            <div class="number"> +
                                <span id="rsi" data-counter="counterup" data-value="0">0</div>
                            <div class="desc"> RSI </div>
                        </div>
                    </a>
                </div>
            </div>

            <h3>ACHATS</h3>

            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 blue-sharp" href="#">
                        <div class="visual">
                            <i class="fa fa-shopping-cart"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="total_cmd_achat" data-counter="counterup" data-value="0">0</span>
                            </div>
                            <div class="desc"> Achats </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <a class="dashboard-stat dashboard-stat-v2 red-soft" href="#">
                        <div class="visual">
                            <i class="fa fa-money"></i>
                        </div>
                        <div class="details">
                            <div class="number">
                                <span id="ca_achat" data-counter="counterup" data-value="0">0</div>
                            <div class="desc"> Montant d'Achats </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    
                </div>
            </div>

		</div>

		<div class="clearfix"></div>
		
	</div>

	<div style="page-break-after: always;"></div>

	<div class="portlet light bordered">
		<div class="portlet-title">
			<div class="caption">
				<i class="icon-bar-chart"></i>
				STATISTIQUES PAR MOIS
			</div>
		</div>
		
		<div class="portlet-body">
            <div class="row">
                <div class="col-md-12">
                	<div id="chart_table"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="chart_bar" class="chart" style="height: 400px;"> </div>

                    <button class='btn blue-sharp hidden-print' onClick='save_chart("chart_bar", "GRAPH-STATISTIQUES-PAR-ANNEE.PDF")'><i class='fa fa-download'></i> Exporter</button>
                </div>
            </div>
		</div>

		<div class="clearfix"></div>
	</div>

    <div style="page-break-after: always;"></div>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-bar-chart"></i>
                STATISTIQUES PAR CATEGORIES
            </div>
        </div>
        
        <div class="portlet-body">
            <div class="row">
                <div class="col-md-12">
                    <div id="chart_table_categories"></div>
                </div>
            </div>
            
        </div>

        <div class="clearfix"></div>
    </div>

    <div style="page-break-after: always;"></div>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-bar-chart"></i>
                STATISTIQUES PAR COMMERCIAL
            </div>
        </div>
        
        <div class="portlet-body">
            <div class="row">
                <div class="col-md-12">
                    <div id="chart_table_utilisateurs"></div>
                </div>
            </div>
            
        </div>

        <div class="clearfix"></div>
    </div>

	<!-- /.modal client -->
    <div id="stats_categorie" class="modal fade" tabindex="-1" data-width="400">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Détails</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="chart_table_categorie"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    
	
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/global/plugins/jspdf.min.js') ~ '?' ~ random() }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/html2canvas.min.js') ~ '?' ~ random() }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/scripts/statistiques.js') ~ '?' ~ random() }}" type="text/javascript"></script>
{% endblock %}