@extends('layouts.master')

@section('title', 'Besoins budgétaires')

@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;
    }
    
</style>

<style>
    .table-budget th,
    .table-budget td{
        padding:8px;
        text-align:center;
    }

    .table-budget input{
        min-width:130px;
    }

    .col-montant{
        min-width:190px;
    }

    .col-mois{
        min-width:100px;
    }
</style>

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

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

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

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

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

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

    /* Boutons bien visibles */
    .step .btn {
        margin-top: 15px;
    }
</style>

<div class="container-fluid">

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

        <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;">
                        FORMULAIRE DE SAISIE BUDGÉTAIRE
                    </h4>

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

                <!-- BOUTON -->
                <div>
                    <a href="#collapseBesoin" class="btn btn-primary shadow-sm px-3" data-toggle="collapse">
                        <i class="fas fa-plus mr-1"></i>
                        Nouveau besoin budgétaire
                    </a>
                </div>
            </div>
        </div>


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

                <form id="formBesoin" method="POST" action="{{ route('user.besoinbudgetaires.store') }}">
                    @csrf

                    @php  $anneeEnCours = date('Y'); @endphp

                    <div class="form-wizard">
                        <!-- ETAPE 1 -->
                        <div class="step" 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-calendar-alt mr-2"></i>
                                        <strong>{{ $anneeEnCours }}</strong>
                                    </div>

                                    <!-- champ envoyé -->
                                    <input type="hidden" name="exercice" value="{{ $anneeEnCours }}">
                                </div>

                                <!-- ================= INFORMATIONS GENERALES ================= -->
                                <h5 class="text-primary mb-3 text-center">
                                    Informations Générales
                                </h5>

                                 <!-- Ligne 3 : Direction + Centre + Entité -->
                                <div class="row mt-3">

                                    <div class="col-md-4">
                                        <label>Direction</label>

                                       @if(optional($responsable->direction)->code === '00-SIEGE')
                                            <select name="direction_id" class="form-control mb-1">
                                                @foreach($directions as $direction)
                                                    <option value="{{ $direction->id }}"
                                                        {{ $direction->id == $responsable->direction_id ? 'selected' : '' }}>
                                                        {{ $direction->code }} - {{ $direction->libelle }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        @else
                                            <input type="text" class="form-control bg-light mb-1"
                                                value="{{ optional($responsable->direction)->code }} - {{ optional($responsable->direction)->libelle }}"
                                                readonly>
                                            <input type="hidden" name="direction_id" value="{{ $responsable->direction_id }}">
                                        @endif
                                     </div>

                                    <div class="col-md-4">
                                        <label>Centre de responsabilité</label>

                                            @if(optional($responsable->direction)->code === '00-SIEGE')
                                                <select name="centrerespo_id" class="form-control mb-1">
                                                @foreach($centrerespos as $centre)
                                                    <option value="{{ $centre->id }}"
                                                        {{ $centre->id == $responsable->centrerespo_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="centrerespo_id" value="{{ $responsable->centrerespo_id }}">
                                        @endif
                                    </div>

                                    <div class="col-md-4">
                                        <label>Entité</label>

                                        <input type="text" class="form-control bg-light"
                                            value="{{ optional($responsable->entite)->libelle }}"
                                            readonly>

                                        <input type="hidden" name="entite_id" value="{{ $responsable->entite_id }}">

                                        <input type="hidden"
                                        id="entiteLibelle"
                                        value="{{ strtoupper(optional($responsable->entite)->libelle) }}">
                                    </div>

                                </div>

                                 <!-- Type de contrat -->
                                <div class="row mt-3">
                                    <!-- Type de contrat -->
                                    <div class="col-md-3">
                                        <label>Type de contrat</label>
                                        <select name="type_contrat" id="typeContrat" class="form-control" required>
                                            <option value="">-- Choisir --</option>
                                            <option value="permanent">Permanent</option>
                                            <option value="accessoire">Accessoire</option>
                                            <option value="signe">Signé</option>
                                        </select>
                                    </div>

                                    <!-- Contrat -->
                                    <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 }}">
                                                    {{ $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">
                                    </div>

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

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

                                        {{-- <small class="text-muted d-block mt-1">
                                            • C/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" readonly>
                                        <input type="hidden" name="code_budget" id="codeBudgetHidden">
                                    </div>

                                    <div class="col-md-6">
                                        <label>Nom budget</label>
                                       <input type="text" id="nomBudget" class="form-control bg-light" readonly>
                                        <input type="hidden" name="nom_budget" id="nomBudgetHidden">
                                    </div>
                                </div>

                                <!-- Ligne 4 : Responsable -->
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <label>Responsable</label>

                                        <!-- Champ saisissable -->
                                        <input type="text" name="responsable" class="form-control"
                                            value="{{ $responsable->nom }} {{ $responsable->prenoms }}"
                                            placeholder="Saisir le responsable">
                                    </div>
                                </div>

                                <!-- Ligne 5 : Objet -->
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <label>Objet du contrat</label>
                                        <textarea name="objet"
                                                rows="3"
                                                class="form-control"
                                                placeholder="Décrire le besoin budgétaire..."
                                                required></textarea>
                                    </div>
                                </div>
                                {{-- <hr class="my-4"> --}}
                            </div>  
                              
                        
                            <div class="step-footer text-end">
                            <button type="button" class="btn btn-primary next">Suivant</button>
                            </div>
                        </div>

                        <!-- ETAPE 2 -->
                        <div class="step" id="step2">

                            <!-- CONTENU -->
                            <div class="step-content">

                                <h5 class="text-success mb-3">Budget Ressources</h5>

                                <div id="budgetContainer">
                                    <!-- Ligne modèle -->
                                    <div class="budget-line border p-2 mb-3">
                                        <!-- Partie 1 : Libellé + Montants -->
                                        <div class="row mb-2">
                                            <div class="col-md-4">
                                                <label>Libellé</label>
                                                <input type="text" name="ressources[0][libelle]" class="form-control input-natureresource">
                                            </div>
                                            <div class="col-md-4">
                                                <label>Montant Total</label>
                                                <input type="number" name="ressources[0][montant_total]" class="form-control">
                                            </div>
                                            <div class="col-md-4">
                                                <label>Montant Inscrit</label>
                                                <input type="number" name="ressources[0][montant_inscrit]" class="form-control">
                                            </div>
                                        </div>

                                        <!-- Partie 2 : Mois Janvier à Juin -->
                                        <div class="row mb-2">
                                            <div class="col"><label>Janvier</label><input type="number" name="ressources[0][janvier]" class="form-control"></div>
                                            <div class="col"><label>Février</label><input type="number" name="ressources[0][fevrier]" class="form-control"></div>
                                            <div class="col"><label>Mars</label><input type="number" name="ressources[0][mars]" class="form-control"></div>
                                            <div class="col"><label>Avril</label><input type="number" name="ressources[0][avril]" class="form-control"></div>
                                            <div class="col"><label>Mai</label><input type="number" name="ressources[0][mai]" class="form-control"></div>
                                            <div class="col"><label>Juin</label><input type="number" name="ressources[0][juin]" class="form-control"></div>
                                        </div>

                                        <!-- Partie 3 : Mois Juillet à Décembre + Supprimer -->
                                        <div class="row mb-2 align-items-end">
                                            <div class="col"><label>Juillet</label><input type="number" name="ressources[0][juillet]" class="form-control"></div>
                                            <div class="col"><label>Août</label><input type="number" name="ressources[0][aout]" class="form-control"></div>
                                            <div class="col"><label>Septembre</label><input type="number" name="ressources[0][septembre]" class="form-control"></div>
                                            <div class="col"><label>Octobre</label><input type="number" name="ressources[0][octobre]" class="form-control"></div>
                                            <div class="col"><label>Novembre</label><input type="number" name="ressources[0][novembre]" class="form-control"></div>
                                            <div class="col">
                                                <label>Décembre</label>
                                                <input type="number" name="ressources[0][decembre]" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-2 d-flex align-items-end">
                                            <button type="button" class="btn btn-danger btn-sm remove-line w-100">
                                                Supprimer
                                            </button>
                                        </div>
                                    </div>
                                </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>

                            <!-- FOOTER FIXÉ EN BAS -->
                            <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>

                        <!-- ETAPE 3 -->
                        <div class="step" id="step3">

                            <div class="step-content">
                                <!-- ================= FORMULAIRE ACTIVITES BUDGET EMPLOI ================= -->
                                <h5 class="text-warning">Informations complémentaires Budget Emplois</h5>

                                <div id="blocBudgetEmplois"></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>

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


                                <div class="text-center">
                                    <button type="submit" name="action" value="brouillon" class="btn btn-primary">
                                            Enregistrer brouillon
                                        </button>
                                        <button type="submit" name="action" value="transmettre" class="btn btn-success">
                                            Transmettre
                                        </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ===================== TABLEAU GLOBAL BESOINS BUDGETAIRES ===================== -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 bg-primary text-white">
            <h6 class="m-0 font-weight-bold">Synthèse Budget - Ressources & Emplois</h6>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" style="font-size:0.85em;">
                    <thead class="thead-dark">
                        <tr>
                            <th>Exercice</th>
                            <th>Direction</th>
                            <th>Centre de responsabilité</th>
                            <th>Entité</th>
                            <th>Type Contrat</th>
                            <th>Code Contrat</th>
                            <th>Nom Contrat</th>
                            {{-- <th>Contrat Permanent</th> --}}
                            <th>Immatriculation</th>
                            <th>Responsable</th>
                            <th>Objet</th>
                            <th>Total Ressources</th>
                            <th>Total Emplois</th>
                            <th>Ecart</th>
                            <th>Détails Ressources</th>
                            <th>Détails Emplois</th>
                            <th class="text-center">Action</th>
                            <th>Motif Si Retour</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($besoinbudgetaires as $besoinbudgetaire)

                            @php
                                $totalRessources = $besoinbudgetaire->budgetressources->sum('montant_inscrit');
                                $totalDepenses = $besoinbudgetaire->budgetdepenses->sum('montant');
                                $ecart = $totalRessources - $totalDepenses;
                            @endphp

                            <tr>
                                <td>{{ $besoinbudgetaire->exercice }}</td>
                                <td>{{ $besoinbudgetaire->direction->code ?? '-' }} - {{ $besoinbudgetaire->direction->libelle ?? '-' }}</td>
                                <td>{{ $besoinbudgetaire->centrerespo->code ?? '-' }} - {{ $besoinbudgetaire->centrerespo->libelle_long ?? '-' }}</td>
                                <td>{{ $besoinbudgetaire->entite->libelle ?? '-' }}</td>
                                <td> @if($besoinbudgetaire->type_contrat === 'signe')
                                    <span class="badge badge-warning">Signé</span>
                                    @elseif($besoinbudgetaire->type_contrat === 'permanent')
                                        <span class="badge badge-success">Permanent</span>
                                    @elseif($besoinbudgetaire->type_contrat === 'accessoire')
                                        <span class="badge badge-info">Accessoire</span>
                                    @endif
                                </td>
                                <td>{{ $besoinbudgetaire->code_budget ?? '-' }}</td>
                                <td>{{ $besoinbudgetaire->nom_budget ?? '-' }}</td>
                                {{-- <td>{{ $besoinbudgetaire->contrat->code ?? '-' }} - {{ $besoinbudgetaire->contrat->libelle ?? '-' }}</td> --}}
                                <td>{{ $besoinbudgetaire->immatriculation ?? '---' }}</td>
                                <td>{{ $besoinbudgetaire->responsable }}</td>
                                <td>{{ $besoinbudgetaire->objet }}</td>
                            

                                <td class="text-right font-weight-bold text-success">
                                    {{ number_format($totalRessources, 2, ',', ' ') }} FCFA
                                </td>

                                <td class="text-right font-weight-bold text-danger">
                                    {{ number_format($totalDepenses, 2, ',', ' ') }} FCFA
                                </td>

                                <td class="text-right font-weight-bold {{ $ecart >= 0 ? 'text-success' : 'text-danger' }}">
                                    {{ number_format($ecart, 2, ',', ' ') }} FCFA
                                </td>

                                <!-- DETAILS RESSOURCES -->
                                <td class="text-center align-middle">
                                    <button class="btn btn-sm btn-success btnVoirDetail" 
                                            data-id="{{ $besoinbudgetaire->id }}" 
                                            data-type="ressources">
                                        Voir
                                    </button>
                                </td>

                                <!-- DETAILS DEPENSES -->
                                <td class="text-center align-middle">
                                   <button class="btn btn-sm btn-danger btnVoirDetail" 
                                            data-id="{{ $besoinbudgetaire->id }}" 
                                            data-type="depenses">
                                        Voir
                                    </button>
                                </td>

                              <!-- ACTION -->
                                <td class="text-center align-middle">

                                @php
                                    $userRole = auth()->user()->role;

                                    $currentStep = $besoinbudgetaire->workflow_step;

                                    $myStep = optional($besoinbudgetaire->workflow)->workflow_steps
                                        ->where('role', $userRole)
                                        ->first();

                                    // 🔥 brouillon
                                    if ($besoinbudgetaire->status === 'brouillon') {
                                        $status = 'brouillon';
                                    }

                                    // 🔥 je suis à l’étape actuelle
                                    elseif ($myStep && $currentStep && $myStep->id === $currentStep->id) {

                                        // 👉 si je viens de recevoir un retour
                                        $returnedFromNext = $besoinbudgetaire->workflowHistories
                                            ->where('workflow_step_id', optional($currentStep)->next_step_id)
                                            ->where('status', 'retourne')
                                            ->sortByDesc('id')
                                            ->first();

                                        if ($returnedFromNext) {
                                            $status = 'retourne';
                                        } else {
                                            $status = 'en_attente';
                                        }
                                    }

                                    // 🔥 je suis l’étape précédente (j’ai transmis)
                                    elseif ($myStep && $currentStep && $currentStep->previous_step_id == $myStep->id) {

                                        $history = $besoinbudgetaire->workflowHistories
                                            ->where('workflow_step_id', $currentStep->id)
                                            ->sortByDesc('id')
                                            ->first();

                                        $status = $history->status ?? 'transmis';
                                    }

                                    // 🔥 anciennes étapes (validées)
                                    else {

                                        $history = $besoinbudgetaire->workflowHistories
                                            ->where('workflow_step_id', $myStep->id ?? null)
                                            ->sortByDesc('id')
                                            ->first();

                                        $status = $history->status ?? 'en_attente';
                                    }
                                @endphp


{{-- ================= 🎯 MON ÉTAPE ================= --}}
{{-- @if($isMyStep) --}}

    {{-- ================= BROUILLON ================= --}}
    @if($besoinbudgetaire->status === 'brouillon')

        <div class="d-flex justify-content-center align-items-center flex-nowrap">

            {{-- Modifier --}}
            <a href="{{ route('user.besoinbudgetaire.edit', $besoinbudgetaire->id) }}"
               class="btn btn-sm btn-info mr-1">
                <i class="fas fa-edit"></i>
            </a>

            {{-- Supprimer --}}
            <form action="{{ route('user.besoinbudgetaire.supprimer', $besoinbudgetaire->id) }}"
                  method="POST"
                  class="m-0 mr-1"
                  onsubmit="return confirm('Voulez-vous vraiment supprimer ce besoin budgétaire ?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-danger">
                    <i class="fas fa-trash"></i>
                </button>
            </form>

            {{-- Transmettre --}}
            <form action="{{ route('user.besoinbudgetaire.transmettre', $besoinbudgetaire->id) }}"
                  method="POST"
                  class="m-0">
                @csrf
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>

        </div>


    {{-- ================= TRANSMIS (je viens d’envoyer) ================= --}}
    @elseif($status === 'transmis')

        <span class="badge badge-warning">Budget transmis</span>


    {{-- ================= RETOURNÉ ================= --}}
    @elseif($status === 'retourne')

        <span class="badge badge-danger">Budget retourné</span>

        <div class="d-flex justify-content-center align-items-center mt-1">

            {{-- Modifier --}}
            <a href="{{ route('user.besoinbudgetaire.edit', $besoinbudgetaire->id) }}"
               class="btn btn-sm btn-info mr-1">
                <i class="fas fa-edit"></i>
            </a>

            {{-- Transmettre --}}
            <form action="{{ route('user.besoinbudgetaire.transmettre', $besoinbudgetaire->id) }}"
                  method="POST"
                  class="m-0">
                @csrf
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>

        </div>


    {{-- ================= VALIDÉ ================= --}}
    @elseif($status === 'valide')

        <span class="badge badge-success">Budget validé</span>

    @endif


{{-- ================= 👁️ PAS MON ÉTAPE ================= --}}
{{-- @else

    @if($currentStatus === 'valide')
        <span class="badge badge-success">Validé</span>

    @elseif($currentStatus === 'transmis')
        <span class="badge badge-warning">En cours</span>

    @elseif($currentStatus === 'retourne')
        <span class="badge badge-danger">Retourné</span>

    @else
        <span class="badge badge-secondary">En attente</span>
    @endif

@endif --}}

</td>


<!-- MOTIF -->
<td class="text-center align-middle">
    
      @php
    $retour = $besoinbudgetaire->workflowHistories
        ->where('status', 'retourne')
        ->whereNotNull('motif')
        ->sortByDesc('created_at')
        ->first();
    @endphp

    {{ $retour->motif ?? '---' }}
</td>
                            </tr>

                                <!-- LIGNE DETAILS RESSOURCES -->
                                <tr id="ressource-{{ $besoinbudgetaire->id }}" class="detail-row d-none">
                                  <td colspan="14">

                                    <div class="card mb-3 border-success">
                                          <div class="card-header bg-success text-white py-2">
                                              <strong> Budget Ressources</strong>
                                          </div>
                                      </div>
                                      <div style="overflow-x:auto; width:100%;">
                                          <table class="table table-sm table-bordered" style="min-width:1500px; white-space:nowrap;">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th>Libellé</th>
                                                    <th>Montant total</th>
                                                    <th>Montant inscrit</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>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($besoinbudgetaire->budgetressources as $budgetressource)
                                                    <tr>
                                                        <td>{{ $budgetressource->libelle ?? '-' }}</td>
                                                        <td class="text-right">
                                                            {{ number_format($budgetressource->montant_total,0,',',' ') }} FCFA
                                                        </td>
                                                        <td class="text-right">
                                                            {{ number_format($budgetressource->montant_inscrit,0,',',' ') }} FCFA
                                                        </td>
                                                        <td class="text-right">{{ number_format($budgetressource->janvier,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->fevrier,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->mars,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->avril,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->mai,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->juin,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->juillet,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->aout,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->septembre,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->octobre,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->novembre,0,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetressource->decembre,0,',',' ') }} FCFA</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                      </div>
                                    </td>
                                </tr>

                                <!-- LIGNE DETAILS DEPENSES -->
                        <tr id="depense-{{ $besoinbudgetaire->id }}" class="detail-row d-none">
                            <td colspan="14">

                                @php
                                    // Regrouper les dépenses par activité
                                    $depensesParActivite = $besoinbudgetaire->budgetdepenses->groupBy('activite');
                                @endphp

                                @foreach($depensesParActivite as $activite => $depenses)
                                    {{-- ================= BLOC ACTIVITE ================= --}}
                                    <div class="card mb-3 border-danger">
                                        <div class="card-header bg-danger text-white py-2">
                                            <strong>Informations complémentaires - Activité : {{ $activite ?? '-' }}</strong>
                                        </div>
                                        <div class="card-body py-2">
                                            @php
                                                $firstDepense = $depenses->first();
                                            @endphp
                                            <div class="row" style="font-size:0.85em;">
                                                <div class="col-md-4">
                                                    <strong>Direction :</strong>
                                                    {{ $firstDepense->direction->code ?? '-' }} - {{ $firstDepense->direction->libelle ?? '-' }}
                                                </div>
                                                <div class="col-md-4">
                                                    <strong>Centre de responsabilité :</strong>
                                                    {{ $firstDepense->centrerespo->code ?? '-' }} - {{ $firstDepense->centrerespo->libelle_long ?? '-' }}
                                                </div>
                                                <div class="col-md-4">
                                                    <strong>Domaine d’activités :</strong>
                                                    {{ $firstDepense->domaineact->code ?? '-' }} - {{ $firstDepense->domaineact->libelle ?? '-' }}
                                                </div>
                                                <div class="col-md-4 mt-2">
                                                    <strong>Axe PSD :</strong>
                                                    {{ $firstDepense->axe->code ?? '-' }} - {{ $firstDepense->axe->libelle ?? '-' }}
                                                </div>
                                                <div class="col-md-4 mt-2">
                                                    <strong>Domaine PSD :</strong>
                                                    {{ $firstDepense->domainepsd->code ?? '-' }} - {{ $firstDepense->domainepsd->libelle ?? '-' }}
                                                </div>
                                                <div class="col-md-4 mt-2">
                                                    <strong>Programme PSD :</strong>
                                                    {{ $firstDepense->programme->code ?? '-' }} - {{ $firstDepense->programme->libelle ?? '-' }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- ================= TABLEAU LIGNES DEPENSES ================= --}}
                                    <div style="overflow-x:auto; width:100%;">
                                        <table class="table table-sm table-bordered" style="min-width:1000px; white-space:nowrap;">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th>Nature dépense</th>
                                                    <th>Nbre</th>
                                                    <th>Quantite</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>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($depenses as $budgetdepense)
                                                    <tr>
                                                        <td>{{ $budgetdepense->nature ?? '-' }}</td>
                                                        <td>{{ number_format($budgetdepense->nbre,2,',',' ') }}</td>
                                                        <td>{{ number_format($budgetdepense->qte,2,',',' ') }}</td>
                                                        <td>{{ number_format($budgetdepense->c_u,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->montant,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->janvier,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->fevrier,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->mars,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->avril,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->mai,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->juin,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->juillet,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->aout,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->septembre,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->octobre,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->novembre,2,',',' ') }} FCFA</td>
                                                        <td class="text-right">{{ number_format($budgetdepense->decembre,2,',',' ') }} FCFA</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                @endforeach

                            </td>
                        </tr>

                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-3">

            <div class="small text-muted">
                Affichage de {{ $besoinbudgetaires->firstItem() }}
                à {{ $besoinbudgetaires->lastItem() }}
                sur {{ $besoinbudgetaires->total() }} résultats
            </div>

            <div>
               {{ $besoinbudgetaires->appends(request()->query())->links() }}
            </div>

        </div>
    </div>

    <!-- MODALE GÉNÉRIQUE POUR LES DÉTAILS -->
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="detailsModalLabel">Détails Budget</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body" id="detailsModalBody">
            <!-- Le contenu sera injecté via JS -->
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Fermer</button>
        </div>
        </div>
    </div>
    </div>

</div>
</div>

<!-- ================= SCRIPT DYNAMIQUE ================= -->
<script>
    $(document).ready(function() {
        // Créer une instance globale de la modale
        let modalEl = document.getElementById('detailsModal');
        let detailsModal = new bootstrap.Modal(modalEl);

        $('.btnVoirDetail').click(function() {
            let id = $(this).data('id');
            let type = $(this).data('type');

            let rowId = (type === 'ressources') ? 'ressource-' + id : 'depense-' + id;
            let rowContent = $('#' + rowId + ' td').html();

            $('#detailsModalBody').html(rowContent);

            let titre = (type === 'ressources') ? 'Détails Budget Ressources' : 'Détails Budget Emplois';
            $('#detailsModalLabel').text(titre);

            // Afficher la modale
            detailsModal.show();
        });

        // Fermer la modale via boutons manuellement (optionnel)
        $(modalEl).on('click', '[data-bs-dismiss="modal"]', function() {
            detailsModal.hide();
        });
    });
</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(".depense-line");

        if(!row) return; // sécurité

        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(".depense-line").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(montant !== somme){
        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>
    let indexR = 1;
    let indexBloc = 0;
    
       // ================= RESSOURCES (STEP 2) =================

    const container = document.getElementById('budgetContainer');
    const addBtn = document.getElementById('addRessource');

   // ================= AJOUT LIGNE =================
    document.getElementById('addRessource').addEventListener('click', function () {

        let i = indexR;

        let bloc = `
        <div class="budget-line border p-2 mb-3">

            <!-- PARTIE 1 -->
            <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="">
                </div>

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

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

            <!-- JANVIER → JUIN -->
            <div class="row mb-2">
                <div class="col"><label>Janvier</label><input type="number" name="ressources[${i}][janvier]" class="form-control" value=""></div>
                <div class="col"><label>Février</label><input type="number" name="ressources[${i}][fevrier]" class="form-control" value=""></div>
                <div class="col"><label>Mars</label><input type="number" name="ressources[${i}][mars]" class="form-control" value=""></div>
                <div class="col"><label>Avril</label><input type="number" name="ressources[${i}][avril]" class="form-control" value=""></div>
                <div class="col"><label>Mai</label><input type="number" name="ressources[${i}][mai]" class="form-control" value=""></div>
                <div class="col"><label>Juin</label><input type="number" name="ressources[${i}][juin]" class="form-control" value=""></div>
            </div>

            <!-- JUILLET → DECEMBRE -->
            <div class="row mb-2 align-items-end">
                <div class="col"><label>Juillet</label><input type="number" name="ressources[${i}][juillet]" class="form-control" value=""></div>
                <div class="col"><label>Août</label><input type="number" name="ressources[${i}][aout]" class="form-control" value=""></div>
                <div class="col"><label>Septembre</label><input type="number" name="ressources[${i}][septembre]" class="form-control" value=""></div>
                <div class="col"><label>Octobre</label><input type="number" name="ressources[${i}][octobre]" class="form-control" value=""></div>
                <div class="col"><label>Novembre</label><input type="number" name="ressources[${i}][novembre]" class="form-control" value=""></div>
                <div class="col"><label>Décembre</label><input type="number" name="ressources[${i}][decembre]" class="form-control" value=""></div>
            </div>

                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-sm remove-line w-100">
                        Supprimer
                    </button>
                </div>

        </div>
        `;

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

        indexR++;
    });

    // 🔹 Supprimer une ligne
    document.addEventListener('click', function (e) {

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

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

            // Empêcher suppression de la dernière ligne
            if (lignes.length <= 1) {
                alert("Au moins un bloc Budget Ressources obligatoire");
                return;
            }

            // CONFIRMATION
            if (!confirm("Voulez-vous vraiment supprimer cette ligne ?")) {
                return;
            }

            e.target.closest('.budget-line').remove();
        }
    });

    // 🔹 Sécurité : empêcher valeurs négatives
    container.addEventListener('input', function(e){
        if(e.target.type === "number" && e.target.value < 0){
            e.target.value = 0;
        }
    });

      // ================= FONCTIONS MOIS (UTILISÉES POUR EMPLOIS) =================

    function moisInputs(prefix) {

    return `
        <td><input type="number" class="form-control mois" name="${prefix}[janvier]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[fevrier]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[mars]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[avril]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[mai]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[juin]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[juillet]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[aout]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[septembre]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[octobre]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[novembre]" value="0"></td>
        <td><input type="number" class="form-control mois" name="${prefix}[decembre]" value="0"></td>
        `;
    }

    function moisInputsRessource(indexR) {
    return `
        <td><input type="number" name="ressources[${indexR}][janvier]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][fevrier]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][mars]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][avril]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][mai]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][juin]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][juillet]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][aout]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][septembre]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][octobre]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][novembre]" class="form-control" value="0"></td>
        <td><input type="number" name="ressources[${indexR}][decembre]" class="form-control" value="0"></td>
        `;
    }

    // Liste des postes et comptes pour les selects dynamiques
    const postegestions = @json($postegestions); // id + libelle + code
    const comptesyscohadas = @json($comptesyscohadas); // id + code + libelle

    // Affiche "code - libelle" si disponible
    function selectOptions(items, isPoste = true){
        return items.map(i => {
            let text;
            if(isPoste){
                text = `${i.code ?? i.id} - ${i.libelle ?? ''}`; // Poste : code + libelle
            } else {
                text = `${i.code ?? i.id} - ${i.libelle ?? ''}`; // Compte : code + libelle
            }
            return `<option value="${i.id}">${text}</option>`;
        }).join('');
    }

   
    // ================= BLOC BUDGET EMPLOI =================

    @php
    $isDirectionCentrale =
        optional($responsable->entite)->libelle === 'DIRECTION CENTRALE';
    @endphp

    document.getElementById('addBlocEmploi').addEventListener('click', function(){

        let bloc = `
        <div class="card mb-4 p-3 bloc-emploi">

        <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[${indexBloc}][direction_id]"
                            class="form-control direction-execution">

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

                        @foreach($directions as $direction)
                            <option value="{{ $direction->id }}">
                                {{ $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[${indexBloc}][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[${indexBloc}][centrerespo_id]"
                            class="form-control centre-execution">

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

                        @foreach($centrerespos as $centre)
                            <option value="{{ $centre->id }}"
                                    data-direction="{{ $centre->direction_id }}">
                                {{ $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[${indexBloc}][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[${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">
            <div class="depense-body">

            </div>
        </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>
        `;
        // 🔥 Ajouter automatiquement une ligne de dépense
     setTimeout(() => {
            const lastBloc = document.querySelector('#blocBudgetEmplois .bloc-emploi:last-child');
            const addBtn = lastBloc.querySelector('.add-ligne-depense');

            if(addBtn){
                addBtn.click();
            }
        }, 100);

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

        // 🔥 Déclencher automatiquement la logique centre (TRÈS IMPORTANT)
        const lastBloc = document.querySelector('#blocBudgetEmplois .bloc-emploi:last-child');
        const directionInput = lastBloc.querySelector('input[name$="[direction_id]"]');

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

        indexBloc++;
    });

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

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

    //         if(confirm("Supprimer ce bloc Budget Emplois ?")){

    //             let bloc = e.target.closest(".bloc-emploi");
    //             bloc.remove();

    //         }

    //     }

    // });

    // ================= AJOUT LIGNE DEPENSE =================
    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 = [...document.querySelectorAll(".bloc-emploi")].indexOf(bloc);
        let ligneIndex = tbody.children.length;

        let row = `
        <div class="depense-line border p-3 mb-3">

            <!-- LIGNE 1 -->
        <div class="row mb-2">

                <div class="col-md-4">
                    <label>Nature</label>
                    <input type="text"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][nature]"
                        class="form-control input-nature">
                </div>

                <div class="col-md-2">
                    <label>Nbre</label>
                    <input type="number"
                        step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][nbre]"
                        class="form-control">
                </div>

                <div class="col-md-2">
                    <label>Quantité</label>
                    <input type="number"
                        step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][qte]"
                        class="form-control">
                </div>

                <div class="col-md-2">
                    <label>C.U</label>
                    <input type="number"
                        step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][c_u]"
                        class="form-control">
                </div>

                <div class="col-md-2">
                    <label>Montant</label>
                    <input type="number"
                        step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][montant]"
                        class="form-control">
                </div>

            </div>

            <!-- JANVIER → JUIN -->
            <div class="row mb-2">

                <div class="col">
                    <label>Janvier</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][janvier]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Février</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][fevrier]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Mars</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][mars]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Avril</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][avril]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Mai</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][mai]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Juin</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][juin]"
                        class="form-control" value="0">
                </div>

            </div>

            <!-- JUILLET → DÉCEMBRE -->
            <div class="row mb-2">

                <div class="col">
                    <label>Juillet</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][juillet]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Août</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][aout]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Septembre</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][septembre]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Octobre</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][octobre]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Novembre</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][novembre]"
                        class="form-control" value="0">
                </div>

                <div class="col">
                    <label>Décembre</label>
                    <input type="number" step="any"
                        name="emplois[${blocIndex}][depenses][${ligneIndex}][decembre]"
                        class="form-control" value="0">
                </div>

            </div>

            <!-- ACTION -->
            <div class="text-end">
                <button type="button" class="btn btn-danger btn-sm remove-row">
                    Supprimer
                </button>
            </div>

        </div>
        `;
        tbody.insertAdjacentHTML("beforeend", row);

        }

    });

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

    const btn = e.target.closest('.remove-row');

    if(btn){

        // 🔥 confirmation
        if(!confirm("Voulez-vous vraiment supprimer cette nature de dépense ?")){
            return; // annule la suppression
        }

        let bloc = btn.closest('.bloc-emploi');
        let lignes = bloc.querySelectorAll('.depense-line');

        // 🔒 sécurité : au moins une ligne
        if(lignes.length <= 1){
            alert("Au moins une ligne de dépense est obligatoire");
            return;
        }

        btn.closest('.depense-line').remove();
    }

});

    document.addEventListener("click", function(e) {
        if(e.target.classList.contains("toggle-detail")) {
            let target = document.querySelector(e.target.dataset.target);
            target.classList.toggle("d-none");
        }
    });



    // =================== Select dépendants ===================
    const centresResponsabilite = @json($centrerespos); // id, direction_id, code, libelle_long
    const domainesPSD = @json($domainepsds);          // id, axe_id, code, libelle
    const programmesPSD = @json($programmes);         // id, domaine_id, code, libelle

    document.getElementById('blocBudgetEmplois').addEventListener('change', function(e){
        const target = e.target;
        const bloc = target.closest('.bloc-emploi');

        // Centre de responsabilité selon la Direction sélectionnée

        if(target.name.includes('[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 PSD selon l’Axe PSD sélectionné
        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>`;
                });
            // Réinitialiser Programme PSD
            programmeSelect.innerHTML = `<option value="">-- Sélectionner --</option>`;
        }

        // Programme PSD selon le Domaine PSD sélectionné
        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>`;
                });
        }
    });


    // ================= INITIALISATION STEP 3 =================

    // Créer automatiquement un premier bloc au chargement
    window.addEventListener('load', function () {

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

        // Vérifier s'il n'y a aucun bloc
        if (container.children.length === 0) {

            document.getElementById('addBlocEmploi').click();

        }

    });

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

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

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

            // 🚫 Empêcher suppression du dernier bloc
            if(blocs.length <= 1){
                alert("Au moins un bloc Budget Emplois obligatoire");
                return;
            }

            // ✅ Confirmation
            if(confirm("Voulez-vous vraiment supprimer ce bloc ?")){
                e.target.closest(".bloc-emploi").remove();
            }

        }

    });
