@extends('layouts.master')

    @section('title', 'Nouvel Engagement')

    @section('content')

{{-- Arrondir légèrement le tableau --}}
<style>
    .table{

    border-radius:18px;

    overflow:hidden;
}
</style>

    <style>

    /* =====================================================
    DESIGN MODERNE 2026
    ===================================================== */

    :root{

        --primary:#2563eb;
        --secondary:#4f46e5;
        --success:#16a34a;
        --danger:#dc2626;

        --dark:#0f172a;
        --text:#334155;

        --card:#ffffff;

        --border:#e2e8f0;

        --shadow:
            0 10px 30px rgba(15,23,42,.08);

    }

    /* =====================================================
    BODY
    ===================================================== */

    body{

        background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eef2ff
        );

        font-family:
        "Inter",
        sans-serif;
    }

    /* =========================================
    HEADER PREMIUM LIGHT
    ========================================= */

    /* =========================================
    HEADER ANADER PREMIUM
    ========================================= */

    .page-header{

        background:#ffffff;

        border-radius:25px;

        padding:28px 35px;

        margin-bottom:25px;

        position:relative;

        overflow:hidden;

        border:1px solid #e5e7eb;

        box-shadow:
            0 10px 25px rgba(0,0,0,.08);
    }

    /* Bande supérieure */

    .page-header::before{

        content:"";

        position:absolute;

        top:0;
        left:0;

        width:100%;
        height:6px;

        background:
            linear-gradient(
                90deg,
                #f97316 0%,
                #ffffff 50%,
                #16a34a 100%
            );
    }

    /* Bande inférieure */

    .page-header::after{

        content:"";

        position:absolute;

        bottom:0;
        left:0;

        width:100%;
        height:6px;

        background:
            linear-gradient(
                90deg,
                #f97316 0%,
                #ffffff 50%,
                #16a34a 100%
            );
    }

    .page-header h3{

        color:#1f2937;

        font-weight:700;

        margin-bottom:5px;

        letter-spacing:.5px;
    }

    .page-header small{

        color:#64748b;

        font-size:.9rem;
    }
    /* =========================================
    BOUTON NOUVEL ENGAGEMENT
    ========================================= */

    .btn-new-engagement{

        background:
        linear-gradient(
            135deg,
            #f59e0b,
            #f97316
        );

        color:white !important;

        border:none;

        border-radius:14px;

        padding:12px 22px;

        font-weight:600;

        transition:.3s;

        box-shadow:
        0 8px 20px rgba(249,115,22,.20);
    }

    .btn-new-engagement:hover{

        color:white;

        transform:translateY(-3px);

        box-shadow:
        0 12px 25px rgba(249,115,22,.30);
    }

    /* =====================================================
    HEADERS CARD
    ===================================================== */

    .card-header{

        background:white !important;

        border-bottom:1px solid #f1f5f9 !important;

        padding:22px 30px !important;
    }

    .card{ 

        border:none !important;

        border-radius:28px !important;

        overflow:hidden;

        background:white;

        box-shadow:var(--shadow);
    }

    /* =====================================================
    CARD BODY
    ===================================================== */

    .card-body{

        padding:20px;
    }

    /* =====================================================
    STEPS
    ===================================================== */

    .step{

        display:none;
    }

    .step.active{

        display:block;

        animation: fadeIn 0.9s ease;
    }

    @keyframes fadeIn{

        from{

            opacity:0;

            transform:translateY(15px);
        }

        to{

            opacity:1;

            transform:translateY(0);
        }
    }

    /* =====================================================
    LABEL
    ===================================================== */

    label{

        color:#475569;

        font-weight:600;

        margin-bottom:8px;
    }

    /* =====================================================
    INPUT
    ===================================================== */

    .form-control,
    .custom-select{

        min-height:54px;

        border-radius:16px;

        border:2px solid #e2e8f0;

        background:#fff;

        transition:.25s;
    }

    .form-control:focus,
    .custom-select:focus{

        border-color:#2563eb;

        box-shadow:
        0 0 0 4px rgba(37,99,235,.12);
    }

    /* =====================================================
    READONLY
    ===================================================== */

    .bg-readonly{

        background:#f8fafc !important;

        border-style:dashed !important;

        color:#475569;
    }

    /* =====================================================
    TABLE
    ===================================================== */

    .table{

        margin-bottom:0;
    }

    .table thead th{

    background:#f8fafc;

    color:#475569;

    font-weight:700;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.4px;

    border-bottom:2px solid #e5e7eb;

    text-align:center;

    vertical-align:middle;
}

.quantite,
.cout-unitaire{

    text-align:center;

    font-weight:600;
}
/* Pour éviter que les champs changent de taille. */
.quantite{

    width:95px;

    margin:auto;
}

