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

{% block body %}
    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li><span>Dossiers</span></li>
        </ul>
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-folder-open fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Dossiers</span>
                <span class="caption-helper">Gérer les dossiers de réparation</span>
            </div>
            <div class="actions hidden-print">
                {% if app.user.aDroit('dossier_ajout') %}
                <a href="{{ path('dossier_new') }}" class="btn green"><i class="fa fa-plus"></i> Nouveau dossier</a>
                {% endif %}
            </div>
        </div>
        <div class="portlet-body">
            <!-- Filters toolbar -->
            <div class="ka-toolbar">
                <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="ka-search-dossiers" placeholder="Rechercher par numéro, client, véhicule…" 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 daterange-dossiers" name="date_dossier" id="date_dossier" value="{{ 'now'|date_modify('-30 days')|date('d/m/Y') }} au {{ 'now'|date('d/m/Y') }}" autocomplete="off">
                        <input type="hidden" id="date_start" value="{{ 'now'|date_modify('-30 days')|date('Y-m-d') }}">
                        <input type="hidden" id="date_end" value="{{ 'now'|date('Y-m-d') }}">
                    </div>
                </div>
            </div>

            <div class="ka-filter-quick" style="margin-top:10px;">
                <label style="margin-right:10px; font-weight:600;">Statut:</label>
                <select id="filter-status" class="form-control input-sm" style="display:inline-block; width:auto;">
                    <option value="">Tous</option>
                    <option value="EN_PREPARATION">En préparation</option>
                    <option value="DEVIS">Devis</option>
                    <option value="EN_ATTENTE_EXPERT">En attente expert</option>
                    <option value="EN_ATTENTE_PIECES">En attente pièces</option>
                    <option value="EN_REPARATION">En réparation</option>
                    <option value="EN_FINALISATION">En finalisation</option>
                    <option value="EN_ATTENTE_FACTURATION">En attente facturation</option>
                    <option value="FACTURE">Facturé</option>
                    <option value="CLOTURE">Clôturé</option>
                </select>

                <label style="margin-left:15px; margin-right:10px; font-weight:600;">Priorité:</label>
                <select id="filter-priorite" class="form-control input-sm" style="display:inline-block; width:auto;">
                    <option value="">Toutes</option>
                    <option value="NORMALE">Normale</option>
                    <option value="URGENTE">Urgente</option>
                    <option value="CRITIQUE">Critique</option>
                </select>

                <button id="btn-reset-filters" class="btn btn-default btn-sm" style="margin-left:15px;">
                    <i class="fa fa-refresh"></i> Réinitialiser
                </button>
            </div>

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

            <!-- Card view results -->
            <div class="ka-results-grid" id="dossier-results">
                <!-- Results loaded via AJAX -->
            </div>

            <!-- Empty state -->
            <div class="ka-empty-state" id="dossier-empty" style="display:none; text-align:center; padding:60px 20px;">
                <i class="fa fa-folder-open-o" style="font-size:80px; color:#ccc;"></i>
                <h3 style="color:#999; margin-top:20px;">Aucun dossier trouvé</h3>
                <p style="color:#bbb;">Essayez de modifier vos critères de recherche</p>
            </div>

            <input type="hidden" id="ka-page" value="1">
        </div>
    </div>

    <!-- Loading indicator -->
    <div id="loading-indicator" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Chargement...</span>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/global/css/dossiers.css') }}">
    <script src="{{ asset('assets/global/scripts/dossiers.js') }}"></script>
{% endblock %}