@extends('layouts.app')

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-12">
        <div class="">
            <div class="d-flex flex-row-reverse">
                <div class="card">
                    <div class="card-header bg-primary text-white text-uppercase">
                        {{ isset($panneau) ? 'MODIFICATION D\'UN CHANTIER' : 'AJOUT D\'UN CHANTIER' }}
                    </div>
                </div>
            </div>

            
            @php
                $classDisabled = !isset($panneau) ? 'disableInCreate' : '';
                $classDisabled = "";
            @endphp

            

            @if ($errors->any())
                <div class="alert alert-danger mt-2">
                    <strong>Des erreurs ont été détectées :</strong>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="container-fluid mt-3">

            <div class="row">
                <div class="col-md-3 pe-0">
                    <!-- Sidebar -->
                    <ul class="nav flex-column step-nav" id="stepSidebar">
                        <!-- Étape 1 : Panneau de chantier -->
                        <li class="nav-item">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 active step-link" data-target="section-panneau">
                                <i class="fa-regular fa-circle-right me-2"></i>
                                Panneau de chantier
                            </a>
                        </li>
                        
                          <!-- Étape 2 : Parties prenantes -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer le panneau de chantier avant d\'accéder à ces informations' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-parties">
                                <i class="fa-regular fa-circle me-2"></i>
                                Parties prenantes
                            </a>
                        </li>
                        

                        <!-- Étape 3 : Permis -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer le panneau de chantier avant d\'accéder à ces informations' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-permis">
                                <i class="fa-regular fa-circle me-2"></i>
                                Permis
                            </a>
                        </li>

                        <!-- Étape 4 : Empreinte carbone -->
                        <li class="nav-item" title="{{ !isset($panneau) ? 'Merci de créer le panneau de chantier avant d\'accéder à ces informations' : '' }}">
                            <a href="#" class="nav-link d-inline-flex px-0 px-lg-3 step-link {{ $classDisabled }}" data-target="section-rse">
                                <i class="fa-regular fa-circle me-2"></i>
                                Empreinte carbone
                            </a>
                        </li>
                    </ul>
                </div>


                    <!-- Contenu dynamique -->
                <div class="col-md-9 pe-0">

                    <div id="section-panneau" class="content-section">
                    <form method="POST" action="{{ isset($panneau) ? route('panneaux.update.panneau', $panneau->id) : route('panneaux.store.panneau') }}">
                        @csrf
                        @if(isset($panneau))
                            @method('PUT')
                        @endif
                        <div class="card-body">

                            <!-- #region Panneau de chantier identités-->
                            <div class="card shadow-sm rounded-3">

                                <div class="card-header bg-primary text-white text-uppercase">
                                    <i class="bi bi-postcard me-2"></i> Panneau de chantier connecté
                                </div>
                                
                                <div class="card-body">                            
                                        <div class="row">
                                            <!-- Infos chantier -->
                                            <div class="col-md-7">
                                                <div class="mb-3">
                                                    <label for="codeChantier" class="form-label fw-semibold">Code Chantier</label>
                                                    <input type="text" class="form-control" name="codeChantier" id="codeChantier" value="{{ old('codeChantier') }}" required>
                                                    @error('codeChantier')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <div class="mb-3">
                                                    <label for="nomChantier" class="form-label fw-semibold">Nom du chantier</label>
                                                    <input type="text" class="form-control" name="nomChantier" id="nomChantier" value="{{ old('nomChantier') }}" required>
                                                    @error('nomChantier')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <div class="mb-3">
                                                    <label for="soustitreChantier" class="form-label fw-semibold">Sous-titre (optionnel)</label>
                                                    <input type="text" class="form-control" name="soustitreChantier" id="soustitreChantier" value="{{ old('soustitreChantier') }}">
                                                    @error('soustitreChantier')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <div class="mb-3">
                                                    <label for="adresseChantier" class="form-label fw-semibold">Adresse complète</label>
                                                    <input type="text" class="form-control" name="adresseChantier" id="adresseChantier" value="{{ old('adresseChantier') }}" required>
                                                    @error('adresseChantier')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-4 mb-3">                                                        
                                                        <x-codePostal name="codePostalChantier" label="Code postal" fwsemibold="fw-semibold" maxlength="5" required :value="$panneau->codePostalChantier ?? ''" />
                                                        @error('codePostalChantier')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-8 mb-3">
                                                        <x-ville name="villeChantier" fwsemibold="fw-semibold" codePostalInputId="codePostalChantier" required :value="$panneau->villeChantier ?? ''" />
                                                        @error('villeChantier')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="form-check mt-3">
                                                    <input class="form-check-input" type="checkbox" name="actif" id="actif" {{ old('actif', true) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="actif">
                                                        Actif
                                                    </label>
                                                    @error('actif')
                                                        <br><small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>

                                            <!-- Image chantier -->
                                            <div class="col-md-5 d-flex align-items-center justify-content-center">
                                                <img src="https://pcc.logist.fr/@/image?welcome/1738802433" class="img-fluid rounded shadow-sm" alt="Illustration chantier" style="max-height: 250px;">
                                            </div>
                                        </div>
                                    

                                    <div class="mt-4 text-end">
                                        <button type="submit" class="btn btn-primary px-4">
                                            <i class="bi bi-check-circle me-1"></i> {{ isset($panneau) ? 'Enregistrer' : 'Créer le chantier' }}
                                        </button>
                                    </div>                                    
                                </div>

                            </div>
                            <!-- #end region Panneau de chantier identités-->
                        </div>
                    </form>
                    </div>
                    

                    <div id="section-parties" class="content-section d-none">
                        <div class="card-body">
                            <!-- #region Parties prenantes -->
                            <div class="card shadow-sm rounded-3">
                                <div class="card-header bg-primary text-white text-uppercase">
                                    <i class="bi bi-people-fill me-2"></i> Parties prenantes
                                </div>
                                <div class="card-body px-4">

                                    <!-- Maître d'Ouvrage - MOA -->
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold text-uppercase">Maître d'Ouvrage</label>
                                        <div class="mb-2">
                                            <div class="col-6">
                                                <label for="mo_adresse" class="form-label">Nom</label>
                                                <input type="text" name="moa_nom" class="form-control mb-2" placeholder="" value="{{ old('moa_nom') }}">
                                            </div>
                                            <div class="row mb-3">
                                                <!-- Adresse complète -->
                                                <div class="col-md-6">
                                                    <label for="moa_adresse" class="form-label">Adresse complète</label>
                                                    <input type="text" name="mo_adresse" class="form-control" id="moa_adresse" placeholder="" value="{{ old('moa_adresse') }}">
                                                    @error('moa_adresse')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Code postal -->
                                                <div class="col-md-3">
                                                    <x-codePostal name="moa_codePostal" label="Code postal" fwsemibold="" maxlength="5" required :value="$panneau->moa_codePostal ?? ''" />
                                                    @error('moa_code_postal')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Ville -->
                                                <div class="col-md-3">
                                                    <x-ville name="moa_ville" fwsemibold="" codePostalInputId="moa_codePostal" required :value="$panneau->moa_ville ?? ''" />
                                                    @error('moa_ville')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="mx-auto my-5" style="width: 75%; height: 2px; background-color: #939292; border: none;">

                                    <!-- Assistant Maître d'Ouvrage -->
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold text-uppercase">Assistant Maître d'Ouvrage</label>
                                        <div class="mb-2">
                                            <div class="col-6">
                                                <label for="mo_adresse" class="form-label">Nom</label>
                                                <input type="text" name="moa_assistant_nom" class="form-control mb-2" placeholder="" value="{{ old('moa_assistant_nom') }}">
                                            </div>
                                            <div class="row mb-3">
                                                <!-- Adresse complète -->
                                                <div class="col-md-6">
                                                    <label for="moa_assistant_adresse" class="form-label">Adresse complète</label>
                                                    <input type="text" name="moa_assistant_adresse" class="form-control" id="moa_assistant_adresse" placeholder="" value="{{ old('moa_assistant_adresse') }}">
                                                    @error('moa_assistant_adresse')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Code postal -->
                                                <div class="col-md-3">
                                                    <x-codePostal name="moa_assistant_codePostal" label="Code postal" fwsemibold="" maxlength="5" required :value="$panneau->moa_assistant_codePostal ?? ''" />
                                                    @error('moa_assistant_codePostal')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Ville -->
                                                <div class="col-md-3">
                                                    <x-ville name="moa_assistant_ville" fwsemibold="" codePostalInputId="moa_assistant_codePostal" required :value="$panneau->moa_assistant_ville ?? ''" />
                                                    @error('moa_assistant_ville')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="mx-auto my-5" style="width: 75%; height: 2px; background-color: #939292; border: none;">

                                    <!-- Maître d'Œuvre -->
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold text-uppercase">Maîtrise d'œuvre</label>
                                        <div class="mb-2">
                                            <div class="col-6">
                                                <label for="mo_adresse" class="form-label">Nom</label>
                                                <input type="text" name="moe_nom" class="form-control col-6 mb-2" placeholder="" value="{{ old('moe_nom') }}">
                                            </div>
                                            <div class="row mb-3">
                                                <!-- Adresse complète -->
                                                <div class="col-md-6">
                                                    <label for="moe_adresse" class="form-label">Adresse complète</label>
                                                    <input type="text" name="moe_adresse" class="form-control" id="moe_adresse" placeholder="" value="{{ old('moe_adresse') }}">
                                                    @error('moe_adresse')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Code postal -->
                                                <div class="col-md-3">
                                                    <x-codePostal name="moe_codePostal" label="Code postal" fwsemibold="" maxlength="5" required :value="$panneau->moe_codePostal ?? ''" />
                                                    @error('moe_code_postal')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Ville -->
                                                <div class="col-md-3">
                                                    <x-ville name="moe_ville" fwsemibold="" codePostalInputId="moe_codePostal" required :value="$panneau->moe_ville ?? ''" />
                                                    @error('moe_ville')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="mx-auto my-5" style="width: 75%; height: 2px; background-color: #939292; border: none;">

                                    <!-- Bureau de Contrôle -->
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold text-uppercase">CSPS / Bureau de Contrôle</label>
                                        <div class="mb-2">
                                            <div class="col-6">
                                                <label for="csps_nom" class="form-label">Nom</label>
                                                <input type="text" name="csps_nom" class="form-control mb-2" placeholder="" value="{{ old('csps_nom') }}">
                                            </div>
                                            <div class="row mb-3">
                                                <!-- Adresse complète -->
                                                <div class="col-md-6">
                                                    <label for="mo_adresse" class="form-label">Adresse complète</label>
                                                    <input type="text" name="csps_adresse" class="form-control" id="csps_adresse" placeholder="" value="{{ old('csps_adresse') }}">
                                                    @error('csps_adresse')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Code postal -->
                                                <div class="col-md-3">
                                                    <x-codePostal name="csps_codePostal" label="Code postal" fwsemibold="" maxlength="5" required :value="$panneau->csps_codePostal ?? ''" />                                                    
                                                    @error('csps_codePostal')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <!-- Ville -->
                                                <div class="col-md-3">
                                                    <x-ville name="csps_ville" fwsemibold="" codePostalInputId="csps_codePostal" required :value="$panneau->csps_ville ?? ''" />
                                                    @error('csps_ville')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-end">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-check-circle me-1"></i> Enregistrer
                                        </button>
                                    </div>

                                </div>
                            </div>
                            <!-- #endregion Parties prenantes -->
                        </div>
                    </div>

                    <!-- #region Permis -->
                    <div id="section-permis" class="content-section d-none">
                        <div class="card-body">                                    
                            <div class="card shadow-sm rounded-3">
                                <div class="card-header bg-primary text-white text-uppercase">
                                <i class="fa-solid fa-file-circle-check me-2"></i> Permis
                                </div>
                                <div class="card-body px-4">
                                    
                                    <div class="mb-4">

                                        <!-- Permis de démolir -->
                                        <label class="form-label fw-semibold text-uppercase"> <i class="fa-solid fa-hammer"></i> Permis de démolir</label>
                                        <div class="row g-3 pb-3 align-items-end">
                                            <!-- Numéro -->
                                            <div class="col-md-3 col-6">
                                                <label for="numero_permis" class="form-label">Numéro </label>
                                                <input type="text" class="form-control" name="numero_permis" id="numero_permis" value="{{ old('numero_permis') }}" required>
                                                @error('numero_permis')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <!-- Date d’obtention -->
                                            <div class="col-md-3 col-6">
                                                <label for="date_obtention" class="form-label">Date d'obtention </label>
                                                <input type="date" class="form-control" name="date_obtention" id="date_obtention" value="{{ old('date_obtention') }}" required>
                                                @error('date_obtention')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <!-- Date publication -->
                                            <div class="col-md-3 col-6">
                                                <label for="date_publication" class="form-label">Publié le </label>
                                                <input type="date" class="form-control" name="date_publication" id="date_publication" value="{{ old('date_publication') }}" required>
                                                @error('date_publication')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <!-- Checkbox huissier centrée -->
                                            <div class="col-md-3 col-6 d-flex flex-column justify-content-center align-items-center">
                                                <label for="constate_huissier" class="form-label pb-3">Constaté par huissier</label>
                                                <input class="form-check-input" type="checkbox" name="constate_huissier" id="constate_huissier" {{ old('constate_huissier') ? 'checked' : '' }}>
                                            </div>
                                        </div>
                                        <!-- Fin Permis de démolir -->

                                        <hr class="mx-auto my-5" style="width: 75%; height: 2px; background-color: #939292; border: none;">

                                        <!-- Permis de construire -->
                                        <label class="form-label fw-semibold text-uppercase"> <i class="fa-solid fa-person-digging"></i> Permis de construire</label>
                                        <div class="row g-3 pb-3 align-items-end">
                                            <!-- Numéro -->
                                            <div class="col-md-3">
                                                <label for="numero_permis" class="form-label">Numéro </label>
                                                <input type="text" class="form-control" name="numero_permis" id="numero_permis" value="{{ old('numero_permis') }}" required>
                                                @error('numero_permis')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <!-- Date d’obtention -->
                                            <div class="col-md-3">
                                                <label for="date_obtention" class="form-label">Date d'obtention </label>
                                                <input type="date" class="form-control" name="date_obtention" id="date_obtention" value="{{ old('date_obtention') }}" required>
                                                @error('date_obtention')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <!-- Date publication -->
                                            <div class="col-md-3">
                                                <label for="date_publication" class="form-label">Publié le </label>
                                                <input type="date" class="form-control" name="date_publication" id="date_publication" value="{{ old('date_publication') }}" required>
                                                @error('date_publication')
                                                    <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <!-- Checkbox huissier centrée -->
                                            <div class="col-md-3 d-flex flex-column justify-content-center align-items-center">
                                                <label for="constate_huissier" class="form-label pb-3">Constaté par huissier</label>
                                                <input class="form-check-input" type="checkbox" name="constate_huissier" id="constate_huissier" {{ old('constate_huissier') ? 'checked' : '' }}>
                                            </div>
                                        </div>
                                        <!-- Fin permis de construire -->

                                        <hr class="mx-auto my-5" style="width: 75%; height: 2px; background-color: #939292; border: none;">

                                        <!-- Permis de constuire - Modificatif -->
                                        <label class="form-label fw-semibold text-uppercase"> <i class="fa-solid fa-person-digging"></i> Permis de construire - Modificatif</label>
                                        <!-- Ligne : Numéro, Date obtention, Bénéficiaire -->
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="numero_permis" class="form-label">Numéro *</label>
                                                <input type="text" class="form-control" name="numero_permis" id="numero_permis" value="{{ old('numero_permis') }}" required>
                                                @error('numero_permis') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                            <div class="col-md-4">
                                                <label for="date_obtention" class="form-label">Date d'obtention *</label>
                                                <input type="date" class="form-control" name="date_obtention" id="date_obtention" value="{{ old('date_obtention') }}" required>
                                                @error('date_obtention') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                            <div class="col-md-4">
                                                <label for="beneficiaire" class="form-label">Bénéficiaire</label>
                                                <input type="text" class="form-control" name="beneficiaire" id="beneficiaire" value="{{ old('beneficiaire') }}">
                                                @error('beneficiaire') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                        </div>

                                        <!-- Ligne : Nature, Surface, SHON -->
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="nature_travaux" class="form-label">Nature des travaux</label>
                                                <input type="text" class="form-control" name="nature_travaux" id="nature_travaux" value="{{ old('nature_travaux') }}">
                                                @error('nature_travaux') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                            <div class="col-md-3">
                                                <label for="surface_creee" class="form-label">Surface créée</label>
                                                <input type="text" class="form-control" name="surface_creee" id="surface_creee" value="{{ old('surface_creee') }}">
                                                @error('surface_creee') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                            <div class="col-md-3">
                                                <label for="shon" class="form-label">SHON</label>
                                                <input type="text" class="form-control" name="shon" id="shon" value="{{ old('shon') }}">
                                                @error('shon') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                        </div>

                                        <!-- Ligne : Affichage en mairie, Publié le -->
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="affichage_mairie" class="form-label">Affichage en Mairie</label>
                                                <input type="text" class="form-control" name="affichage_mairie" id="affichage_mairie" value="{{ old('affichage_mairie') }}">
                                                @error('affichage_mairie') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                            <div class="col-md-3">
                                                <label for="date_publication" class="form-label">Publié le</label>
                                                <input type="date" class="form-control" name="date_publication" id="date_publication" value="{{ old('date_publication') }}">
                                                @error('date_publication') <small class="text-danger">{{ $message }}</small> @enderror
                                            </div>
                                        </div>
                                        <!-- Fin permis de construire -->                                    
                                    </div>  
                                    
                                    <div class="mt-4 text-end">
                                        <button type="submit" class="btn btn-primary px-4">
                                            <i class="bi bi-check-circle me-1"></i> Enregistrer
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- #endregion Permis -->


                    <!-- #region rse -->
                    <div id="section-rse" class="content-section d-none">
                        <div class="card-body">                                    
                            <div class="card shadow-sm rounded-3">
                                <div class="card-header bg-primary text-white text-uppercase">
                                <i class="fa-solid fa-leaf me-2"></i>Empreinte carbone
                                </div>
                                <div class="card-body px-4">
                                    
                                    <div class="mb-4">
                                        <div class="row text-center">
                                            <!-- Jours d'exploitation -->
                                            <div class="col-6 col-md-3 mb-3">
                                                <label class="fw-bold">Jours d'exploitation</label>
                                                <div class="mt-1">
                                                    <i class="fas fa-calendar fa-lg me-1" aria-hidden="true"></i>
                                                    <input type="number" class="form-control text-center mt-2" value="">
                                                </div>
                                            </div>

                                            <!-- Accès chantier -->
                                            <div class="col-6 col-md-3 mb-3">
                                                <label class="fw-bold">Accès chantier</label>
                                                <div class="mt-1">
                                                    <i class="fas fa-truck fa-lg me-1" aria-hidden="true"></i>
                                                    <input type="number" class="form-control text-center mt-2" value="">
                                                </div>
                                            </div>

                                            <!-- Économie de carburant -->
                                            <div class="col-6 col-md-3 mb-3">
                                                <label class="fw-bold">Économie de carburant (L)</label>
                                                <div class="mt-1">
                                                    <i class="fas fa-gas-pump fa-lg me-1" aria-hidden="true"
                                                    data-bs-toggle="tooltip" data-bs-html="true"
                                                    title="1h d'attente répartie :<hr size=1>50% moteur tournant = 5L<br>50% rotation ville = 5,25L<hr size=1>[gazole]"></i>
                                                    <input type="number" class="form-control text-center mt-2" value="">
                                                </div>
                                            </div>

                                            <!-- Économie de CO2 -->
                                            <div class="col-6 col-md-3 mb-3">
                                                <label class="fw-bold">Économie de CO<sub>2</sub> (kg)</label>
                                                <div class="mt-1">
                                                    <i class="fas fa-leaf fa-lg me-1 mb-1" aria-hidden="true"
                                                    data-bs-toggle="tooltip" title="Estimation basée sur consommation gazole"></i>
                                                    <input type="number" class="form-control text-center mt-2" value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-4 text-end">
                                        <button type="submit" class="btn btn-primary px-4">
                                            <i class="bi bi-check-circle me-1"></i> Enregistrer
                                        </button>
                                    </div>
                                        
                                </div>
                            </div>                                
                        </div>
                    </div>
                    <!-- #endregion Permis -->
                        
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const links = document.querySelectorAll("#stepSidebar .step-link");

            links.forEach(link => {
                link.addEventListener("click", function (e) {
                    e.preventDefault();

                    // Réinitialiser tous les liens
                    links.forEach(l => {
                        l.classList.remove("active");
                        const icon = l.querySelector("i");
                        if (icon) {
                            icon.classList.remove("fa-circle-right");
                            icon.classList.add("fa-circle");
                        }
                    });

                    // Activer le lien cliqué
                    this.classList.add("active");
                    const icon = this.querySelector("i");
                    if (icon) {
                        icon.classList.remove("fa-circle");
                        icon.classList.add("fa-circle-right");
                    }

                    // Affichage conditionnel des sections
                    const target = this.getAttribute("data-target");
                    document.querySelectorAll(".content-section").forEach(section => {
                        section.classList.toggle("d-none", section.id !== target);
                    });
                });
            });
        });
    </script>

@endsection