.cout-unitaire{

    width:150px;

    margin:auto;
}

    .table tbody td{

        vertical-align:middle;

        padding:12px;
    }

    .table tbody tr:hover{

        background:#f8fafc;
    }

    /* =====================================================
    TABLE RESPONSIVE
    ===================================================== */

    .table-responsive{

        border-radius:20px;

        overflow:hidden;
    }

    /* =====================================================
    BUTTONS
    ===================================================== */

    .btn{

        border-radius:14px;

        font-weight:600;

        padding:10px 20px;

        border:none;
    }

    .btn-primary{

        background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

        box-shadow:
        0 8px 20px rgba(37,99,235,.20);
    }

    .btn-primary:hover{

        transform:translateY(-2px);
    }

    .btn-success{

        background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
    }

    .btn-secondary{

        background:
        linear-gradient(
            135deg,
            #64748b,
            #94a3b8
        );

        color:white;
    }

    .btn-danger{

        background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );
    }

    /* =====================================================
    FOOTER
    ===================================================== */

    .card-footer{

        background:white !important;

        border-top:1px solid #f1f5f9 !important;

        padding:20px 30px;
    }

    /* =====================================================
    BADGES
    ===================================================== */

    .badge{

        border-radius:50px;

        padding:8px 15px;

        font-size:12px;
    }

    /* =====================================================
    PROGRESS STEPS
    ===================================================== */

    .steps-indicator{

        display:flex;

        justify-content:center;

        gap:15px;

        margin-bottom:30px;
    }

    .step-circle{

        width:45px;
        height:45px;

        border-radius:50%;

        display:flex;

        align-items:center;

        justify-content:center;

        background:#e2e8f0;

        color:#64748b;

        font-weight:700;
    }

    .step-circle.active{

        background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

        color:white;
    }

    /* =====================================================
    TOTAL GENERAL
    ===================================================== */

    #totalGeneral{

        font-size:18px;

        font-weight:700;

        color:#dc2626;
    }

    /* =====================================================
    ALERT
    ===================================================== */

    .alert{

        border:none;

        border-radius:20px;
    }

    /* =====================================================
    RECAP
    ===================================================== */

    #ligne_recap_engagement{

        background:#f8fafc;
    }

    /* =====================================================
    SCROLLBAR
    ===================================================== */

    ::-webkit-scrollbar{

        height:10px;
        width:10px;
    }

    ::-webkit-scrollbar-thumb{

        background:#cbd5e1;

        border-radius:50px;
    }

    ::-webkit-scrollbar-thumb:hover{

        background:#94a3b8;
    }

    /* =========================================
    CARD ETAPE 1 - ORANGE
    ========================================= */

    .card-step1{

        border:2px solid #f97316 !important;

        border-radius:28px !important;

        overflow:hidden;

        box-shadow:
            0 10px 25px rgba(249,115,22,.15);
    }

    .card-step1 .card-header{

        background:
            linear-gradient(
                135deg,
                #f59e0b,
                #f97316
            ) !important;

        color:white !important;

        border-bottom:none !important;
    }

    .card-step1 .card-footer{

        border-top:1px solid #fed7aa !important;
    }

    /* =========================================
    ETAPE 2 - BLANC / GRIS
    ========================================= */

    .card-step2{

        border:2px solid #d1d5db !important;

        border-radius:28px !important;

        overflow:hidden;

        box-shadow:
            0 10px 25px rgba(0,0,0,.06);
    }

    .card-step2 .card-header{

        background:
            linear-gradient(
                135deg,
                #f8fafc,
                #e5e7eb
            ) !important;

        color:#374151 !important;

        border-bottom:1px solid #d1d5db !important;
    }

    .card-step2 .card-footer{

        border-top:1px solid #e5e7eb !important;
    }

    /* =========================================
    ETAPE 3 - VERT
    ========================================= */

    .card-step3{

        border:2px solid #16a34a !important;

        border-radius:28px !important;

        overflow:hidden;

        box-shadow:
            0 10px 25px rgba(22,163,74,.15);
    }

    .card-step3 .card-header{

        background:
            linear-gradient(
                135deg,
                #22c55e,
                #16a34a
            ) !important;

        color:white !important;

        border-bottom:none !important;
    }

    .card-step3 .card-footer{

        border-top:1px solid #bbf7d0 !important;
    }

    /* =========================================
    ETAPE 4 - VERT FINAL
    ========================================= */

    .card-step4{

        border:2px solid #15803d !important;

        border-radius:28px !important;

        overflow:hidden;

        box-shadow:
            0 10px 25px rgba(21,128,61,.18);
    }

    .card-step4 .card-header{

        background:
            linear-gradient(
                135deg,
                #16a34a,
                #15803d
            ) !important;

        color:white !important;

        border-bottom:none !important;
    }

    .card-step4 .card-footer{

        border-top:1px solid #bbf7d0 !important;
    }

    .btn-add-row{

        background:#6b7280;

        color:#fff;

        border:none;
    }

    .btn-add-row:hover{

        background:#4b5563;

        color:#fff;
    }

    .step {
        display: none;
        transition: all 0.5s ease;
    }

    .step.active {
        display: block;
    }

    </style>

    <style>
    .swal2-popup{
        border-top:8px solid #f97316; /* Orange */
        border-bottom:8px solid #16a34a; /* Vert */
        border-radius:20px;
    }

    .swal2-title{
        color:#f97316;
        font-weight:700;
    }

    .swal2-html-container{
        color:#374151;
        font-size:16px;
    }

    .swal2-confirm{
        background:#16a34a !important;
        border:none !important;
        border-radius:12px !important;
        padding:10px 25px !important;
        font-weight:600;
    }
    </style>

    <style>
        /* =====================================================
    MODAL ARRONDI MODERNE
    ===================================================== */

    .modal-content{
        border-radius: 24px !important;
        border: none !important;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25);
        animation: modalPop .25s ease-out;
    }

    @keyframes modalPop {
        from {
            transform: scale(0.95);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .modal-header{
        border-bottom: none !important;
        padding: 18px 25px;
    }

    .modal-body{
        padding: 25px;
    }

    .modal-footer{
        border-top: 1px solid #eef2f7;
        padding: 15px 25px;
    }

    /* Bouton fermer plus propre */
    .modal .close{
        font-size: 28px;
        opacity: 0.8;
    }

    .modal .close:hover{
        opacity: 1;
    }
    </style>

    {{-- /* surbrillance pour le telecharher et le logo */ --}}

    <style>
    .btn-download{
        width:40px;
        height:40px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:#16a34a;
        color:#fff;
        text-decoration:none;
        transition:all .3s ease;
        box-shadow:0 4px 12px rgba(22,163,74,.25);
    }

    .btn-download:hover{
        background:#15803d;
        color:#fff;
        transform:translateY(-3px) scale(1.08);
        box-shadow:0 8px 20px rgba(22,163,74,.40);
    }
    </style>

    <style>
        /* ===============================
   SELECT2 STYLE IDENTIQUE AUX INPUTS
================================== */

.select2-container{
    width:100% !important;
}

.select2-container .select2-selection--single{

    height:54px !important;

    border:2px solid #e2e8f0 !important;

    border-radius:16px !important;

    background:#fff !important;

    display:flex !important;

    align-items:center !important;

    padding:0 15px;

    transition:.25s;

}

.select2-container--default .select2-selection--single .select2-selection__rendered{

    color:#374151;

    line-height:50px !important;

    padding-left:0 !important;

}

.select2-container--default .select2-selection--single .select2-selection__arrow{

    height:52px !important;

    right:12px !important;

}

.select2-container--default.select2-container--focus .select2-selection--single{

    border-color:#2563eb !important;

    box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;

}

.select2-dropdown{

    border-radius:16px !important;

    border:2px solid #e2e8f0 !important;

    overflow:hidden;

}

.select2-search__field{

    border-radius:10px !important;

    border:1px solid #d1d5db !important;

    padding:8px 10px !important;

}

.select2-results__option{

    padding:10px 15px;

}

.select2-results__option--highlighted{

    background:#2563eb !important;

}
    </style>

    <div class="container-fluid">


        <!-- =========================================
            HEADER
        ========================================= -->

            <div class="page-header">

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

                    <div class="text-center flex-grow-1">

                        <h3 class="mb-1 text-uppercase">
                            <i class="fas fa-file-signature mr-2"></i>
                            Consolidation   
                        </h3>

                        <small>
                            ANADER – Système intégré de gestion budgétaire
                        </small>

                    </div>

                     <!-- BOUTON RETOUR CHIC -->
             
                <div>
                    <a href="{{ route('user.engagementdepenses.indexappro') }}"
                    class="btn btn-outline-secondary btn-lg shadow-sm rounded-pill px-4 transition">

                        Retour

                    </a>
                </div>
                
                </div>

            </div>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show">
                    <i class="fas fa-check-circle"></i>
                    {{ session('success') }}

                    <button
                        type="button"
                        class="close"
                        data-dismiss="alert">

                        <span>&times;</span>

                    </button>
                </div>
            @endif

        <!-- =========================================
            ERREURS
        ========================================= -->

        @if ($errors->any())

            <div class="alert alert-danger shadow-sm">

                <h6 class="font-weight-bold">
                    <i class="fas fa-exclamation-circle"></i>
                    Veuillez corriger les erreurs suivantes :
                </h6>

                <ul class="mb-0 mt-2">

                    @foreach ($errors->all() as $error)

                        <li>{{ $error }}</li>

                    @endforeach

                </ul>

            </div>

        @endif

                <!-- =====================================================
                    STEP 1 : INFORMATIONS GENERALES
                ===================================================== -->
                <form action="{{ route('user.consolidations.store') }}"
                    method="POST"
                    enctype="multipart/form-data">

                    @csrf
                        <div class="step active readonly" id="step1">

    <div class="card card-step1 mb-4">

        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-info-circle"></i>
                Informations Générales
            </h5>
        </div>

        <div class="card-body">

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

                <!-- Exercice -->
                <div class="col-md-4 mb-3">
                    <label>Exercice</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional(optional($engagement->budgetdepense)->besoinbudgetaire)->exercice }}"
                        readonly>
                </div>

                <!-- Code Budget -->
                <div class="col-md-4 mb-3">
                    <label>Code Budget</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional(optional($engagement->budgetdepense)->besoinbudgetaire)->code_budget }}"
                        readonly>
                </div>

                 <!-- Nom Budget -->
                <div class="col-md-4 mb-3">
                    <label>Nom Budget</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional(optional($engagement->budgetdepense)->besoinbudgetaire)->nom_budget }}"
                        readonly>
                </div>

            </div>

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

                <!-- Activité -->
                <div class="col-md-4 mb-3">
                    <label>Activité</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional($engagement->budgetdepense)->activite }}"
                        readonly>
                </div>

                 <!-- Nom Budget -->
                <div class="col-md-4 mb-3">
                    <label>Nature de la dépense</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional(optional($engagement->budgetdepense)->besoinbudgetaire)->nom_budget }}"
                        readonly>
                </div>

                 <!-- Nom Budget -->
                <div class="col-md-4 mb-3">
                    <label>Compte SYSCOHADA</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional(optional($engagement->budgetdepense)->besoinbudgetaire)->nom_budget }}"
                        readonly>
                </div>

            </div>

            <!-- =========================
                LIGNE 3
            ========================== -->
            <div class="row">


                 <!-- Nom Budget -->
                <div class="col-md-4 mb-3">
                    <label>Date de saisie</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional($engagement->created_at)->format('d/m/Y') }}"
                        readonly>
                </div>

                <!-- Direction -->
                <div class="col-md-4 mb-3">
                    <label>Direction</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional($engagement->direction)->code }} - {{ optional($engagement->direction)->libelle }}"
                        readonly>
                </div>


              <!-- Centre de responsabilité -->
                <div class="col-md-4 mb-3">
                    <label>Centre de responsabilité</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ optional($engagement->centrerespo)->code }} - {{ optional($engagement->centrerespo)->libelle_long }}"
                        readonly>
                </div>

            </div>

            <!-- =========================
                LIGNE 4
            ========================== -->
            <div class="row">

              <!-- Numéro BR -->
                <div class="col-md-6 mb-3">
                    <label>Numéro BR</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ $engagement->numero_br }}"
                        readonly>
                </div>

                <!-- Date du besoin -->
                <div class="col-md-6 mb-3">
                    <label>Date du besoin</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ $engagement->date_besoin }}"
                        readonly>
                </div>

            </div>

            <!-- =========================
                LIGNE 5
            ========================== -->
            <div class="row">

                  <!-- Niveau d'urgence -->
                <div class="col-md-6 mb-3">
                    <label>Niveau d'urgence</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ ucfirst($engagement->niveau_urgence) }}"
                        readonly>
                </div>

                <!-- Responsable -->
                <div class="col-md-6 mb-3">
                    <label>Responsable</label>
                    <input type="text"
                        class="form-control bg-readonly"
                        value="{{ $engagement->responsable }}"
                        readonly>
                </div>


            </div>

            <!-- =========================
                LIGNE 6
            ========================== -->

        </div> 

                        <!-- FOOTER STEP -->
                        <div class="card-footer">

                            <div class="step-footer text-end">

                                <button type="button" class="btn btn-primary next">
                                    Suivant
                                </button>

                            </div>

                        </div>

                    </div>

                </div>
                         
                <!-- =====================================================
                    STEP 2 : IMPUTATION BUDGETAIRE
                ===================================================== -->
              <div class="step readonly" id="step2">

    <div class="card card-step2 mb-4">

        <div class="card-header">   

            <h5 class="mb-0">
                <i class="fas fa-shopping-cart mr-2"></i>
                Imputation budgétaire
            </h5>

        </div>

        <d class="card-body">

            <!-- =========================
                LIGNE 1
            ========================== -->

            <div class="row">



                <!-- Compte SYSCOHADA -->
                <div class="col-md-4 mb-3">

                    <label class="font-weight-bold">
                        Compte SYSCOHADA
                    </label>

                    <input
                        type="text"
                        class="form-control bg-readonly"
                        value="{{ optional($ligne->comptesyscohada)->code }} - {{ optional($ligne->comptesyscohada)->libelle }}"
                        readonly>

                </div>

                <!-- Poste -->
                <div class="col-md-4 mb-3">

                    <label class="font-weight-bold">
                        Poste de gestion
                    </label>

                    <input
                        type="text"
                        class="form-control bg-readonly"
                        value="{{ optional($ligne->postegestion)->code }} - {{ optional($ligne->postegestion)->libelle }}"
                        readonly>

                </div>

                 <div class="col-md-4 mb-3">

                    <label class="font-weight-bold text-success">

                        <i class="fas fa-coins mr-1"></i>

                        Montant disponible

                    </label>

                    <input
                        type="hidden"
                        id="montant"
                        name="montant"
                        value="{{ $ligne->montant }}">

                    <input
                        type="text"
                        class="form-control bg-readonly text-center"
                        value="{{ number_format($ligne->montant,0,',',' ') }} FCFA"
                        readonly
                        style="
                            background:#fff8e6;
                            font-size:20px;
                            font-weight:bold;
                            color:#d97706;
                        ">

                </div>

            </div>

        </div>

    <!-- ==========================================================
        CARTE 2 : DETAILS DE LA DEPENSE
    =========================================================== -->

  <div class="card card-step2 mb-4">

    <div class="card-header">

        <h5 class="mb-0">

            <i class="fas fa-list-alt mr-2"></i>

            Détails de la dépense

        </h5>

    </div>

    <div class="card-body">

        <div class="table-responsive">

            <table
                class="table table-bordered table-hover align-middle"
                id="depenseTable">

                <thead class="bg-light">

                <tr class="text-center">

                    <th style="width:20%;">
                        Désignation
                    </th>

                    <th style="width:25%;">
                        Détails
                    </th>

                    <th style="width:12%;" class="text-center">
                        Nombre
                    </th>

                    <th style="width:12%;" class="text-center">
                        Quantité
                    </th>

                    <th style="width:15%;" class="text-center">
                        Coût unitaire (FCFA)
                    </th>

                    <th style="width:16%;" class="text-center">
                        Montant (FCFA)
                    </th>

                </tr>

            </thead>

                <tbody>

                    @forelse($engagement->engagementdetails as $detail)

                        <tr>

                            <!-- Description -->
                            <td>

                                <strong>
                                    {{ $detail->designation }}
                                </strong>

                            </td>

                            <!-- Détails -->
                            <td>

                                {{ $detail->details ?? 'N/A' }}

                            </td>

                            <!-- Nombre -->
                            <td>

                                <input
                                    type="number"
                                    min="1"
                                    name="nombre[]"
                                    class="form-control text-center nombre"
                                    value="{{ $detail->nombre ?? 1 }}">

                            </td>

                            <!-- Quantité -->
                            <td>

                                <input
                                    type="number"
                                    min="1"
                                    name="quantite[]"
                                    class="form-control text-center quantite"
                                    value="{{ $detail->quantite }}">

                            </td>

                            <!-- Coût unitaire -->
                            <td>

                                <input
                                    type="number"
                                    min="0"
                                    step="0.01"
                                    name="cout_unitaire[]"
                                    class="form-control cout-unitaire"
                                    placeholder="0">

                            </td>

                            <!-- Montant -->
                            <td>

                                <input
                                    type="text"
                                    name="montant[]"
                                    class="form-control text-center montant bg-readonly"
                                    value="0"
                                    readonly>
                            </td>




                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="5"
                                class="text-center text-muted py-4">

                                <i class="fas fa-info-circle mr-2"></i>

                                Aucun détail de dépense disponible.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        <!-- =========================
            TOTAUX
        ========================== -->

        <div class="row mt-4">

            <!-- TOTAL ENGAGE -->
            <div class="col-md-6 mb-3">

                <div class="card border-0 shadow-sm">

                    <div class="card-body text-center">

                        <small class="text-muted font-weight-bold">

                            <i class="fas fa-calculator text-warning mr-1"></i>

                            TOTAL ENGAGÉ

                        </small>

                        <div
                            id="totalMontantEngage"
                            class="mt-3 px-4 py-3 rounded-pill"
                            style="
                                background:linear-gradient(135deg,#f59e0b,#f97316);
                                color:#fff;
                                font-size:24px;
                                font-weight:bold;
                                box-shadow:0 5px 15px rgba(245,158,11,.35);
                            ">

                            0 FCFA

                        </div>

                    </div>

                </div>

            </div>

            <!-- TOTAL RESTANT -->
            <div class="col-md-6 mb-3">

                <div class="card border-0 shadow-sm">

                    <div class="card-body text-center">

                        <small class="text-muted font-weight-bold">

                            <i class="fas fa-wallet text-success mr-1"></i>

                            MONTANT RESTANT

                        </small>

                        <div
                            id="totalMontantRestant"
                            class="mt-3 px-4 py-3 rounded-pill"
                            style="
                                background:linear-gradient(135deg,#16a34a,#22c55e);
                                color:#fff;
                                font-size:24px;
                                font-weight:bold;
                                box-shadow:0 5px 15px rgba(34,197,94,.35);
                            ">

                            0 FCFA

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Champs cachés -->

        <input
            type="hidden"
            id="montantEngage"
            name="montantEngage">

        <input
            type="hidden"
            id="montantRestant"
            name="montantRestant">

        <input
            type="hidden"
            name="engagementdepense_id"
            value="{{ $engagement->id }}">

        

    </div>

    <!-- FOOTER -->

    <div class="card-footer d-flex justify-content-between">

        <button
            type="button"
            class="btn btn-secondary prev">

            Précédent

        </button>

        <button
            type="button"
            class="btn btn-success next">

            Suivant

        </button>

    </div>

</div>
</div>
                <!-- =====================================================
                    STEP 3 : DOCUMENTS
                ===================================================== -->

<div class="step readonly" id="step3">

    <div class="card card-step3 mb-4">

        <!-- =====================================================
             HEADER
        ====================================================== -->

        <div class="card-header">

            <h5 class="mb-0">

                <i class="fas fa-paperclip mr-2"></i>

                Pièces justificatives

            </h5>

        </div>


        <!-- =====================================================
             CORPS
        ====================================================== -->

        <div class="card-body">

           {{-- =========================================================
     DOCUMENT JUSTIFICATIF / BESOIN ORDINAIRE
========================================================= --}}

<div class="row">

    {{-- =================================================
         TDR / JUSTIFICATIF
    ================================================== --}}

    <div class="col-md-6 mb-4">

        <h6 class="font-weight-bold text-primary mb-3">

            <i class="fas fa-file-alt mr-2"></i>

            TDR / Justificatif

        </h6>


        <div class="card shadow-sm border h-100">

            <div class="card-body">


                {{-- =================================================
                     TYPE
                ================================================== --}}

                <div class="form-group">

                    <label class="font-weight-bold">
                        Type
                    </label>

                    <input
                        type="text"
                        class="form-control bg-light"
                        value="{{
                            !empty($engagement->numero_document)
                                ? 'TDR / Justificatif'
                                : (
                                    !empty($engagement->besoin_ordinaire)
                                        ? 'Besoin ordinaire'
                                        : 'Non renseigné'
                                )
                        }}"
                        readonly
                    >

                </div>


                {{-- =================================================
                     NUMÉRO DOCUMENT / BESOIN ORDINAIRE
                ================================================== --}}

                <div class="form-group">

                    <label class="font-weight-bold">

                        N° du document / Besoin ordinaire

                    </label>

                    <input
                        type="text"
                        class="form-control bg-light"
                        value="{{
                            $engagement->numero_document
                                ?: $engagement->besoin_ordinaire
                                ?: 'Non renseigné'
                        }}"
                        readonly
                    >

                </div>


                {{-- =================================================
                     RÉFÉRENCE
                ================================================== --}}

                <div class="form-group mb-0">

                    <label class="font-weight-bold">

                        Référence

                    </label>

                    <input
                        type="text"
                        class="form-control bg-light"
                        value="{{ $engagement->reference_document ?? 'Non générée' }}"
                        readonly
                    >

                </div>


            </div>

        </div>

    </div>



    {{-- =================================================
         DEVIS / PROFORMA
         ON GARDE LA SÉLECTION DU FICHIER
    ================================================== --}}

    <div class="col-md-6 mb-4">

        <h6 class="font-weight-bold text-primary mb-3">

            <i class="fas fa-file-invoice-dollar mr-2"></i>

            Devis / Proforma

        </h6>


        <div class="card shadow-sm border h-100">

            <div class="card-body">


                <label
                    for="proforma"
                    class="font-weight-bold"
                >

                    Ajouter le devis / Proforma

                </label>


                {{-- =================================================
                     SÉLECTION DU FICHIER
                     NE PAS SUPPRIMER
                ================================================== --}}

                <input
                    type="file"
                    name="documents[proforma]"
                    id="proforma"
                    class="form-control"
                    accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                >


                <small class="text-muted d-block mt-2">

                    Veuillez joindre le devis ou la facture
                    pro-forma correspondant à cet engagement.

                </small>


                {{-- =================================================
                     ERREUR DE VALIDATION
                ================================================== --}}

                @error('documents.proforma')

                    <small class="text-danger d-block mt-2">

                        {{ $message }}

                    </small>

                @enderror


                {{-- =================================================
                     FICHIER DÉJÀ ENREGISTRÉ
                ================================================== --}}

                @if(
                    isset($engagement) &&
                    $engagement->engagementdocuments
                        ->where('type_document', 'proforma')
                        ->count()
                )

                    @php

                        $proforma = $engagement
                            ->engagementdocuments
                            ->where('type_document', 'proforma')
                            ->first();

                    @endphp


                    <div class="mt-3">

                        <label class="font-weight-bold">

                            Proforma actuellement enregistré

                        </label>


                        <div
                            class="d-flex align-items-center justify-content-between bg-light border rounded p-3"
                        >

                            <span>

                                <i class="fas fa-file-invoice mr-2 text-success"></i>

                                {{ $proforma->nom_fichier ?? 'Facture / Devis proforma' }}

                            </span>


                            @if($proforma->chemin_fichier)

                                <a
                                    href="{{ asset(
                                        'storage/' .
                                        $proforma->chemin_fichier
                                    ) }}"
                                    target="_blank"
                                    class="btn btn-outline-success btn-sm"
                                >

                                    <i class="fas fa-eye mr-1"></i>

                                    Voir

                                </a>

                            @endif

                        </div>

                    </div>

                @endif


            </div>

        </div>

    </div>

