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

{% block body %}

    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li><span>Réparations</span></li>
        </ul>
    </div>

    <br/>

    <!-- Filtre: modern portlet with search + date range + quick presets -->
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-wrench fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Réparations par dates</span>
                <span class="caption-helper" id="js-caption-helper">(select dates)</span>
            </div>
                <div class="actions hidden-print">
                    <div class="btn-group">
                        <button class="btn white" onclick="exportTableToExcel('or-parmois', 'REPARATIONS-PAR-DATES')"><i class="fa fa-download"></i> Exporter</button>
                        <button class="btn white" onClick="javascript:window.print();"><i class="fa fa-print"></i> Imprimer</button>
                    </div>
                </div>
        </div>
        <div class="portlet-body">
            <!-- Filters toolbar -->
            <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-search font-red"></i>
                        <input type="text" class="form-control" name="motcles" id="motcles" placeholder="Rechercher par O.R, véhicule, client…" autocomplete="off">
                    </div>
                </div>
                <div class="toolbar-right" style="flex:1 1 320px; min-width:280px;">
                    <div class="input-icon" style="width:100%;">
                        <i class="fa fa-calendar font-red"></i>
                        <input type="text" class="form-control" name="date_commande" id="date_commande" value="{{ 'now'|date('d/m/Y') }} au {{ 'now'|date('d/m/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="ka-filter-quick hidden-print" aria-label="Périodes rapides" style="margin-top:10px;">
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}">Aujourd'hui</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date_modify('-6 day')|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}">7 jours</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date('01/m/Y') }} au {{ 'now'|date('t/m/Y') }}">Ce mois</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates hidden-xs" data-value="{{ 'now'|date_modify('first day of last month')|date('d/m/Y') }} au {{ 'now'|date_modify('last day of last month')|date('d/m/Y') }}">Mois dernier</a>
                <a href="javascript:;" class="btn btn-default btn-xs dates" data-value="{{ 'now'|date_modify('first day of january')|date('d/m/Y') }} au {{ 'now'|date_modify('last day of december')|date('d/m/Y') }}">Cette année</a>
            </div>

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

            <div class="table-responsive">
                <table class="table table-striped table-hover" id="or-parmois">
                    <thead>
                        <tr>
                            <th>Date sortie</th>
                            <th>Client</th>
                            <th>Tél</th>
                            <th>Email</th>
                            <th>N° de facture</th>
                            <th>Date facturation</th>
                            <th>Marque</th>
                            <th>Modèle</th>
                            <th>N° de chassis</th>
                            <th>Mise en circulation</th>
                            <th>Type client</th>
                            <th>Type d'entrée</th>
                            <th>Qtt Service</th>
                            <th>Total Service</th>
                            <th>Total PDR</th>
                            <th>Total HT</th>
                        </tr>
                    </thead>
                    <tbody id="reparations-liste"></tbody>
                </table>
                <div id="reparations-empty-hint" class="ka-empty-state" style="display:none;">
                    <div style="font-size:36px;color:#9aa0a6;line-height:1;margin-bottom:6px;"><i class="fa fa-wrench"></i></div>
                    <div class="ka-empty-title">Aucune réparation trouvée</div>
                    <div class="ka-empty-sub">Essayez un autre mot-clé ou changez la période.</div>
                </div>
            </div>

        </div>
    </div>

{% endblock %}

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