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

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

{% block "contenu" %}
<a href="{% url 'gestion_vehicule:index' %}" class="btn btn-primary my-2">Retour</a>
<h3>Détails de la course</h3>

<div class="row mt-2 mt-lg-5">
    <div class="col-12 col-lg-6">
        <h5 class="text-center">Informations sur la course</h5>
        <form action="">
            <div class="form-group">
                <label for="">Nom du passager :</label>
                <input type="text" class="form-control" value="{{ detail_demande.nom_passager }}" readonly>
            </div>
            <div class="form-group">
                <label for="">Lieu de départ :</label>
                <input type="text" class="form-control" value="{{ detail_demande.lieu_depart }}" readonly>
            </div>
            <div class="form-group">
                <label for="">Date et heure de départ prévu :</label>
                <input type="datetime-local" class="form-control" value="{{ detail_demande.date_heure|date:'Y-m-d\\TH:i' }}" readonly>
            </div>
            <div class="form-group">
                <label for="">Lieu d'arrivée :</label>
                <input type="text" class="form-control" value="{{ detail_demande.lieu_arrive }}" readonly>
            </div>
            <div class="form-group">
                <label for="">Véhicule attribué :</label>
                <input type="text" class="form-control" value="{{ detail_demande.immatriculation }}" readonly>
            </div>
        </form>
    </div>
    <div class="col-12 col-lg-6 mt-3 mt-lg-0">
        <h5 class="text-center">Renseigner par le chauffeur</h5>
        <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">
                        Au départ
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <form method="post" action="{% url 'gestion_vehicule:enregistrer-details-course-depart' detail_demande.id %}">
                            {% csrf_token %}
                            <input type="hidden" name="id-vehicule" value="{{ detail_demande.id_vehicule }}">
                            <div class="form-group">
                                <label for="">Heure effectif de départ :</label>
                                <input type="datetime-local" class="form-control" value="{{ detail_demande.details_course.heure_effectif_depart|date:'Y-m-d\\TH:i' }}" name="heure-depart">
                            </div>
                            <div class="form-group mt-2">
                                <label for="">Kilométrage de départ :</label>
                                <input type="number" class="form-control" name="kilometrage_depart" value="{{ detail_demande.details_course.km_depart }}">
                            </div>

                            {% if user|has_group:"Chauffeur" %}
                            <button type="submit" class="btn btn-primary mt-2 enregistrerButton">Enregistrer</button>
                            {% endif %}
                        </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">
                        A l'arrivée
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <form method="post" action="{% url 'gestion_vehicule:enregistrer-details-course-arrivee' detail_demande.id %}">
                            {% csrf_token %}
                            <input type="hidden" name="id-vehicule" value="{{ detail_demande.vehicule.id }}">
                            <div class="form-group">
                                <label for="">Heure effectif d'arrivée :</label>
                                <input type="datetime-local" class="form-control" value="{{ detail_demande.details_course.heure_arrive|date:'Y-m-d\\TH:i' }}" name="heure-effectif-arrivee">
                            </div>
                            <div class="form-group mt-2">
                                <label for="">Kilométrage d'arrivée :</label>
                                <input type="number" class="form-control" name="kilometrage-arrivee" value="{{ detail_demande.details_course.km_arrive }}">
                            </div>
                            <div class="form-check mt-2">
                                <label for="" class="form-check-label">Course terminée</label>
                                <input type="checkbox" class="form-check-input" name="course-terminer" id="course-terminer" data-state="{{ detail_demande.details_course.course_termine }}">
                            </div>
                            {% if user|has_group:"Chauffeur" %}
                            <button type="submit" class="btn btn-primary mt-2 enregistrerButton">Enregistrer</button>
                            {% endif %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-2">
    <div class="col">
        <h3>Carburant</h3>
        <div class="accordion mt-4" id="accordionCarburant">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCarburant" aria-expanded="false" aria-controls="collapseThree">
                        Enregistrer une prise de carburant
                    </button>
                </h2>
                <div id="collapseCarburant" class="accordion-collapse collapse" data-bs-parent="#accordionCarburant">
                    <div class="accordion-body">
                        <form action="{% url 'gestion_vehicule:enregistrer-prise-carburant' detail_demande.id %}" method="post">
                            {% csrf_token %}
                            {{ detail_demande.prise_carburant_formulaire.as_p }}
                            <button type="submit" class="btn btn-primary">Enregistrer</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
         <!-- --------------------------------- -->
</div>

{% endblock %}

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