{% 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>Etats 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-file-text-o fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Etat de stock</span>
                <span class="caption-helper hidden-print">Configurer et lister</span>
            </div>
        </div>

		{{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
        <div class="portlet-body form">
            <div class="form-body">
                <div class="ka-toolbar hidden-print">
                    <div class="toolbar-left" style="flex:1 1 420px; min-width:320px;">
                        <div class="input-icon input-group" style="width:100%;">
                            <i class="fa fa-calendar font-red"></i>
                            <input type="text" name="etatstock-daterange" class="form-control" placeholder="Sélectionner la période" />
                        </div>
                    </div>
                    <div class="toolbar-right" style="flex:1 1 320px; min-width:280px;">
                        {{ form_widget(form.notes, {'attr': {'class': 'form-control', 'id': 'etat_notes'}}) }}
                    </div>
                </div>

                <div class="ka-filter-quick hidden-print" aria-label="Périodes rapides" style="margin-top:10px;">
                    <button type="submit" class="btn green btn-block">
                        <i class="fa fa-gears"></i> Générer l'état
                    </button>
                </div>

                <div style="display:none;">
                    {{ form_widget(form.dateEtat) }}
                    {{ form_widget(form.dateSortie) }}
                </div>
            </div>
        </div>
        {{ form_end(form) }}

        <hr class="ka-section-sep" />

        {% if etatStocks|length > 0 %}
            <div class="table-responsive">
                <table class="table table-striped table-hover ka-table-tight">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Date de l'état</th>
                            <th scope="col">Nombre produit</th>
                            <th scope="col">Prix achat</th>
                            <th scope="col">Prix vente</th>
                            <th scope="col">Notes</th>
                            <th scope="col" class="hidden-print">ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for etatStock in etatStocks %}
                        <tr>
                            <td><a href="{{ path('etatstock_show', { 'id': etatStock.id }) }}">#{{ etatStock.id }}</a></td>
                            <td>{% if etatStock.dateEtat %}{{ etatStock.dateEtat|date('Y-m-d H:i:s') }}{% endif %}</td>
                            <td>{{ etatStock.nombreProduit }}</td>
                            <td>{{ etatStock.prixAchatTotal|number_format(2, '.', ' ') }}</td>
                            <td>{{ etatStock.prixVenteTotal|number_format(2, '.', ' ') }}</td>
                            <td>{{ etatStock.notes }}</td>
                            <td class='text-right hidden-print'>
                              <div class="btn-group pull-right">
                                <button class="btn btn-xs default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions <i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu pull-right">
                                  <li><a href="{{ path('etatstock_show', { 'id': etatStock.id }) }}"><i class="fa fa-mail-forward"></i> Afficher</a></li>
                                  <li><a href="{{ path('etatstock_show', { 'id': etatStock.id }) }}"><i class="fa fa-download"></i> Exporter</a></li>
                                </ul>
                              </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
		     </table>
	      </div>
              <div class="text-center">{{ knp_pagination_render(etatStocks) }}</div>
            {% else %}
            <div class="ka-empty-state" id="etatstocks-empty-hint">
                <div style="font-size:36px;color:#9aa0a6;line-height:1;margin-bottom:6px;"><i class="fa fa-file-o"></i></div>
                <h4 style="margin-top:0;">Aucun état enregistré</h4>
                <p class="ka-muted">Générez un nouvel état pour commencer.</p>
            </div>
            {% endif %}

    </div>

    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(function(){
            $('input[name="etatstock-daterange"]').daterangepicker({
                opens: 'left',
                ranges: {
                    "Aujourd'hui": [moment(), moment()],
                    "7 Jours": [moment().subtract(6,'days'), moment()],
                    "Ce mois": [moment().startOf('month'), moment().endOf('month')],
                    "Mois dernier": [moment().subtract(1,'month').startOf('month'), moment().subtract(1,'month').endOf('month')],
                    "Cette année": [moment().startOf('year'), moment().endOf('year')]
                },
                locale: {
                    format: 'DD/MM/YYYY',
                    separator: ' au ',
                    applyLabel: 'Appliquer',
                    cancelLabel: 'Annuler',
                    fromLabel: 'De',
                    toLabel: 'À',
                    customRangeLabel: 'Personnalisé',
                    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){
                $('#appbundle_etat_stock_dateEtat').val(start.format('DD-MM-YYYY'));
                $('#appbundle_etat_stock_dateSortie').val(end.format('DD-MM-YYYY'));
            });
        });
    </script>
{% endblock %}