{% extends 'default/index.html.twig' %}

{% block heading %}
{# Entête #}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Véhicules</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
        <button class="btn btn-sm btn-outline-secondary"  id="btnAjouter">Ajouter</button>
        <button class="btn btn-sm btn-outline-secondary">Exporter</button>
        </div>
    </div>
</div>
{% endblock %}
{% block main %}
{# Contenu #}
<div class="row">
    <div class="table-responsive">
        <table class="table table-striped table-sm">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Modèle</th>
                    <th>Immatriculation</th>
                    <th>Année</th>
                    <th>Commentaire</th>
                    <th>QR Code</th>
                    <th>#</th>
                </tr>
            </thead>
            <tbody>
            {% for item in vehicules %}
                <tr>
                    <td>{{ item.type }}</td>
                    <td>{{ item.modele }}</td>
                    <td>
                        <span class="editvehicule" data-item="{{ item.uuid }}"><a href="#">{{ item.immatriculation }}</a></span>
                    </td>
                    <td>{{ item.annee }}</td>
                    <td>{{ item.comment }}</td>
                    <td>
                    {% if item.actif %}
                        <span class="editqrcode" data-item="{{ item.uuid }}"><a href="#"><img src="{{ asset('styles/images/qr-code.svg') }}" alt="QR Code" width="30" height="30"></a></span>
                    {% endif %}
                    </td>
                    <td>{% if item.actif %}<i class="bi bi-check fs-2 text-success"></i>{% else %}<i class="bi bi-x fs-2 text-danger"></i>{% endif %}</td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="7">Aucun enregistrement</td>
                </tr>
            {% endfor %}
            </tbody>
            <tfooter>
                <tr>
                    <td colspan="2"></td>
                    <th>Total</th>
                    <th colspan="4">{{ vehicules|length }}</th>
                </tr>
            </tfooter>
        </table>
    </div>
</div>
<script type="module">
    import $ from "jquery";

    $(document).ready(function() {
        $("#btnAjouter").on('click', function () {
            showVehicule();
        });

        $(".editvehicule").on('click', function () {
            showVehicule(this.getAttribute('data-item'));
        });

        $(".editqrcode").on('click', function () {
            var url = '{{ path('vehicules_qrcode', {'uuid': '_item_'}) }}';
            url = url.replace('_item_', this.getAttribute('data-item'));
            $.ajax({
                url: url,
                type: 'GET',
                success: function (data) {
                    $('#defaultmodal').html(data);
                    $('#modalqrcode').show();
                },
                error: function (error) {
                    console.error('Error:', error);
                }
            });
        });

    });

    function showVehicule(item = null) {
        var url = '{{ path('vehicules_new') }}';
        if (item != null) {
            url = '{{ path('vehicules_edit', {'uuid': '_item_'}) }}';
            url = url.replace('_item_', item);
        }
        $.ajax({
            url: url,
            type: 'GET',
            success: function (data) {
                $('#defaultmodal').html(data);
                $('#modalvehicule').show();
            },
            error: function (error) {
                console.error('Error:', error);
            }
        });
    }
	</script>
{% endblock %}