{% extends "BASE.html" %}
{% load static %}

{% block page_titre %} SGL - Détails du véhicule {% endblock %}

{% block "contenu" %}
<a class="btn btn-primary mt-2" href="{% url 'gestion_vehicule:index' %}" >Retour</a>
<div class="row flex-column flex-lg-row p-2 border rounded m-2">
    <div class="col d-flex flex-column justify-content-center">
        <img src="{{ vehicule.image.url }}" class="w-100" alt="Image non disponible">
    </div>
    <div class="col">
        <h3 class="text-center">Carnet de bord du vehicule</h3>
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
        <form action="{% url 'gestion_vehicule:enregistrer-carnetBord' vehicule.id %}" id="carnetBordForm" method="post">
            <div class="form-group">
                <label for="">Immatriculation :</label>
                <input type="text" class="form-control" value="{{ vehicule.immatriculation }}">
            </div>
            <div class="form-group mt-2">
                <label for="">Mois concerné :</label>
                <input type="month" class="form-control">
            </div>
            <div class="form-group mt-2">
                <label for="">Total kilomètre parcourue :</label>
                <input type="number" class="form-control">
            </div>
        </form>
    </div>
</div>
<div class="row">
    <div class="col">
        <a href="{% url 'gestion_vehicule:carnet-carburant' vehicule.id %}" class="btn btn-lg btn-primary d-block m-auto">Carnet de carburant</a>
    </div>
    <div class="col">
        <a href="{% url 'gestion_vehicule:carnet-sortie-vehicule' vehicule.id %}" class="btn btn-lg btn-primary d-block m-auto">Sortie du vehicule</a>
    </div>
</div>

<!-- <div class="accordion mt-2" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Prise de carburant
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <form action="{% url 'gestion_vehicule:enregistrer-prise-carburant' vehicule.id %}" method="post">
                    {% csrf_token %}
                    {{ prise_carburant_formulaire.as_p }}
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </form>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Carnet de bord du vehicule
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <form action="{% url 'gestion_vehicule:enregistrer-carnetBord' vehicule.id %}" id="carnetBordForm" method="post">
                    {% csrf_token %}
                    {{ carnet_bord_formulaire.as_p }}
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </form>
            </div>
        </div>
    </div>
</div> -->


{% endblock %}

{% block "js" %}
    <script src="{% static 'js/detail_gestion_vehicule.js' %}"></script>
{% endblock %}