//formulaire véhicule <div class="container mx-auto">
  <div class="flex justify-between items-center">
    <form [formGroup]="vehicleForm" (ngSubmit)="onSubmitVehicule()">
      <div class="space-y-4 w-full md:w-2/3 mx-auto">
    <!-- Constructeur -->

    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label class="font-medium mb-1">Constructeur</label>
        <select
          (change)="getModele($event)"
          id="constructeur" name="constructeur" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="Libelle">
          <option  *ngFor="let constructeur of constructeurs " [value]="constructeur.Id">{{ constructeur.Libelle }}</option>
        </select>
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Libelle')?.hasError('required') && (vehicleForm.get('Libelle')?.dirty || vehicleForm.get('Libelle')?.touched)">
          Ce champs est requis
        </small>
      </div>
    </div>

    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="model" class="font-medium mb-1">Modèle</label>
        <select
          id="model" name="model" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="Libelle">
          <option *ngFor="let modele of modeles" [value]="modele.Id">{{ modele.Libelle }}</option>
        </select>
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Libelle')?.hasError('required') && (vehicleForm.get('Libelle')?.dirty || vehicleForm.get('Libelle')?.touched)">
          Ce champs est requis
        </small>
      </div>
    </div>

    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="date_mise_en_circulation" class="font-medium mb-1">Date de mise en circulation</label>
        <input type="date" id="date_mise_en_circulation" name="date_mise_en_circulation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="DateMiseEnCirculation">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('DateMiseEnCirculation')?.hasError('required') && (vehicleForm.get('DateMiseEnCirculation')?.dirty || vehicleForm.get('DateMiseEnCirculation')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>
    <!-- Number Plate -->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="numberplate" class="font-medium mb-1">Numéro de série</label>
        <input type="text" id="numberplate" name="numberplate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Numéro de série" formControlName="NumeroSerie">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('NumeroSerie')?.hasError('invalidSerialNumber') && (vehicleForm.get('NumeroSerie')?.dirty || vehicleForm.get('NumeroSerie')?.touched)">
          Le format du numéro de série n’est pas valide.
        </small>
      </div>
    </div>
    <!-- Registration Date -->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="registration_date" class="font-medium mb-1">Immatriculation</label>
        <input type="text" id="registration_date" name="registration_date" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 fo