</div>


            <!-- =================================================
                 INFORMATION
            ================================================== -->

            <div class="alert alert-light border mt-2">

                <i class="fas fa-info-circle text-primary mr-2"></i>

                <strong>Information :</strong>

                Le numéro et la référence du TDR / justificatif
                sont déjà enregistrés avec l'engagement.
                Le devis / proforma doit être ajouté comme pièce
                justificative de la dépense.

            </div>

        </div>


        <!-- =====================================================
             FOOTER
        ====================================================== -->

        <div class="card-footer d-flex justify-content-between align-items-center">

            <!-- Bouton précédent -->

            <button
                type="button"
                class="btn btn-secondary prev"
            >

                <i class="fas fa-arrow-left mr-1"></i>

                Précédent

            </button>


            <!-- Bouton validation -->

            <button
                type="submit"
                name="action"
                value="brouillon"
                class="btn btn-success"
            >

                <i class="fas fa-check-circle mr-1"></i>

                Valider

            </button>

        </div>

    </div>

</div>

        </form>

    </div>

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

    let currentStep = 1;
    const steps = document.querySelectorAll(".step");

    function showStep(step) {

        steps.forEach(el => el.classList.remove("active"));

        const target = document.getElementById(`step${step}`);

        if (!target) return;

        target.classList.add("active");
        currentStep = step;
    }

    document.querySelectorAll(".next").forEach(btn => {
        btn.addEventListener("click", () => {
            showStep(currentStep + 1);
        });
    });

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

    showStep(1);

    function showStep(step) {

    const target = document.getElementById("step" + step);

    if (!target) return;

    document.querySelectorAll(".step").forEach(el => el.classList.remove("active"));

    target.classList.add("active");

    currentStep = step;
}
});
</script>

