{% 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('vente_index') }}">Ventes</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Caisse</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->

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

    </div>

    <br/>

	<div class="portlet box green-seagreen">
		<div class="portlet-title">
			<div class="caption">
				<i class="fa fa-shopping-cart"></i>
				Opérations par dates
			</div>
			<div class="actions">
            	<div class="input-icon">
                    <i class="fa fa-calendar font-red"></i>
                    <input type="text" class="form-control long" 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="{{ 'tomorrow'|date('Y-m-d') }}">
                </div>
        	</div>
		</div>

		<div class="portlet-body">

            <div class="row">
                <div class="col-md-6 col-xs-12">
                    <div class="row">
                        <div class="col-md-6 col-xs-12">
                            <a class="dashboard-stat dashboard-stat-v2 green" href="#">
                                <div class="visual">
                                    <i class="fa fa-bar-chart-o"></i>
                                </div>
                                <div class="details">
                                    <div class="number">
                                        <span id="total_quantite" data-counter="counterup" data-value="0">0</span>
                                    </div>
                                    <div class="desc"> Unité dans <span id="nbr_commande" data-counter="counterup" data-value="0">0</span> Commandes</div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-6 col-md-3 col-sm-3 col-xs-12">
                            <a class="dashboard-stat dashboard-stat-v2 blue" href="#">
                                <div class="visual">
                                    <i class="fa fa-dollar"></i>
                                </div>
                                <div class="details">
                                    <div class="number">
                                        <span id="total_apayer" data-counter="counterup" data-value="0">0</div>
                                    <div class="desc"> Chiffre d'affaire </div>
                                </div>
                            </a>
                        </div>
                        
                        
                    </div>

                    <div class="row" style="margin-top:10px;">
                        <div class="col-lg-6 col-md-3 col-sm-3 col-xs-12">
                            <a class="dashboard-stat dashboard-stat-v2 yellow" href="#">
                                <div class="visual">
                                    <i class="fa fa-globe"></i>
                                </div>
                                <div class="details">
                                    <div class="number">
                                        <span id="reste" data-counter="counterup" data-value="0">0</div>
                                    <div class="desc"> Reste à payer </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-6 col-xs-12">

                        </div>
                    </div>

                    <div class="row" style="margin-top:10px;">
                        <div class="col-md-6 col-xs-12">
                            <a class="dashboard-stat dashboard-stat-v2 purple" href="#">
                                <div class="visual">
                                    <i class="fa fa-shopping-cart"></i>
                                </div>
                                <div class="details">
                                    <div class="number">
                                        <span id="total_avoirs" data-counter="counterup" data-value="0">0</span>
                                    </div>
                                    <div class="desc"> Avoirs </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-6 col-xs-12">
                            <a class="dashboard-stat dashboard-stat-v2 red" href="#">
                                <div class="visual">
                                    <i class="fa fa-bar-chart-o"></i>
                                </div>
                                <div class="details">
                                    <div class="number">
                                        <span id="total_depenses" data-counter="counterup" data-value="0">0</span>
                                    </div>
                                    <div class="desc"> Dépenses </div>
                                </div>
                            </a>
                        </div>
                        
                    </div>


                </div>

                <div class="col-md-3 col-xs-12">
                    <div class="portlet box yellow-gold">
                        <div class="portlet-title">
                            <div class="caption">
                                Totaux par compte
                            </div>
                            <div class="actions">
                                
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div class="table-responsive" id="totaux_comptes">

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-xs-12">
                    <div class="portlet box blue">
                        <div class="portlet-title">
                            <div class="caption">
                                Totaux par commercial
                            </div>
                            <div class="actions">
                                
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div class="table-responsive" id="totaux_commerciales">

                            </div>
                        </div>
                    </div>
                </div>


            </div>
		</div>
	</div>


	<div class="row">
		<div class="col-md-12 col-xs-12">
			<div class="portlet box green-seagreen">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-dollar"></i>
						Détails des opérations
					</div>
                    <div class="actions">
                        <button class="btn white hidden-print" onClick="javascript:window.print();"><i class="fa fa-print"></i> Imprimer</button>
                        <button class="btn white hidden-print" onClick="exportTableToExcel('liste-operations', 'Liste des operations')"><i class="fa fa-download"></i> Exporter</button>
                        
                    </div>
				</div>
				<div class="portlet-body">
		            <div class="table-responsive">
		                <table class="table table-striped table-hover" id="liste-operations">
		                    <thead>
		                        <tr>
		                            <th>Date</th>
		                            <th>Facture</th>
		                            <th max-width="200px">Client</th>
		                            <th max-width="200px">Designation</th>
		                            <th>Notes</th>
		                            <th>Quantité</th>
                                    <th>Prix</th>
                                    <th>Total</th>
		                            <th>Montant reçu</th>
		                            <th>Compte</th>
		                        </tr>
		                    </thead>
		                    <tbody id="paiements_recus">
		                    	
		                    </tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

	</div>
	
{% endblock %}

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