</script>

<script>
    document.getElementById('formBesoin').addEventListener('submit', function(e) {
        // Sélectionne tous les champs nature
        const natureInputs = document.querySelectorAll('.input-nature');
        let hasEmpty = false;

        natureInputs.forEach(input => {
            if (!input.value.trim()) {
                hasEmpty = true;
            }
        });

        if (hasEmpty) {
            e.preventDefault(); // Empêche l'envoi du formulaire
            alert('Veuillez remplir toutes les colonnes "Nature" avant d’enregistrer.');
        }
    });
</script>

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

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

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

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

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

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

    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 = "";

        codeBudgetHidden.value = "";
        nomBudgetHidden.value = "";
        immatriculationHidden.value = "";

        inputNomContrat.value = "";
        immatriculationVisible.value = "";

        immatriculationVisible.setAttribute("readonly", true);
        immatriculationVisible.classList.add("bg-light");

        // ✔ IMPORTANT : on garde Nom Contrat visible par défaut
    }
    // =========================
    // TYPE CONTRAT
    // =========================
    typeContrat.addEventListener("change", function () {

        resetAll();

        if (this.value === "permanent") {
            blocContrat.classList.remove("d-none");
            blocNomContrat.classList.add("d-none");
            blocImmatriculation.classList.add("d-none");
        }

        if (this.value === "accessoire") {
            blocContrat.classList.add("d-none");
            blocNomContrat.classList.remove("d-none");
            blocImmatriculation.classList.add("d-none");

            immatriculationHidden.value = ""; // 🔥 sécurité
        }

        if (this.value === "signe") {
            blocContrat.classList.add("d-none");
            blocNomContrat.classList.remove("d-none");
            blocImmatriculation.classList.remove("d-none");

            immatriculationVisible.removeAttribute("readonly");
            immatriculationVisible.classList.remove("bg-light");
        }
    });

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

        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;

        codeBudgetHidden.value = cb;
        nomBudgetHidden.value = nom;
    });

    // =========================
