@extends('layouts.master')

@section('title', 'Modifier Besoin Budgétaire')

@section('content')
<style>
    table input{
    min-width:150px;
    }

    table th,
    table td{
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
        
    .input-nature {
        min-width: 300px;
    }

     .input-natureresource {
        min-width: 300px;
    }

    .input-small {
        min-width: 90px;
    }

    .table-responsive {
    overflow-x: auto;
    }   
</style>
<style>
    .bg-light {
        background-color: #f1f3f6 !important;
        cursor: not-allowed;
    }

    .form-wizard {
        min-height: 650px;
        position: relative;
    }

    .step {
        display: none;
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.4s ease;
    }

    .step.active {
        display: block;
        opacity: 1;
        transform: translateX(0);
    }

    .step.exit-left {
        opacity: 0;
        transform: translateX(-50px);
    }

    .step.exit-right {
        opacity: 0;
        transform: translateX(50px);
    }

    .step .btn {
        margin-top: 15px;
    }
</style>
<style>
    .bg-light {
        background-color: #f1f3f6 !important;
        cursor: not-allowed;
    }
</style>

<div class="card shadow mb-4">
    <div class="card-body">

        <form method="POST" action="{{ route('user.besoinbudgetaires.update', $besoinbudgetaire->id) }}">
            @csrf
            @method('PUT')


             <div class="card shadow-sm mb-4 border-0">
                <div class="card-body d-flex justify-content-between align-items-center flex-wrap">

                    <!-- TITRE -->
                    <div class="text-center flex-grow-1">
                        <h4 class="fw-bold text-uppercase mb-1" style="letter-spacing:1px;">
                            MODIFICATION DU BUDGET BUDGÉTAIRE
                        </h4>

                        <small class="text-muted">
                            ANADER – Système intégré de gestion budgétaire
                        </small>
                    </div>

                    <!-- BOUTON -->
                    <div>
                        <a href="{{ route('user.besoinbudgetaires.index') }}" class="btn btn-secondary shadow-sm px-3">
                            <i class="fas fa-arrow-left mr-1"></i>
                            Retour
                        </a>
                    </div>

                </div>
            </div>




            <div class="collapse show" id="collapseBesoin">
                <div class="card shadow mb-4">
                    <div class="card-body">

                @php
                    $anneeEnCours = $besoinbudgetaire->exercice;
                @endphp

                <div class="form-wizard">

                    <!-- ETAPE 1 -->
                    <div class="step active" id="step1">
                        <div class="step-content">

                            <!-- ================= EXERCICE ================= -->
                            <div class="text-center mb-3">

                                <label class="text-muted small mb-1 d-block">
                                    Exercice
                                </label>

                                <div class="bg-primary text-white rounded-pill px-5 py-3 d-inline-flex align-items-center shadow-sm"
                                    style="font-size: 1.1rem; min-width: 180px; justify-content: center;">

                                    <i class="fas fa-edit mr-2"></i>
                                    <strong>{{ $anneeEnCours }}</strong>
                                </div>

                                <input type="hidden" name="exercice" value="{{ $anneeEnCours }}">
                            </div>

                            <!-- ================= TITRE ================= -->
                            <h5 class="text-warning mb-3 text-center">
                                Modification des informations budgétaires
                            </h5>

                            <!-- Direction / Centre / Entité -->
                            <div class="row mt-3">

                                <div class="col-md-4">
                                    <label>Direction</label>
                                    <input type="text" class="form-control bg-light mb-1"
                                        value="{{ $besoinbudgetaire->direction->code ?? '' }} - {{ $besoinbudgetaire->direction->libelle ?? '' }}"
                                        readonly>

                                    <input type="hidden" name="direction_id"
                                        value="{{ $besoinbudgetaire->direction_id }}">
                                </div>

                                <div class="col-md-4">
                                    <label>Centre de responsabilité</label>
                                    <input type="text" class="form-control bg-light mb-1"
                                        value="{{ $besoinbudgetaire->centrerespo->code ?? '' }} - {{ $besoinbudgetaire->centrerespo->libelle_long ?? '' }}"
                                        readonly>

                                    <input type="hidden" name="centrerespo_id"
                                        value="{{ $besoinbudgetaire->centrerespo_id }}">
                                </div>

                                <div class="col-md-4">
                                    <label>Entité</label>
                                    <input type="text" class="form-control bg-light"
                                        value="{{ $besoinbudgetaire->entite->libelle ?? '' }}"
                                        readonly>

                                    <input type="hidden" name="entite_id"
                                        value="{{ $besoinbudgetaire->entite_id }}">
                                </div>

                            </div>

                            <!-- Type contrat -->
                            <div class="row mt-3">

                                <div class="col-md-3" id="blocContrat">
                                    <label>Type de contrat</label>
                                    <select name="type_contrat" id="typeContrat" class="form-control" required>
                                        <option value="">-- Choisir --</option>

                                        <option value="permanent" {{ $besoinbudgetaire->type_contrat == 'permanent' ? 'selected' : '' }}>
                                            Permanent
                                        </option>

                                        <option value="accessoire" {{ $besoinbudgetaire->type_contrat == 'accessoire' ? 'selected' : '' }}>
                                            Accessoire
                                        </option>

                                        <option value="signe" {{ $besoinbudgetaire->type_contrat == 'signe' ? 'selected' : '' }}>
                                            Signé
                                        </option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label>Contrat</label>
                                    <select name="contrat_id" id="contratSelect" class="form-control">
                                        <option value="">-- Sélectionner --</option>
                                        @foreach($contrats as $contrat)
                                            <option value="{{ $contrat->id }}"
                                                {{ $besoinbudgetaire->contrat_id == $contrat->id ? 'selected' : '' }}>
                                                {{ $contrat->code }} - {{ $contrat->libelle }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Nom contrat -->
                            <div class="col-md-3" id="blocNomContrat">
                                <label>Nom contrat (saisie)</label>
                               <input type="text"
                                    id="inputNomContrat"
                                    name="nom_budget"
                                    class="form-control"
                                    value="{{ $besoinbudgetaire->nom_budget }}">
                            </div>

                            <!-- Immatriculation -->
                            <div class="col-md-3 d-none" id="blocImmatriculation">
                                <label>Immatriculation</label>

                               <input type="text"
                                id="immatriculationVisible"
                                class="form-control"
                                value="{{ $besoinbudgetaire->immatriculation }}">
                                {{-- placeholder="Ex: CN/001/2026/DG"> --}}
                            

                                {{-- <small class="text-muted d-block mt-1">
                                    • CN/001/2026/DG (Contrat National)
                                </small> --}}

                                <input type="hidden" name="immatriculation" id="immatriculationHidden">
                            </div>

                               

                            </div>

                            <!-- CODE BUDGET -->
                            <div class="row mt-3">

                                <div class="col-md-6">
                                    <label>Code budget</label>
                                    <input type="text" id="codeBudget"
                                        class="form-control bg-light"
                                        value="{{ $besoinbudgetaire->code_budget }}" readonly>

                                    <input type="hidden" name="code_budget"
                                        id="codeBudgetHidden"
                                        value="{{ $besoinbudgetaire->code_budget }}">
                                </div>

                                <div class="col-md-6">
                                    <label>Nom budget</label>
                                    <input type="text" id="nomBudget"
                                        class="form-control bg-light"
                                        value="{{ $besoinbudgetaire->nom_budget }}" readonly>

                                    <input type="hidden" name="nom_budget"
                                        id="nomBudgetHidden"
                                        value="{{ $besoinbudgetaire->nom_budget }}">
                                </div>

                            </div>

                            <!-- Responsable -->
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <label>Responsable</label>
                                    <input type="text" name="responsable"
                                           class="form-control"
                                           value="{{ $besoinbudgetaire->responsable }}">
                                </div>
                            </div>

                            <!-- Objet -->
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <label>Objet du contrat</label>
                                    <textarea name="objet"
                                              rows="3"
                                              class="form-control"
                                              required>{{ $besoinbudgetaire->objet }}</textarea>
                                </div>
                            </div>

                        </div>
                              
                        

                        <div class="step-footer text-end">
                            <button type="button" class="btn btn-primary next">
                                Suivant
                            </button>
                        </div>
                    </div>
                <!-- ================== STEP 2 : Budget Ressources ================== -->
                <div class="step" id="step2">
                    <h5 class="text-success mb-3">Budget Ressources</h5>

                   <div id="budgetContainer">
                        @if($besoinbudgetaire->budgetressources->count() > 0)

    @foreach($besoinbudgetaire->budgetressources as $i => $r)
        <div class="budget-line border p-2 mb-3">

            <div class="row mb-2">
                <div class="col-md-4">
                    <label>Libellé</label>
                    <input type="text"
                           name="ressources[{{ $i }}][libelle]"
                           class="form-control input-natureresource"
                           value="{{ $r->libelle }}">
                </div>

                <div class="col-md-4">
                    <label>Montant Total</label>
                    <input type="number"
                           name="ressources[{{ $i }}][montant_total]"
                           class="form-control"
                           value="{{ $r->montant_total }}">
                </div>

                <div class="col-md-4">
                    <label>Montant Inscrit</label>
                    <input type="number"
                           name="ressources[{{ $i }}][montant_inscrit]"
                           class="form-control"
                           value="{{ $r->montant_inscrit }}">
                </div>
            </div>

            <div class="row mb-2">
                @foreach(['janvier','fevrier','mars','avril','mai','juin'] as $m)
                    <div class="col">
                        <label>{{ ucfirst($m) }}</label>
                        <input type="number"
                               name="ressources[{{ $i }}][{{ $m }}]"
                               class="form-control"
                               value="{{ $r->$m ?? 0 }}">
                    </div>
                @endforeach
            </div>

            <div class="row mb-2">
                @foreach(['juillet','aout','septembre','octobre','novembre','decembre'] as $m)
                    <div class="col">
                        <label>{{ ucfirst($m) }}</label>
                        <input type="number"
                               name="ressources[{{ $i }}][{{ $m }}]"
                               class="form-control"
                               value="{{ $r->$m ?? 0 }}">
                    </div>
                @endforeach
            </div>

        </div>
    @endforeach

@else
    {{-- ligne vide --}}
@endif
                        
                    </div>

                    <button type="button" class="btn btn-outline-success btn-sm mb-3" id="addRessource">
                        <i class="fas fa-plus"></i> Ajouter Budget Ressources
                    </button>

                    <div class="step-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary prev">Précédent</button>
                        <button type="button" class="btn btn-primary next">Suivant</button>
                    </div>
                </div>

                <!-- ================== STEP 3 : Budget Emplois ================== -->

                @php
                $isDirectionCentrale =
                    optional($responsable->entite)->libelle === 'DIRECTION CENTRALE';
                @endphp
                <div class="step" id="step3">
                    <h5 class="text-warning mb-3">Budget Emplois</h5>

                    <div id="blocBudgetEmplois">
                        @foreach($besoinbudgetaire->budgetdepenses->groupBy('activite')->values() as $blocIndex => $depenses)
                        @php
                            $firstDepense = $depenses->first();
                        @endphp
                       <div class="card mb-4 p-3 bloc-emploi" data-index="{{ $blocIndex }}">
                            <!-- En-tête bloc -->
                            <div class="d-flex justify-content-between mb-2">
                                <h6 class="text-danger">Bloc Budget Emplois</h6>
                                <button type="button" class="btn btn-danger btn-sm remove-bloc">Supprimer</button>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <label>Direction d'exécution</label>

                                    @if($isDirectionCentrale)

                                        <select name="emplois[{{ $blocIndex }}][direction_id]"
                                            class="form-control direction-execution"
                                            data-selected="{{ $firstDepense->direction_id }}">

                                            <option value="">-- Sélectionner une direction --</option>

                                            @foreach($directions as $direction)
                                                <option value="{{ $direction->id }}"
                                                    {{ $firstDepense->direction_id == $direction->id ? 'selected' : '' }}>
                                                    {{ $direction->code }} - {{ $direction->libelle }}
                                                </option>
                                            @endforeach
                                        
                                        </select>

                                    @else

                                        <input type="text"
                                            class="form-control bg-light mb-1"
                                            value="{{ $responsable->direction->code }} - {{ $responsable->direction->libelle }}"
                                            readonly>

                                        <input type="hidden"
                                            name="emplois[{{ $blocIndex }}][direction_id]"
                                            value="{{ $responsable->direction_id }}">

                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <label>Centre de responsabilité d'exécution</label>

                                    @if($isDirectionCentrale)

                                        <select name="emplois[{{ $blocIndex }}][centrerespo_id]"
                                                class="form-control centre-execution"   
                                                data-selected="{{ $firstDepense->centrerespo_id }}">

                                            <option value="">-- Sélectionner un centre --</option>

                                            @foreach($centrerespos as $centre)
                                                <option value="{{ $centre->id }}"
                                                        data-direction="{{ $centre->direction_id }}"
                                                        {{ $firstDepense->centrerespo_id == $centre->id ? 'selected' : '' }}>
                                                    {{ $centre->code }} - {{ $centre->libelle_long }}
                                                </option>
                                            @endforeach

                                        </select>

                                    @else

                                        <input type="text"
                                            class="form-control bg-light mb-1"
                                            value="{{ optional($responsable->centrerespo)->code }} - {{ optional($responsable->centrerespo)->libelle_long }}"
                                            readonly>

                                        <input type="hidden"
                                            name="emplois[{{ $blocIndex }}][centrerespo_id]"
                                            value="{{ $responsable->centrerespo_id }}">

                                    @endif
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <label>Activité</label>
                                    <input type="text" name="emplois[{{ $blocIndex }}][activite]" class="form-control" value="{{ $firstDepense->activite }}">
                                </div>

                                <div class="col-md-6">
                                    <label>Domaine activité</label>
                                    <select name="emplois[{{ $blocIndex }}][domaineact_id]" class="form-control">
                                        <option value="">-- Sélectionner --</option>
                                        @foreach($domaineacts as $domaineact)
                                            <option value="{{ $domaineact->id }}" @if($firstDepense->domaineact_id == $domaineact->id) selected @endif>
                                                {{ $domaineact->code }} - {{ $domaineact->libelle }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <label>Axe PSD</label>
                                    <select name="emplois[{{ $blocIndex }}][axe_id]" class="form-control">
                                        <option value="">-- Sélectionner --</option>
                                        @foreach($axes as $axe)
                                            <option value="{{ $axe->id }}" @if($firstDepense->axe_id == $axe->id) selected @endif>
                                                {{ $axe->code }} - {{ $axe->libelle }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                                <div class="col-md-12">

                                    <label>Domaine PSD</label>
                                    <select name="emplois[{{ $blocIndex }}][domainepsd_id]" class="form-control">
                                        <option value="">-- Sélectionner --</option>
                                        @foreach($domainepsds as $domainepsd)
                                            <option value="{{ $domainepsd->id }}" @if($firstDepense->domainepsd_id == $domainepsd->id) selected @endif>
                                                {{ $domainepsd->code }} - {{ $domainepsd->libelle }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                                <div class="col-md-12">

                                    <label>Programme PSD</label>
                                    <select name="emplois[{{ $blocIndex }}][programme_id]" class="form-control">
                                        <option value="">-- Sélectionner --</option>
                                        @foreach($programmes as $programme)
                                            <option value="{{ $programme->id }}" @if($firstDepense->programme_id == $programme->id) selected @endif>
                                                {{ $programme->code }} - {{ $programme->libelle }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <hr>

                            <div class="table-responsive">
                                <table class="table table-bordered table-sm table-depenses">
                                    <thead>
                                        <tr>
                                            <th>Nature</th><th>Nbre</th><th>Quantité</th><th>C.U</th><th>Montant</th>
                                            @php $mois = ['janvier','fevrier','mars','avril','mai','juin','juillet','aout','septembre','octobre','novembre','decembre']; @endphp
                                            @foreach($mois as $m)<th>{{ ucfirst($m) }}</th>@endforeach
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                   <tbody class="depense-body">
                                        @foreach($depenses as $ligneIndex => $d)
                                        <tr>
                                            <td>
                                                <input type="text"
                                                    name="emplois[{{ $blocIndex }}][depenses][{{ $ligneIndex }}][nature]"
                                                    class="form-control input-nature"
                                                    value="{{ $d->nature }}">
                                            </td>

                                            <td>
                                                <input type="number"
                                                    step="0.01"
                                                    name="emplois[{{ $blocIndex }}][depenses][{{ $ligneIndex }}][nbre]"
                                                    class="form-control input-small"
                                                    value="{{ $d->nbre }}">
                                            </td>

                                            <td>
                                                <input type="number"
                                                    step="0.01"
                                                    name="emplois[{{ $blocIndex }}][depenses][{{ $ligneIndex }}][qte]"
                                                    class="form-control input-small"
                                                    value="{{ $d->qte }}">
                                            </td>

                                            <td>
                                                <input type="number"
                                                    step="0.01"
                                                    name="emplois[{{ $blocIndex }}][depenses][{{ $ligneIndex }}][c_u]"
                                                    class="form-control"
                                                    value="{{ $d->c_u }}">
                                            </td>

                                            <td>
                                                <input type="number"
                                                    step="0.01"
                                                    name="emplois[{{ $blocIndex }}][depenses][{{ $ligneIndex }}][montant]"
                                                    class="form-control"
                                                    value="{{ $d->montant }}">
                                            </td>

                                            @foreach($mois as $m)
                                            <td>
                                                <input type="number"
                                                    step="0.01"
                                                    class="form-control mois"
                                                    name="emplois[{{ $blocIndex }}][depenses][{{ $ligneIndex }}][{{ $m }}]"
                                                    value="{{ $d->$m ?? 0 }}">
                                            </td>
                                            @endforeach

                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm remove-row">
                                                    X
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="mt-2">
                                <button type="button" class="btn btn-outline-danger btn-sm add-ligne-depense">
                                    <i class="fas fa-plus"></i> Ajouter une nature de dépense
                                </button>
                            </div>

                        </div>
                        @endforeach
                    </div>

                    <button type="button" class="btn btn-outline-warning btn-sm mb-4" id="addBlocEmploi">
                        <i class="fas fa-plus"></i> Ajouter une activité Budget emploi
                    </button>

                    <div class="step-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary prev">Précédent</button>
                        <div>
                            <button type="submit" name="action" value="brouillon" class="btn btn-primary">Enregistrer brouillon</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function(){

    document.querySelectorAll(
        'input[name$="[direction_id]"], select[name$="[direction_id]"]'
    ).forEach(el => {
        el.dispatchEvent(new Event('change', { bubbles: true }));
    });

});
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {

        // =========================
        // INIT INDEX (IMPORTANT EN EDIT)
        // =========================
        let indexR = document.querySelectorAll('.budget-line').length;
        let indexBloc = document.querySelectorAll('.bloc-emploi').length;

        // =========================
        // AJOUT BUDGET RESSOURCE
        // =========================
        document.getElementById('addRessource').addEventListener('click', function () {
            let bloc = `
            <div class="budget-line border p-2 mb-3">

                <div class="row mb-2">
                    <div class="col-md-4">
                        <label>Libellé</label>
                        <input type="text" name="ressources[${indexR}][libelle]" class="form-control input-natureresource">
                    </div>

                    <div class="col-md-4">
                        <label>Montant Total</label>
                        <input type="number" name="ressources[${indexR}][montant_total]" class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label>Montant Inscrit</label>
                        <input type="number" name="ressources[${indexR}][montant_inscrit]" class="form-control">
                    </div>
                </div>

                ${generateMoisInputsR(`ressources[${indexR}]`)}

                <button type="button" class="btn btn-danger btn-sm remove-line mt-2">Supprimer</button>
            </div>
            `;

            document.getElementById('budgetContainer').insertAdjacentHTML('beforeend', bloc);

            indexR++;
        });

        // =========================
        // SUPPRESSION RESSOURCE
        // =========================
        document.addEventListener('click', function (e) {

            if (e.target.classList.contains('remove-line')) {

                let lignes = document.querySelectorAll('.budget-line');

                if (lignes.length <= 1) {
                    alert("Au moins une ressource obligatoire");
                    return;
                }

                if (confirm("Supprimer cette ligne ?")) {
                    e.target.closest('.budget-line').remove();
                }
            }
        });

        // =========================
    // MOIS INPUTS
    // =========================
    function moisInputs(prefix) {
        const mois = ['janvier','fevrier','mars','avril','mai','juin','juillet','aout','septembre','octobre','novembre','decembre'];

        return mois.map(m => `
            <td>
                <input type="number" class="form-control mois" name="${prefix}[${m}]" value="0">
            </td>
        `).join('');
    }

    // =========================
    // AJOUT BLOC EMPLOI
    // =========================
    document.getElementById('addBlocEmploi').addEventListener('click', function(){

        let bloc = `
        <div class="card mb-4 p-3 bloc-emploi" data-index="${indexBloc}">

            <div class="d-flex justify-content-between mb-2">
                <h6 class="text-danger">Bloc Budget Emplois</h6>
                <button type="button" class="btn btn-danger btn-sm remove-bloc">Supprimer</button>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label>Direction d'exécution</label>

                    <input type="text" class="form-control bg-light mb-1"
                        value="{{ $responsable->direction->code }} - {{ $responsable->direction->libelle }}"
                        readonly>

                    <input type="hidden" name="emplois[${indexBloc}][direction_id]" value="{{ $responsable->direction_id }}">
                </div>

                <div class="col-md-6">
                    <label>Centre de responsabilité</label>
                    <select name="emplois[${indexBloc}][centrerespo_id]" class="form-control">
                        <option value="">-- Sélectionner --</option>
                    </select>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <label>Activité</label>
                    <input type="text" name="emplois[${indexBloc}][activite]" class="form-control">
                </div>

                <div class="col-md-6">
                    <label>Domaine activité</label>
                    <select name="emplois[${indexBloc}][domaineact_id]" class="form-control">
                        <option value="">--Sélectionner--</option>
                        @foreach($domaineacts as $domaineact)
                        <option value="{{ $domaineact->id }}">{{ $domaineact->code }} - {{ $domaineact->libelle }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <label>Axe PSD</label>
                    <select name="emplois[${indexBloc}][axe_id]" class="form-control">
                        <option value="">--Sélectionner--</option>
                        @foreach($axes as $axe)
                        <option value="{{ $axe->id }}">{{ $axe->code }} - {{ $axe->libelle }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-12 mt-2">
                    <label>Domaine PSD</label>
                    <select name="emplois[${indexBloc}][domainepsd_id]" class="form-control">
                        <option value="">--Sélectionner--</option>
                        @foreach($domainepsds as $domainepsd)
                        <option value="{{ $domainepsd->id }}">{{ $domainepsd->code }} - {{ $domainepsd->libelle }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-12 mt-2">
                    <label>Programme PSD</label>
                    <select name="emplois[${indexBloc}][programme_id]" class="form-control">
                        <option value="">--Sélectionner--</option>
                        @foreach($programmes as $programme)
                        <option value="{{ $programme->id }}">{{ $programme->code }} - {{ $programme->libelle }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <hr>

            <div class="table-responsive">
                <table class="table table-bordered table-sm table-depenses">
                    <thead>
                        <tr>
                            <th>Nature</th><th>Nbre</th><th>Quantité</th><th>C.U</th><th>Montant</th>
                            <th>Janvier</th><th>Février</th><th>Mars</th><th>Avril</th><th>Mai</th><th>Juin</th>
                            <th>Juillet</th><th>Août</th><th>Septembre</th><th>Octobre</th><th>Novembre</th><th>Décembre</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody class="depense-body"></tbody>
                </table>
            </div>

           <div class="mt-2">
                <button type="button" class="btn btn-outline-danger btn-sm add-ligne-depense">
                    <i class="fas fa-plus"></i> Ajouter une nature de dépense
                </button>
            </div>

        </div>
        `;

        document.getElementById("blocBudgetEmplois").insertAdjacentHTML("beforeend", bloc);

            let newBloc = document.querySelectorAll(".bloc-emploi");
            let lastBloc = newBloc[newBloc.length - 1];

            let directionInput = lastBloc.querySelector('input[name*="[direction_id]"]');

            if(directionInput){
                directionInput.dispatchEvent(new Event('change', { bubbles: true }));
            }

        indexBloc++;
    });

    // =========================
// AJOUT LIGNE DEPENSE (FIX EDIT)
// =========================
document.addEventListener("click", function(e){

    if(e.target.classList.contains("add-ligne-depense")){

        let bloc = e.target.closest(".bloc-emploi");
        let tbody = bloc.querySelector(".depense-body");

        let blocIndex = bloc.dataset.index;
        let ligneIndex = tbody.querySelectorAll("tr").length;

        let row = `
        <tr>
            <td>
                <input type="text"
                       name="emplois[${blocIndex}][depenses][${ligneIndex}][nature]"
                       class="form-control input-nature">
            </td>

           <td>
    <input type="number"
        step="any"
        name="emplois[${blocIndex}][depenses][${ligneIndex}][nbre]"
        class="form-control input-small">
</td>

<td>
    <input type="number"
        step="any"
        name="emplois[${blocIndex}][depenses][${ligneIndex}][qte]"
        class="form-control input-small">
</td>

<td>
    <input type="number"
        step="any"
        name="emplois[${blocIndex}][depenses][${ligneIndex}][c_u]"
        class="form-control">
</td>

<td>
    <input type="number"
        step="any"
        name="emplois[${blocIndex}][depenses][${ligneIndex}][montant]"
        class="form-control">
</td>

            ${generateMoisInputs(`emplois[${blocIndex}][depenses][${ligneIndex}]`)}

            <td>
                <button type="button"
                        class="btn btn-danger btn-sm remove-row">
                    X
                </button>
            </td>
        </tr>
        `;

        tbody.insertAdjacentHTML("beforeend", row);
    }
});
    // =========================
    // SUPPRESSION LIGNE
    // =========================
    document.addEventListener("click", function(e){
        if(e.target.classList.contains("remove-row")){
            e.target.closest("tr").remove();
        }
    });

    // =========================
    // SUPPRESSION BLOC
    // =========================
    document.addEventListener("click", function(e){

        if(e.target.classList.contains("remove-bloc")){

            let blocs = document.querySelectorAll(".bloc-emploi");

            if(blocs.length <= 1){
                alert("Au moins un bloc obligatoire");
                return;
            }

            if(confirm("Supprimer ce bloc ?")){
                e.target.closest(".bloc-emploi").remove();
            }
        }
    });

    // =========================
    // SELECT DYNAMIQUE
    // =========================
    const centresResponsabilite = @json($centrerespos);
    const domainesPSD = @json($domainepsds);
    const programmesPSD = @json($programmes);

    document.getElementById('blocBudgetEmplois').addEventListener('change', function(e){

        const target = e.target;
        const bloc = target.closest('.bloc-emploi');

        // centre
      if(target.matches('select[name*="[direction_id]"]')){
            const centreSelect = bloc.querySelector('select[name$="[centrerespo_id]"]');
            centreSelect.innerHTML = `<option value="">-- Sélectionner --</option>`;

            centresResponsabilite
                .filter(c => c.direction_id == target.value)
                .forEach(c => {
                    centreSelect.innerHTML += `<option value="${c.id}">${c.code} - ${c.libelle_long}</option>`;
                });
        }

        // domaine
        if(target.name.includes('[axe_id]')){
            const domaineSelect = bloc.querySelector('select[name$="[domainepsd_id]"]');
            const programmeSelect = bloc.querySelector('select[name$="[programme_id]"]');

            domaineSelect.innerHTML = `<option value="">-- Sélectionner --</option>`;

            domainesPSD
                .filter(d => d.axe_id == target.value)
                .forEach(d => {
                    domaineSelect.innerHTML += `<option value="${d.id}">${d.code} - ${d.libelle}</option>`;
                });

            programmeSelect.innerHTML = `<option value="">-- Sélectionner --</option>`;
        }

        // programme
        if(target.name.includes('[domainepsd_id]')){
            const programmeSelect = bloc.querySelector('select[name$="[programme_id]"]');

            programmeSelect.innerHTML = `<option value="">-- Sélectionner --</option>`;

            programmesPSD
                .filter(p => p.domainepsd_id == target.value)
                .forEach(p => {
                    programmeSelect.innerHTML += `<option value="${p.id}">${p.code} - ${p.libelle}</option>`;
                });
        }

    });


        // =========================
        // HELPERS
        // =========================
        function generateMoisHeader(){
            return `
            <th>Jan</th><th>Fév</th><th>Mar</th><th>Avr</th>
            <th>Mai</th><th>Juin</th><th>Juil</th><th>Août</th>
            <th>Sep</th><th>Oct</th><th>Nov</th><th>Déc</th>
            `;
        }

        function generateMoisInputs(prefix){

            const mois = [
                'janvier','fevrier','mars','avril','mai','juin',
                'juillet','aout','septembre','octobre','novembre','decembre'
            ];

            return mois.map(m => `
                <td>
                    <input type="number"
                        step="0.01"
                        name="${prefix}[${m}]"
                        class="form-control mois"
                        value="0">
                </td>
            `).join('');
        }

        function generateMoisInputsR(prefix){

            const mois1 = ['janvier','fevrier','mars','avril','mai','juin'];
            const mois2 = ['juillet','aout','septembre','octobre','novembre','decembre'];

            let row1 = mois1.map(m => `
                <div class="col">
                    <label>${m.charAt(0).toUpperCase() + m.slice(1)}</label>
                    <input type="number"
                    step="0.01"
                    name="${prefix}[${m}]"
                    class="form-control"
                    value="0">
                </div>
            `).join('');

            let row2 = mois2.map(m => `
                <div class="col">
                    <label>${m.charAt(0).toUpperCase() + m.slice(1)}</label>
                    <input type="number"
                           step="0.01"
                           name="${prefix}[${m}]"
                           class="form-control"
                           value="0">
                </div>
            `).join('');

            return `
                <div class="row mb-2">${row1}</div>
                <div class="row mb-2">${row2}</div>
            `;
        }


        // =========================
        // INIT LOGIQUE EDIT (BLOCS EXISTANTS)
        // =========================
        document.querySelectorAll('#blocBudgetEmplois .bloc-emploi').forEach(function(bloc){

            const directionSelect = bloc.querySelector('select[name$="[direction_id]"]');
            const centreSelect = bloc.querySelector('select[name$="[centrerespo_id]"]');

            if(directionSelect && centreSelect){

                centreSelect.innerHTML = `<option value="">-- Sélectionner --</option>`;

                centresResponsabilite
                    .filter(c => c.direction_id == directionSelect.value)
                    .forEach(c => {
                        centreSelect.innerHTML += `
                            <option value="${c.id}">
                                ${c.code} - ${c.libelle_long}
                            </option>
                        `;
                    });

                // valeur enregistrée
                let selectedValue = centreSelect.dataset.selected;

                if(selectedValue){
                    centreSelect.value = selectedValue;
                }
            }
        });
    });
</script>

<script>
    let currentStep = 1;
    const totalSteps = 3;

    // ================= VALIDATION RESSOURCES =================
    function validateRessources() {

        let erreur = false;

        document.querySelectorAll(".budget-line").forEach(function(row){

            let montantTotal = parseFloat(row.querySelector("input[name*='montant_inscrit']").value) || 0;

            let mois = row.querySelectorAll(
                "input[name*='janvier'],input[name*='fevrier'],input[name*='mars'],input[name*='avril'],input[name*='mai'],input[name*='juin'],input[name*='juillet'],input[name*='aout'],input[name*='septembre'],input[name*='octobre'],input[name*='novembre'],input[name*='decembre']"
            );

            let somme = 0;

            mois.forEach(function(m){
                somme += parseFloat(m.value) || 0;
            });

            if(montantTotal !== somme){
                erreur = true;
            }
        });

        return erreur;
    }

    // ================= STEP NAVIGATION =================
   function showStep(newStep) {

    let type = document.getElementById('typeContrat').value;

    // =========================
    // CORRECTION AVANT ANIMATION
    // =========================
    if(type === 'permanent'){

        // Aller
        if(currentStep === 1 && newStep === 2){
            newStep = 3;
        }

        // Retour
        if(currentStep === 3 && newStep === 2){
            newStep = 1;
        }
    }

    if (newStep < 1 || newStep > totalSteps) return;

    let current = document.getElementById('step' + currentStep);
    let next = document.getElementById('step' + newStep);

    if (!current || !next) return;

    // =========================
    // ANIMATION
    // =========================
    if (newStep > currentStep) {
        current.classList.add('exit-left');
    } else {
        current.classList.add('exit-right');
    }

    next.style.display = 'block';

    setTimeout(() => {
        current.classList.remove('active', 'exit-left', 'exit-right');
        current.style.display = 'none';

        next.classList.add('active');
    }, 200);

    currentStep = newStep;
}
    // ================= NEXT BUTTON =================
    document.querySelectorAll('.next').forEach(btn => {
        btn.addEventListener('click', (e) => {

            // 🔥 BLOQUAGE STEP 2 → STEP 3
            let type = document.getElementById('typeContrat').value;

            if(currentStep === 2 && type !== 'permanent'){

                let erreurRessource = validateRessources();

                if(erreurRessource){
                    e.preventDefault();
                    alert("Erreur : Le Montant Inscrit doit être égal à la somme des mois (Janvier - Décembre)");
                    return false;
                }
            }

            showStep(currentStep + 1);
        });
    });

    // ================= PREV BUTTON =================
    document.querySelectorAll('.prev').forEach(btn => {
        btn.addEventListener('click', () => {
            showStep(currentStep - 1);
        });
    });

    // ================= INIT =================
    window.addEventListener('load', () => {

        document.querySelectorAll('.step').forEach(step => {
            step.style.display = 'none';
        });

        let first = document.getElementById('step1');
        first.style.display = 'block';
        first.classList.add('active');
    });
</script>

<script>   
   // ================= CALCUL AUTOMATIQUE MONTANT BUDGET EMPLOIS =================

    document.addEventListener("input", function(e){

    if(
        e.target.name.includes('[nbre]') ||
        e.target.name.includes('[qte]') ||
        e.target.name.includes('[c_u]')
    ){

        let row = e.target.closest("tr");

        let nbre = parseFloat(row.querySelector("input[name*='[nbre]']").value) || 0;
        let qte = parseFloat(row.querySelector("input[name*='[qte]']").value) || 0;
        let cu = parseFloat(row.querySelector("input[name*='[c_u]']").value) || 0;

        let montant = nbre * qte * cu;

        row.querySelector("input[name*='[montant]']").value =
            montant.toFixed(2);
    }
});

    // ================= VALIDATION AVANT SOUMISSION =================

    document.querySelector("form").addEventListener("submit", function(e){

        let erreur = false;
        let erreurRessource = false;
        let erreurDepense = false;

        // ===== VERIFICATION BUDGET RESSOURCES =====

        document.querySelectorAll(".budget-line").forEach(function(row){

            let montantTotal = parseFloat(row.querySelector("input[name*='montant_inscrit']").value) || 0;

            let mois = row.querySelectorAll(    
                "input[name*='janvier'],input[name*='fevrier'],input[name*='mars'],input[name*='avril'],input[name*='mai'],input[name*='juin'],input[name*='juillet'],input[name*='aout'],input[name*='septembre'],input[name*='octobre'],input[name*='novembre'],input[name*='decembre']"
            );

            let somme = 0;

            mois.forEach(function(m){
                somme += parseFloat(m.value) || 0;
            });

            if(montantTotal !== somme){
                erreur = true;
                erreurRessource = true;
            }

        });


        // ===== VERIFICATION BUDGET EMPLOIS =====

        document.querySelectorAll(".table-depenses tbody tr").forEach(function(row){

            let montant = parseFloat(row.querySelector("input[name*='[montant]']").value) || 0;

            let mois = row.querySelectorAll(
                "input[name*='janvier'],input[name*='fevrier'],input[name*='mars'],input[name*='avril'],input[name*='mai'],input[name*='juin'],input[name*='juillet'],input[name*='aout'],input[name*='septembre'],input[name*='octobre'],input[name*='novembre'],input[name*='decembre']"
            );

            let somme = 0;

            mois.forEach(function(m){
                somme += parseFloat(m.value) || 0;
            });

            if(Math.abs(montant - somme) > 0.01){
                erreur = true;
                erreurDepense = true;
            }
                

        });


        if(erreur){

            e.preventDefault();

            let message = "Erreur :\n\n";

            if(erreurRessource){
                message += "• Budget Ressources : Le Montant Inscrit doit être égal à la somme Janvier - Décembre\n";
            }

            if(erreurDepense){
                message += "• Budget Emplois : Le Montant doit être égal à la somme Janvier - Décembre\n";
            }

            alert(message);

            return false;

        }

    });
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    // ================= ELEMENTS =================
    const typeContrat = document.getElementById("typeContrat");
    const contratSelect = document.getElementById("contratSelect");

    const blocContrat = contratSelect?.closest(".col-md-3");
    const blocNomContrat = document.getElementById("blocNomContrat");
    const blocImmat = document.getElementById("immatriculationVisible")?.closest(".col-md-3");

    const inputNomContrat = document.getElementById("inputNomContrat"); // nom_budget
    const immatVisible = document.getElementById("immatriculationVisible");
    const immatHidden = document.getElementById("immatriculationHidden");

    const codeBudget = document.getElementById("codeBudget");
    const nomBudget = document.getElementById("nomBudget");

    const codeHidden = document.getElementById("codeBudgetHidden");
    const nomHidden = document.getElementById("nomBudgetHidden");

    const exercice = document.querySelector("input[name='exercice']")?.value || "";
     const entite = "{{ strtoupper(optional($responsable->entite)->libelle) }}";

    let seqAcc = {{ $nextSeqAcc ?? 1 }};

    // ================= RESET =================
    function resetUI() {
        blocContrat?.classList.add("d-none");
        blocNomContrat?.classList.add("d-none");
        blocImmat?.classList.add("d-none");

        immatVisible?.setAttribute("readonly", true);
    }

    // ================= TYPE CONTRAT =================
    function applyType() {

        resetUI();

        const type = typeContrat.value;

        if (type === "permanent") {
            blocContrat?.classList.remove("d-none");
        }

        if (type === "accessoire") {
            blocNomContrat?.classList.remove("d-none");
        }

        if (type === "signe") {
            blocNomContrat?.classList.remove("d-none");
            blocImmat?.classList.remove("d-none");

            immatVisible?.removeAttribute("readonly");
        }

        if (type === "accessoire" || type === "signe") {

    let container = document.getElementById("budgetContainer");

   if (container.querySelectorAll(".budget-line").length === 0
    && document.querySelectorAll('[name^="ressources"]').length === 0) {

    document.getElementById("addRessource").click();
}
}
    }

    // ================= PERMANENT =================
    contratSelect?.addEventListener("change", function () {

        if (typeContrat.value !== "permanent") return;

        let opt = this.options[this.selectedIndex];
        if (!opt?.value) return;

        let parts = opt.text.split(" - ");
        let code = parts[0] || "";
        let libelle = parts[1] || "";

        let cb = `${code}/${exercice}/${libelle}`;

        codeBudget.value = cb;
        nomBudget.value = libelle;

        codeHidden.value = cb;
        nomHidden.value = libelle;
    });

   // ================= ACCESSOIRE =================

// ✅ sauvegarde du code initial une seule fois
let codeAccessoireInitial =
    codeHidden.value || codeBudget.value || "";

inputNomContrat?.addEventListener("input", function () {

    if (typeContrat.value !== "accessoire") return;

    let nom = this.value?.trim();

    // =========================
// CHAMP VIDE
// =========================

if (!nom) {

    let seq;

    let match = codeAccessoireInitial.match(/^43-(\d{4})\//);

    if (match) {
        seq = match[1];
    } else {
        seq = String(seqAcc).padStart(4, "0");
    }

    // ✅ garder la base
    let baseCode = `43-${seq}/${exercice}/`;

    codeBudget.value = baseCode;
    nomBudget.value = "";

    codeHidden.value = baseCode;
    nomHidden.value = "";

    return;
}

    // =========================
    // RECUPERATION SEQUENCE
    // =========================

    let seq;

    // Exemple :
    // 43-0005/2026/CONSEILLERS

    let match = codeAccessoireInitial.match(/^43-(\d{4})\//);

    if (match) {

        // ✅ mode modification
        seq = match[1];

    } else {

        // ✅ mode création
        seq = String(seqAcc).padStart(4, "0");
    }

    // =========================
    // GENERATION
    // =========================

    let cb = `43-${seq}/${exercice}/${nom}`;

    codeBudget.value = cb;
    nomBudget.value = nom;

    codeHidden.value = cb;
    nomHidden.value = nom;
});

   // ================= SIGNÉ (CORRIGÉ ROBUSTE) =================

function getBase(prefix) {

    if (prefix === "CN") return "40";

    if (prefix === "CR") return "41";

    if (prefix === "CL") return "42";

    return null;
}


// ================= UPDATE SIGNÉ =================

function updateSigneLive() {

    // sécurité
    if (typeContrat.value !== "signe") return;

    let immat = immatVisible.value?.trim();

    let nom = inputNomContrat.value?.trim();

    // champs vides
    if (!immat || !nom) {

        codeBudget.value = "";
        nomBudget.value = "";

        codeHidden.value = "";
        nomHidden.value = "";

        immatHidden.value = "";

        return;
    }

    // découpage
    let parts = immat.split("/");

    // format invalide
    if (parts.length < 3) {

        codeBudget.value = "";
        nomBudget.value = "";

        codeHidden.value = "";
        nomHidden.value = "";

        immatHidden.value = "";

        return;
    }

    // récupération
    let prefix = (parts[0] || "").toUpperCase();

    let numero = parts[1] || "";

    let annee = parts[2] || "";

    // base
    let base = getBase(prefix);

    // ❌ si ce n'est pas CN / CR / CL
    if (!base) {

        codeBudget.value = "";
        nomBudget.value = "";

        codeHidden.value = "";
        nomHidden.value = "";

        immatHidden.value = "";

        console.warn("Préfixe invalide");

        return;
    }

    // format numéro
    numero = String(numero).padStart(4, "0");

    // génération code
    let code = `${base}-${numero}/${annee}/${nom}`;

    // affectation
    codeBudget.value = code;

    nomBudget.value = nom;

    codeHidden.value = code;

    nomHidden.value = nom;

    immatHidden.value = immat;
}


// ================= EVENTS =================

immatVisible?.addEventListener("input", updateSigneLive);

inputNomContrat?.addEventListener("input", updateSigneLive);

typeContrat?.addEventListener("change", applyType);


// ================= INIT =================

applyType();

if (typeContrat.value === "signe") {

    setTimeout(updateSigneLive, 100);

}

});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {

    // =========================
    // ELEMENTS
    // =========================

    const typeContrat = document.getElementById("typeContrat");

    const contratSelect = document.getElementById("contratSelect");

    const inputNomContrat = document.getElementById("inputNomContrat");

    const immatVisible = document.getElementById("immatriculationVisible");

    const immatHidden = document.getElementById("immatriculationHidden");

    const codeBudget = document.getElementById("codeBudget");

    const nomBudget = document.getElementById("nomBudget");

    const codeHidden = document.getElementById("codeBudgetHidden");

    const nomHidden = document.getElementById("nomBudgetHidden");

    const blocContrat = contratSelect?.closest(".col-md-3");

    const blocNomContrat = document.getElementById("blocNomContrat");

    const blocImmat = immatVisible?.closest(".col-md-3");

    const exercice =
        document.querySelector("input[name='exercice']")?.value || "";

    const entite =
        "{{ strtoupper(optional($responsable->entite)->libelle) }}";

    let seqAcc = {{ $nextSeqAcc ?? 1 }};

    // =========================
    // RESET
    // =========================

    function resetAll() {

        codeBudget.value = "";

        nomBudget.value = "";

        codeHidden.value = "";

        nomHidden.value = "";

        immatHidden.value = "";

        if (typeContrat.value !== "signe") {

            immatVisible.value = "";
        }
    }

    // =========================
    // UI TYPE
    // =========================

    function applyType() {

        blocContrat?.classList.add("d-none");

        blocNomContrat?.classList.add("d-none");

        blocImmat?.classList.add("d-none");

        if (typeContrat.value === "permanent") {

            blocContrat?.classList.remove("d-none");
        }

        if (typeContrat.value === "accessoire") {

            blocNomContrat?.classList.remove("d-none");
        }

        if (typeContrat.value === "signe") {

            blocNomContrat?.classList.remove("d-none");

            blocImmat?.classList.remove("d-none");

            immatVisible?.removeAttribute("readonly");

            immatVisible?.classList.remove("bg-light");
        }
    }

    // =========================
    // BASE PREFIX
    // =========================

    function getBase(prefix) {

        const bases = {

            CN: "40",

            CR: "41",

            CL: "42"
        };

        return bases[prefix] || null;
    }

    // =========================
    // VERIFICATION ENTITE
    // =========================

    function verifierEntite(prefix) {

        // ================= CL => ZONE =================

        if(prefix === 'CL') {

            if(!entite.includes('ZONE')) {

                alert("Le contrôle CL est réservé aux Zones");

                return false;
            }
        }

        // ================= CR => DIRECTION REGIONALE =================

        if(prefix === 'CR') {

            if(
                !entite.includes('DIRECTION REGIONALE') &&
                !entite.includes('DIRECTION RÉGIONALE')
            ) {

                alert("Le contrôle CR est réservé aux Directions Régionales");

                return false;
            }
        }

        // ================= CN => CF-PROG + DIRECTION CENTRALE =================

        if(prefix === 'CN') {

            if(
                entite !== 'CF-PROG' &&
                entite !== 'DIRECTION CENTRALE'
            ) {

                alert("Le contrôle CN est réservé au CF-PROG et à la Direction Centrale");

                return false;
            }
        }

        return true;
    }

    // =========================
    // GENERATION CODE
    // =========================

    function buildCode(prefix, numero, annee, nom) {

        let base = getBase(prefix);

        if (!base) return null;

        numero = String(parseInt(numero) || 0).padStart(4, '0');

        return `${base}-${numero}/${annee}/${nom}`;
    }

    // =========================
    // PERMANENT
    // =========================

    contratSelect?.addEventListener("change", function () {

        if (typeContrat.value !== "permanent") return;

        let option = this.options[this.selectedIndex];

        if (!option?.value) return;

        let parts = option.text.split(" - ");

        let code = parts[0] || "";

        let nom = parts[1] || "";

        let cb = `${code}/${exercice}/${nom}`;

        codeBudget.value = cb;

        nomBudget.value = nom;

        codeHidden.value = cb;

        nomHidden.value = nom;
    });

    // =========================
    // ACCESSOIRE
    // =========================

    inputNomContrat?.addEventListener("input", function () {

        if (typeContrat.value !== "accessoire") return;

        let nom = this.value?.trim();

        if (!nom) return;

        let seq = String(seqAcc).padStart(4, '0');

        let cb = `43-${seq}/${exercice}/${nom}`;

        codeBudget.value = cb;

        nomBudget.value = nom;

        codeHidden.value = cb;

        nomHidden.value = nom;
    });

    // =========================
    // SIGNÉ
    // =========================

    function updateSigneLive() {

        if (typeContrat.value !== "signe") return;

        let immat = immatVisible.value?.trim();

        let nom = inputNomContrat.value?.trim();

        // sécurité

        if (!immat || !nom) {

            codeBudget.value = "";

            nomBudget.value = "";

            codeHidden.value = "";

            nomHidden.value = "";

            immatHidden.value = "";

            return;
        }

        // exemple :
        // CR/007/2026/DRX

        let parts = immat.split("/");

        // format invalide

        if (parts.length < 4) {

            codeBudget.value = "";

            nomBudget.value = "";

            codeHidden.value = "";

            nomHidden.value = "";

            immatHidden.value = "";

            return;
        }

        let prefix = (parts[0] || "").toUpperCase();

        let numero = parts[1] || "";

        let annee = parts[2] || "";

        // validation prefix

        let base = getBase(prefix);

        if (!base) {

            console.warn("Préfixe invalide");

            return;
        }

        // validation entité

        if (!verifierEntite(prefix)) {

            resetAll();

            return;
        }

        // génération

        let code = buildCode(prefix, numero, annee, nom);

        // affectation

        codeBudget.value = code;

        nomBudget.value = nom;

        codeHidden.value = code;

        nomHidden.value = nom;

        immatHidden.value = immat;
    }

    // =========================
    // EVENTS
    // =========================

    typeContrat?.addEventListener("change", function () {

        applyType();

        resetAll();
    });

    immatVisible?.addEventListener("input", updateSigneLive);

    inputNomContrat?.addEventListener("input", updateSigneLive);

    // =========================
    // INIT
    // =========================

    applyType();

    // rejouer calcul existant

    if (typeContrat.value === "permanent") {

        contratSelect?.dispatchEvent(new Event("change"));
    }

    if (
    typeContrat.value === "accessoire" &&
    !codeHidden.value
) {
    inputNomContrat?.dispatchEvent(new Event("input"));
}

    if (typeContrat.value === "signe") {

        updateSigneLive();
    }

});
</script>

{{-- EMPECHER STEP 2 → STEP 3 SI TYPE ≠ PERMANENT --}}
<script>
    function toggleRessourceStep(){
    let type = document.getElementById('typeContrat').value;
    let step2 = document.getElementById('step2');

    if(type === 'permanent'){
        step2.style.display = 'none';
    }else{
        step2.style.display = 'block';
    }
}

document.getElementById('typeContrat').addEventListener('change', toggleRessourceStep);
window.addEventListener('load', toggleRessourceStep);
</script>

@endsection