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

{% block title %}Véhicules - {{ magasin.titre }}{% endblock %}

{% 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>
            <a href="{{ path('network_insights') }}">Network</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <span>Véhicules - {{ magasin.titre }}</span>
        </li>
    </ul>
</div>

<br/>

<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-car fa-lg font-green"></i>
            <span class="caption-subject bold uppercase">Véhicules</span>
            <span class="caption-helper">{{ magasin.titre }}</span>
        </div>
        <div class="actions hidden-print">
            <a href="{{ path('network_insights') }}" class="btn white"><i class="fa fa-arrow-left"></i> Retour</a>
            <button class="btn white" onClick="javascript:window.print();"><i class="fa fa-print"></i> Imprimer</button>
            <button class="btn white" onClick="exportTableToExcel('vehicules', 'VEHICULES_{{ magasin.titre|upper }}')"><i class="fa fa-download"></i> Exporter</button>
        </div>
    </div>
    <div class="portlet-body">
        <!-- Filters toolbar -->
        <div class="ka-toolbar hidden-print">
            <div class="toolbar-left" style="flex:1 1 520px; min-width:320px;">
                <div class="input-icon" style="width:100%;">
                    <i class="fa fa-search font-red"></i>
                    <input type="text" class="form-control" name="motcles" id="motcles" autocomplete="off" placeholder="Rechercher par N° châssis, immatriculation, marque, modèle..." />
                </div>
            </div>
        </div>

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

        <div class="table-responsive">
            <table class="table table-striped table-hover ka-table-tight" id="vehicules">
                <thead>
                    <tr>
                        <th>N° CHÂSSIS</th>
                        <th>MARQUE</th>
                        <th>MODÈLE</th>
                        <th>IMMATR.</th>
                        <th>DATE MISE EN CIRCULATION</th>
                        <th>ENERGIE</th>
                        <th class="text-right">KILOMÈTRAGE</th>
                    </tr>
                </thead>
                <tbody id="vehicules-liste"></tbody>
            </table>
            <!-- Empty state -->
            <div id="vehicules-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-car" aria-hidden="true"></i></div>
                <h4 style="margin-top:0;">Aucun véhicule trouvé</h4>
                <p class="ka-muted">Modifiez votre recherche pour trouver un véhicule.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
var magasinId = {{ magasin.id }};
var page = 0;
var wait = false;

$(document).ready(function() {
    var timerId = null;
    
    $('#motcles').on('keyup', function() {
        clearTimeout(timerId);
        timerId = setTimeout(function() {
            page = 0;
            wait = false;
            loadVehicules();
        }, 300);
    });

    function loadVehicules() {
        // Prevent concurrent loads that can cause duplicate rows
        if (wait) return;
        
        var motcles = $('#motcles').val();
        
        // Capture the page for this specific request to avoid race conditions
        var requestPage = page;
        
        wait = true;
        $('#vehicules-empty-hint').hide();
        $('#vehicules-liste').append('<tr class="load"><td colspan="7" class="text-center"><i class="fa fa-spinner fa-spin"></i> Chargement...</td></tr>');
        
        $.ajax({
            url: '/ajax/filtrevehicules/',
            type: 'POST',
            data: { 
                motcles: motcles,
                magasin: magasinId,
                page: requestPage
            },
            dataType: 'json',
            success: function(data) {
                $('.load').remove();
                
                if (data && data.length > 0) {
                    var html = '';
                    $.each(data, function(index, vehicule) {
                        html += '<tr>';
                        html += '<td>' + (vehicule.num_chassis || vehicule.reference || '-') + '</td>';
                        html += '<td>' + (vehicule.marque || '-') + '</td>';
                        html += '<td>' + (vehicule.modele || '-') + '</td>';
                        html += '<td>' + (vehicule.immatriculation || '-') + '</td>';
                        html += '<td>' + (vehicule.date_mise_en_circulation || '-') + '</td>';
                        html += '<td>' + (vehicule.energie || '-') + '</td>';
                        html += '<td class="text-right">' + (vehicule.kilometrage ? vehicule.kilometrage.toLocaleString('fr-FR') : '-') + '</td>';
                        html += '</tr>';
                    });
                    
                    if (requestPage === 0) {
                        $('#vehicules-liste').html(html);
                    } else {
                        $('#vehicules-liste').append(html);
                    }
                    
                    page = requestPage + 1;
                    wait = false; // more pages may exist
                    $('#vehicules-empty-hint').hide();
                } else {
                    // No results for this page; prevent further auto-load but allow new queries
                    wait = true;
                    if (requestPage === 0) {
                        $('#vehicules-liste').empty();
                        $('#vehicules-empty-hint').show();
                    }
                }
            },
            error: function() {
                $('.load').remove();
                wait = true;
                if (page === 0) {
                    $('#vehicules-liste').html('<tr><td colspan="7" class="text-center text-danger">Erreur de chargement</td></tr>');
                }
            }
        });
    }

    // Load initial data
    loadVehicules();
    
    // Infinite scroll
    $(window).scroll(function() {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 5) {
            if (!wait) {
                loadVehicules();
            }
        }
    });
});
</script>
{% endblock %}