cus:border-blue-500 block w-full p-2.5" placeholder="Immatriculation" formControlName="Immatriculation">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Immatriculation')?.hasError('invalidRegistrationNumber') && (vehicleForm.get('Immatriculation')?.dirty || vehicleForm.get('Immatriculation')?.touched)">
          Le format de l’immatriculation n’est pas valide.
        </small>
      </div>
    </div>


    <!-- Kilometerage -->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="kilometrage" class="font-medium mb-1">Kilométrage</label>
        <input type="number" id="kilometrage" name="kilometrage" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Kilométrage" formControlName="Kilometrage">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Kilometrage')?.hasError('required') && (vehicleForm.get('Kilometrage')?.dirty || vehicleForm.get('Kilometrage')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>


    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="critair" class="font-medium mb-1">Critair</label>
        <select id="critair" name="critair" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="VignetteCritair">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('VignetteCritair')?.hasError('required') && (vehicleForm.get('VignetteCritair')?.dirty || vehicleForm.get('VignetteCritair')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>
    <!-- Validity of Critair Stickers-->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="validitycritair" class="font-medium mb-1">Validité Crit'Air</label>
        <input type="date" id="validitycritair" name="validitycritair" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="ValiditeCritair">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('ValiditeCritair')?.hasError('required') && (vehicleForm.get('ValiditeCritair')?.dirty || vehicleForm.get('ValiditeCritair')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>

    <!-- Acquisition Date -->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="DateAchat" class="font-medium mb-1">Date d'acquisition</label>
        <input type="date" id="DateAchat" name="DateAchat" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="DateAchat">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('DateAchat')?.hasError('required') && (vehicleForm.get('DateAchat')?.dirty || vehicleForm.get('DateAchat')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>

    <!-- Vehicle Type -->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="vehicle_type" class="font-medium mb-1">Type de véhicule</label>
        <select id="vehicle_type" name="vehicle_type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="TypeVehicule">
          <option value="Voiture">Voiture</option>
          <option value="Moto">Moto</option>
        </select>
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('TypeVehicule')?.hasError('required') && (vehicleForm.get('TypeVehicule')?.dirty || vehicleForm.get('TypeVehicule')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>


    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="numeroassurance" class="font-medium mb-1">Numéro d'assurance</label>
        <input type="text" id="numeroassurance" name="numeroassurance" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Numéro d'assurance" formControlName="NumeroAssurance">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('NumeroAssurance')?.hasError('required') && (vehicleForm.get('NumeroAssurance')?.dirty || vehicleForm.get('NumeroAssurance')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>

    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="consommation" class="font-medium mb-1">Consommation moyenne</label>
        <input type="number" id="consommation" name="consommation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Consommation moyenne" formControlName="ConsommationMoyenne">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('ConsommationMoyenne')?.hasError('required') && (vehicleForm.get('ConsommationMoyenne')?.dirty || vehicleForm.get('ConsommationMoyenne')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>

    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="prixAchat" class="font-medium mb-1">Prix d'achat</label>
        <input type="number" id="prixAchat" name="prixAchat" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Prix d'achat" formControlName="PrixAchat">
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('PrixAchat')?.hasError('required') && (vehicleForm.get('PrixAchat')?.dirty || vehicleForm.get('PrixAchat')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>



    <!-- Driver -->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="driver" class="font-medium mb-1">Chauffeur associé</label>
        <select id="driver" name="driver" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="IdConducteur">
          <option *ngFor="let driver of drivers" [value]="driver.Id">{{ driver.Nom }}</option>
        </select>
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('IdConducteur')?.hasError('required') && (vehicleForm.get('IdConducteur')?.dirty || vehicleForm.get('IdConducteur')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>

    <!-- Acquisition Status -->
    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="Achat" class="font-medium mb-1">Achat</label>
        <select id="Achat" name="Achat" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-border-blue-500 block w-full p-2.5" formControlName="Achat">
          <option value="Oui">Oui</option>
          <option value="Non">Non</option>
        </select>
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Achat')?.hasError('required') && (vehicleForm.get('Achat')?.dirty || vehicleForm.get('Achat')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>

    <div class="sm:col-span-1">
      <div class="mb-2 block">
        <label for="location" class="font-medium mb-1">Location</label>
        <select id="location" name="location" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" formControlName="Location">
          <option value="Oui">Oui</option>
          <option value="Non">Non</option>
        </select>
        <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Location')?.hasError('required') && (vehicleForm.get('Location')?.dirty || vehicleForm.get('Location')?.touched)">
          Ce champs est requis.
        </small>
      </div>
    </div>

    <div class="max-w-2xl mx-auto">
      <aside class="flex flex-col items-center justify-center mb-5" aria-label="Sidebar">
        <div class="px-3 py-4 overflow-y-auto rounded-2xl bg-gray-50 dark:bg-gray-800">
          <ul class="space-y-2">

            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Modèle caractéristique du véhicule</h2>
             <!-- Category -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label class="font-medium mb-1">Segment : </label>
        {{modelecarac.Segment }}
      </div>
    </div>
    <!-- Capacity -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label  class="font-medium mb-1">Nombre de places :</label>
        {{modelecarac.NombrePlaces }}
      </div>
    </div>

    <!-- Engine Size -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label class="font-medium mb-1">Cylindrée :</label>
        {{modelecarac.Cylindree}}
      </div>
    </div>

    <!-- Weight -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label class="font-medium mb-1" >Poids :</label>
        {{modelecarac.Poids}}
      </div>
    </div>

    <!-- Carbon Emissions -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label  class="font-medium mb-1">Emission de CO2 :</label>
        {{modelecarac.EmissionCO2}}
      </div>
    </div>

    <!-- Fuel Type -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label class="font-medium mb-1" formControlName="TypeCarburant">Type de carburant :</label>
        {{modelecarac.TypeCarburant}}

      </div>
    </div>

    <!-- Transmission Type -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label class="font-medium mb-1" formControlName="TypeBoiteVitesse">Type de transmission :</label>
        {{modelecarac.TypeBoiteVitesse}}
      </div>
    </div>

    <!-- Power to weight Ratio -->
    <div class="sm:col-span-1">
      <div class="mb-2 block" *ngFor="let modelecarac of modelecaracteristique ">
        <label class="font-medium mb-1">Rapport Poids Puissance :</label>
        {{modelecarac.RapportPoidsPuissance}}
      </div>
    </div>
          </ul>
        </div>
      </aside>
  </div>
  <div class="flex justify-around my-8">
    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Enregistrer</button>
  </div>
      </div>
</form>

</div>
</div>
// formulaire d'options
<form class="space-y-4 w-full md:w-2/3 mx-auto"
      [formGroup]="optionService.optionForm" (ngSubmit)="onSubmitOption()">
  <div class="sm:col-span-1">
    <div class="mb-2 block">
      <label for="option" class="font-medium mb-1">Option</label>
      <select id="option" name="option" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5" formControlName="Type">
        <option *ngFor="let option of options" [value]="option.name">{{ option.name }}</option>
      </select>
      <small class="text-red-600 mt-1" *ngIf="optionService.optionForm.get('IdOption')?.hasError('required') && (optionService.optionForm.get('IdOption')?.dirty || optionService.optionForm.get('IdOption')?.touched)">
        Ce champs est requis.
      </small>
    </div>
    <!-- Select element for choosing a vehicle -->
    <div class="mt-4">
      <label for="vehicules" class="block font-medium mb-1">Choisir un véhicule</label>
      <select id="vehicules" name="vehicules" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5" formControlName="IdVehicule">
        <option *ngFor="let vehicule of vehicules" [value]="vehicule.Id">{{vehicule.Constructeur}} {{vehicule.Modele}} {{vehicule.Immatriculation}}</option>
      </select>
    </div>
  <div class="flex justify-around my-8">
    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Enregistrer</button>
    <button type="reset" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Annuler</button>
  </div>
  </div>
</form>
 //formulaire modèle du véhicule
<form [formGroup]="vehicleForm" (ngSubmit)="onSubmitModele()">
  <div class="sm:col-span-1">
    <div class="mb-2 block">
      <label for="model" class="font-medium mb-1">Libelle</label>
      <input type="text"  name="model" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5" placeholder="Libelle" formControlName="Libelle">
      <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Libelle')?.hasError('required') && (vehicleForm.get('Libelle')?.dirty || vehicleForm.get('Libelle')?.touched)">
        Ce champs est requis.
      </small>
    </div>
  </div>
  <div class="sm:col-span-1">
    <div class="mb-2 block">
      <label for="segment" class="font-medium mb-1">Segment</label>
      <input type="text" id="segment" name="segment" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5" placeholder="Segment" formControlName="Segment">
      <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('Segment')?.hasError('required') && (vehicleForm.get('Segment')?.dirty || vehicleForm.get('Segment')?.touched)">
        Ce champs est requis.
      </small>
    </div>
  </div>
  <div class="sm:col-span-1">
    <div class="mb-2 block">
      <label for="nombreplaces" class="font-medium mb-1">Nombre de places</label>
      <input type="number" id="nombreplaces" name="nombreplaces" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5" placeholder="Nombre de places" formControlName="Nb">
      <small class="text-red-600 mt-1" *ngIf="vehicleForm.get('NombrePlaces')?.hasError('required') && (vehicleForm.get('NombrePlaces')?.dirty || vehicleForm.get('NombrePlaces')?.touched)">
        Ce champs est requis.
      </small>
    </div>
  </div>
  <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Enregistrer</button>
</form>