<script>
$(document).ready(function () {

    // Initialisation de Select2
    $('#fournisseurSelect').select2({
        placeholder: "Rechercher un fournisseur...",
        allowClear: true,
        width: '100%'
    });

    // Fonction qui ouvre le modal
    function afficherModalFournisseur() {

        let option = $('#fournisseurSelect').find(':selected');

        if (!option.val()) return;

        $('#modalNom').text(option.text().trim());

        $('#modalDirection').text(
            option.data('direction') || '-'
        );

        $('#modalCentre').text(
            option.data('centre') || '-'
        );

        $('#modalEntite').text(
            option.data('entite') || '-'
        );

        $('#fournisseurModal').modal('show');
    }

    // Cas 1 : sélection après une recherche
    $('#fournisseurSelect').on('select2:select', function () {
        afficherModalFournisseur();
    });

    // Cas 2 : sélection sans recherche
    $('#fournisseurSelect').on('change', function () {
        afficherModalFournisseur();
    });

});
</script>
<script>
$(document).ready(function () {

    $('#natureSelect').change(function () {

        let id = $(this).val();

        if (!id) {
            $('#comptesyscohada').val('');
            $('#postegestion').val('');
            $('#montant').val('');
            return;
        }

        $.get('/budgetdepenses/nature/' + id, function (data) {

            console.log(data);

            // SYSCOHADA (CORRIGÉ)
            $('#comptesyscohada').val(
                data.comptesyscohada
                    ? (data.comptesyscohada.code + ' - ' + data.comptesyscohada.libelle)
                    : ''
            );

            // POSTE DE GESTION
            $('#postegestion').val(
                data.postegestion
                   ? (data.postegestion.code + ' - ' + data.postegestion.libelle)
                    : ''
            );

            // MONTANT
           $('#montant').val(data.montant); // valeur brute 

            $('#montantAffiche').val(
                formatMontant(data.montant) + ' FCFA'
            );

        });

    });

});
</script>