// ACCESSOIRE
// =========================
inputNomContrat.addEventListener("input", function () {

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

    let nom = this.value.trim();

    // ✅ CAS VIDE : on nettoie tout
    if (nom === "") {
        codeBudget.value = "";
        nomBudget.value = "";

        codeBudgetHidden.value = "";
        nomBudgetHidden.value = "";
        return;
    }

    // génération normale
    let seq = String(seqAcc).padStart(4, '0');
    let cb = `43-${seq}/${exercice}/${nom}`;

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

    codeBudgetHidden.value = cb;
    nomBudgetHidden.value = nom;
});
    // =========================
    // SIGNÉ
    // =========================

function getBase(prefix) {

    const bases = {
        CN: "40",
        CR: "41",
        CL: "42"
    };

    return bases[prefix] || null;
}

// ================= VERIFICATION ENTITE A TRAVERS LES PREFIXES =================

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;

    // 007 => 0007
    numero = String(parseInt(numero) || 0).padStart(4, '0');

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


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

function updateSigne() {

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

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

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

    // ================= SECURITE =================
    if (!nom || !immat) {

        codeBudget.value = '';
        nomBudget.value = '';

        codeBudgetHidden.value = '';
        nomBudgetHidden.value = '';

        immatriculationHidden.value = '';

        return;
    }

    // Exemple :
    // CR/007/2026/DRX

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

    // ================= FORMAT INVALIDE =================
    if (parts.length < 4) {

        codeBudget.value = '';
        nomBudget.value = '';

        codeBudgetHidden.value = '';
        nomBudgetHidden.value = '';

        immatriculationHidden.value = '';

        return;
    }

    // ================= RECUPERATION =================
    let prefix = (parts[0] || '').toUpperCase();

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

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

    // ================= CONTROLE ENTITE =================

    // CL => ZONE
    if(
        prefix === 'CL' &&
        entite !== 'ZONE'
    ) {

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

        codeBudget.value = '';
        nomBudget.value = '';

        codeBudgetHidden.value = '';
        nomBudgetHidden.value = '';

        immatriculationHidden.value = '';

        return;
    }

    // CR => DIRECTION REGIONALE
    if(
        prefix === 'CR' &&
        entite !== 'DIRECTION REGIONALE'
    ) {

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

        codeBudget.value = '';
        nomBudget.value = '';

        codeBudgetHidden.value = '';
        nomBudgetHidden.value = '';

        immatriculationHidden.value = '';

        return;
    }

    // CN => CF-PROG + DIRECTION CENTRALE
    if(
        prefix === 'CN' &&
        entite !== 'CF-PROG' &&
        entite !== 'DIRECTION CENTRALE'
    ) {

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

        codeBudget.value = '';
        nomBudget.value = '';

        codeBudgetHidden.value = '';
        nomBudgetHidden.value = '';

        immatriculationHidden.value = '';

        return;
    }

    // ================= VALIDATION PREFIXE =================
    let base = getBase(prefix);

    if (!base) {

        codeBudget.value = '';
        nomBudget.value = '';

        codeBudgetHidden.value = '';    
        nomBudgetHidden.value = '';

        immatriculationHidden.value = '';

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

        return;
    }

    // ================= CONTROLE GLOBAL =================
    if(!verifierEntite(prefix)) {

        codeBudget.value = '';
        nomBudget.value = '';

        codeBudgetHidden.value = '';
        nomBudgetHidden.value = '';

        immatriculationHidden.value = '';

        return;
    }

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

    // ================= AFFECTATION =================
    immatriculationHidden.value = immat;

    codeBudget.value = code;

    nomBudget.value = nom;

    codeBudgetHidden.value = code;

    nomBudgetHidden.value = nom;
}

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