<script>

function formatMontant(nombre)
{
    return new Intl.NumberFormat('fr-FR').format(nombre);
}

function valeurNumerique(valeur)
{
    if (!valeur) return 0;

    valeur = valeur.toString();

    // supprimer les espaces
    valeur = valeur.replace(/\s/g, '');

    // remplacer la virgule décimale par un point
    valeur = valeur.replace(',', '.');

    return parseFloat(valeur) || 0;
}

</script>

<script>
    $(document).ready(function () {

    $('#fournisseurSelect').select2({

        placeholder: "Rechercher un fournisseur...",

        allowClear: true,

        width: '100%',

        language: {

            noResults: function () {
                return "Aucun fournisseur trouvé";
            }

        }

    });

});
</script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>

function formatMontant(nombre)
{
    return new Intl.NumberFormat('fr-FR').format(nombre);
}

function valeurNumerique(valeur)
{
    if (!valeur) return 0;

    valeur = valeur.toString();

    // supprimer les espaces
    valeur = valeur.replace(/\s/g, '');

    // remplacer les virgules par des points
    valeur = valeur.replace(',', '.');

    return parseFloat(valeur) || 0;
}

function calculerTotaux()
{
    // Montant disponible
    let montantDisponible = valeurNumerique(
        document.getElementById('montant').value
    );

    let totalEngage = 0;

    // Calcul de chaque ligne
    document.querySelectorAll('#depenseTable tbody tr').forEach(function(row){

        let qteInput = row.querySelector('.nombre');
        let quantiteInput = row.querySelector('.quantite');
        let coutInput = row.querySelector('.cout-unitaire');

        if(!qteInput || !quantiteInput || !coutInput){
            return;
        }
        let nombre = valeurNumerique(qteInput.value);
        let quantite = valeurNumerique(quantiteInput.value);
        let coutUnitaire = valeurNumerique(coutInput.value);

        totalEngage += (nombre * quantite * coutUnitaire);

    });

   // =============================================
// CONTRÔLE : LE TOTAL ENGAGÉ NE DOIT PAS
// DÉPASSER LE MONTANT DISPONIBLE
// =============================================

let montantRestant = montantDisponible - totalEngage;

// Boutons à bloquer
const btnSuivant = document.querySelector('#step2 .next');
const btnValider = document.querySelector('button[type="submit"]');

if (totalEngage > montantDisponible) {

    // Carte Total engagé en rouge
    document.getElementById('totalMontantEngage').style.background =
        'linear-gradient(135deg,#dc2626,#ef4444)';

    // Le restant est forcé à 0
    montantRestant = 0;

    // Blocage des boutons
    if (btnSuivant) btnSuivant.disabled = true;
    if (btnValider) btnValider.disabled = true;

    // Une seule alerte
    if (!window.depassementMontant) {

        window.depassementMontant = true;

        Swal.fire({
            icon: 'error',
            title: 'Oupssss 😅',
            html: `
                <b>Le montant engagé dépasse le montant disponible.</b><br><br>
                Veuillez diminuer les coûts unitaires ou les quantités avant de continuer.
            `,
            confirmButtonText: 'Compris',
            confirmButtonColor: '#dc2626'
        });

    }

} else {

    // Couleur normale
    document.getElementById('totalMontantEngage').style.background =
        'linear-gradient(135deg,#f59e0b,#f97316)';

    // Réactivation des boutons
    if (btnSuivant) btnSuivant.disabled = false;
    if (btnValider) btnValider.disabled = false;

    window.depassementMontant = false;
}

    // Cartes récapitulatives
    document.getElementById('totalMontantEngage').innerHTML =
        formatMontant(totalEngage) + ' FCFA';

    document.getElementById('totalMontantRestant').innerHTML =
        formatMontant(montantRestant) + ' FCFA';

    // Champs cachés / formulaire
    document.getElementById('montantEngage').value =
        formatMontant(totalEngage);

    document.getElementById('montantRestant').value =
        formatMontant(montantRestant);
}

// Déclenchement automatique
document.addEventListener('input', function(e){

    if(
        e.target.classList.contains('quantite') ||
        e.target.classList.contains('cout-unitaire')
    ){
        calculerTotaux();
    }

});

// Premier calcul au chargement
document.addEventListener('DOMContentLoaded', function(){

    calculerTotaux();

});

</script>

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

    // =========================================================
    // CALCUL DU MONTANT D'UNE LIGNE
    // Montant = Nombre × Quantité × Coût unitaire
    // =========================================================

    function calculerMontant(ligne) {

        const nombreInput = ligne.querySelector('input[name="nombre[]"]');
        const quantiteInput = ligne.querySelector('input[name="quantite[]"]');
        const coutUnitaireInput = ligne.querySelector('input[name="cout_unitaire[]"]');
        const montantInput = ligne.querySelector('input[name="montant[]"]');


        // Vérification
        if (
            !nombreInput ||
            !quantiteInput ||
            !coutUnitaireInput ||
            !montantInput
        ) {
            return;
        }


        // Récupération des valeurs
        const nombre = parseFloat(nombreInput.value) || 0;
        const quantite = parseFloat(quantiteInput.value) || 0;
        const coutUnitaire = parseFloat(coutUnitaireInput.value) || 0;


        // =====================================================
        // CALCUL
        // =====================================================

        const montant = nombre * quantite * coutUnitaire;


        // =====================================================
        // AFFICHAGE
        // =====================================================

        montantInput.value = montant.toLocaleString('fr-FR', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });

    }


    // =========================================================
    // CALCUL POUR TOUTES LES LIGNES EXISTANTES
    // =========================================================

    function calculerTousLesMontants() {

        const lignes = document.querySelectorAll(
            '#depenseBody tr'
        );

        lignes.forEach(function (ligne) {

            calculerMontant(ligne);

        });

    }


    // =========================================================
    // ÉCOUTE DES MODIFICATIONS
    // =========================================================

    document.addEventListener('input', function (event) {

        if (
            event.target.matches('input[name="nombre[]"]') ||
            event.target.matches('input[name="quantite[]"]') ||
            event.target.matches('input[name="cout_unitaire[]"]')
        ) {

            const ligne = event.target.closest('tr');

            if (ligne) {

                calculerMontant(ligne);

            }

        }

    });


    // =========================================================
    // CALCUL AU CHARGEMENT DE LA PAGE
    // =========================================================

    calculerTousLesMontants();

});
</script>
@endsection