inputNomContrat.addEventListener("input", updateSigne);

immatriculationVisible.addEventListener("input", updateSigne);

});
</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) {

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

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

        if (!current || !next) return;

        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) => {

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

        // ================= PERMANENT =================
        if (type === "permanent") {

            // Step 1 → Step 3
            if (currentStep === 1) {
                showStep(3);
                return;
            }

            // Step 3 : rien ou submit
            return;
        }

        // ================= SIGNÉ / ACCESSOIRE =================
        if (type === "signe" || type === "accessoire") {

            // Step 1 → Step 2
            if (currentStep === 1) {
                showStep(2);
                return;
            }

            // Step 2 → Step 3 (avec validation)
            if (currentStep === 2) {

                let erreurRessource = validateRessources();

                if (erreurRessource) {
                    e.preventDefault();
                    alert("Erreur : Montant incorrect (Janvier - Décembre)");
                    return;
                }

                showStep(3);
                return;
            }
        }
    });
});

    // ================= PREV BUTTON =================
    document.querySelectorAll('.prev').forEach(btn => {
    btn.addEventListener('click', () => {

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

        // ================= PERMANENT =================
        if (type === "permanent") {

            // Step 3 → Step 1
            if (currentStep === 3) {
                showStep(1);
                return;
            }

            return;
        }

        // ================= SIGNÉ / ACCESSOIRE =================
        if (type === "signe" || type === "accessoire") {

            // Step 3 → Step 2
            if (currentStep === 3) {
                showStep(2);
                return;
            }

            // Step 2 → Step 1
            if (currentStep === 2) {
                showStep(1);
                return;
            }
        }
    });
});
    // ================= 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>


@endsection