@extends('layouts.master')

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

    @section('content')

    <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:#f3f4f6;

        color:#374151;

        border-bottom:2px solid #d1d5db;
    }

    .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>

    <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>
                            Modification de la 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.update', $consolidation->id ?? null) }}"
                method="POST">

                @csrf
                @method('PUT')

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

                                <div class="row">

    <!-- Exercice -->
    <div class="col-md-4 mb-3">
        <label class="font-weight-bold">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 class="font-weight-bold">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 class="font-weight-bold">Nom du Budget</label>

        <input type="text"
               class="form-control bg-readonly"
               value="{{ optional(optional($engagement->budgetdepense)->besoinbudgetaire)->nom_budget }}"
               readonly>
    </div>

</div>


<div class="row">

    <!-- Activité -->
    <div class="col-md-4 mb-3">
        <label class="font-weight-bold">Activité</label>

        <input type="text"
               class="form-control bg-readonly"
               value="{{ optional($engagement->budgetdepense)->activite }}"
               readonly>
    </div>


    <!-- Nature -->
    <div class="col-md-4 mb-3">
        <label class="font-weight-bold">Nature</label>

        <input type="text"
               class="form-control bg-readonly"
               value="{{ optional($engagement->budgetdepense)->nature }}"
               readonly>
    </div>


    <!-- Compte -->
    <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(optional($engagement->budgetdepense)->comptesyscohada)->code }} - {{ optional(optional($engagement->budgetdepense)->comptesyscohada)->libelle }}"
               readonly>
    </div>

</div>

<div class="row">

<!-- Date saisie -->
    <div class="col-md-4 mb-3">
        <label class="font-weight-bold">Date de saisie</label>

        <input type="date"
               class="form-control bg-readonly"
               value="{{ $engagement->created_at ? $engagement->created_at->format('Y-m-d') : date('Y-m-d') }}"
               readonly>
    </div>

    <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>

        
                                <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 1 -->
                                <div class="row">

                                <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>

                                <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 2 -->
                            <div class="row">

                              

                                

                            </div>

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

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

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


                            </div>

                        </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">

        <!-- HEADER STEP 2 -->
        <div class="card-header d-flex justify-content-between">

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

        </div>


        <!-- BODY STEP 2 -->
        <div class="card-body">

            {{-- =====================================================
                BLOC UNIQUE : IMPUTATION + CONSOLIDATION
            ====================================================== --}}

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

                <div class="card-body">

                    @php

                        $budget = $consolidation->budgetdepense;

                        $compte = optional($budget)->comptesyscohada;

                        $poste = optional($budget)->postegestion;

                        $montant = $consolidation->montant ?? 0;

                    @endphp


                    <div class="row">

                        {{-- COMPTE SYSCOHADA --}}
                        <div class="col-md-4 mb-3">

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

                            <input
                                class="form-control bg-white text-truncate"
                                readonly
                                value="{{ $compte ? $compte->code.' - '.$compte->libelle : 'Non défini' }}"
                            >

                        </div>


                        {{-- POSTE GESTION --}}
                        <div class="col-md-4 mb-3">

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

                            <input
                                class="form-control bg-white text-truncate"
                                readonly
                                value="{{ $poste ? $poste->code.' - '.$poste->libelle : 'Non défini' }}"
                            >

                        </div>


                        {{-- MONTANT DISPONIBLE --}}
                        <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"
                                name="montant"
                                value="{{ $montant }}"
                            >


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

                        </div>

                    </div>

                </div>

            </div>


            {{-- =====================================================
                DETAILS DE LA DEPENSE
            ====================================================== --}}

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

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

                    <h5 class="mb-0">

                        <i class="fas fa-shopping-cart"></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>

                                <tr>

                                    <th width="25%">
                                        Désignation
                                    </th>

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

                                    <th width="15%">
                                        Nombre
                                    </th>

                                    <th width="15%" class="text-center">
                                        Quantité
                                    </th>

                                    <th width="25%" class="text-center">
                                        Coût unitaire (FCFA)
                                    </th>

                                    <th width="25%" class="text-center">
                                        Montant calculé (FCFA)
                                    </th>

                                </tr>

                            </thead>


                            <tbody>

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

                                    @php

                                        $totalLigne =
                                            ($detail->nombre ?? 0)
                                            * ($detail->quantite ?? 0)
                                            * ($detail->cout_unitaire ?? 0);


                                        $designation =
                                            $detail->designation
                                            ?? $detail->Designation
                                            ?? '';


                                        $details =
                                            $detail->details
                                            ?? $detail->Details
                                            ?? '';

                                    @endphp


                                    <tr>

                                        {{-- DESIGNATION --}}
                                        <td>

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

                                        </td>


                                        {{-- DETAILS --}}
                                        <td>

                                            {{ $details }}

                                        </td>


                                        {{-- NOMBRE --}}
                                        <td class="text-center">

                                            {{ $detail->nombre ?? 0 }}

                                        </td>


                                        {{-- QUANTITE --}}
                                        <td>

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

                                        </td>


                                        {{-- COUT UNITAIRE --}}
                                        <td>

                                            <input
                                                type="number"
                                                min="0"
                                                step="0.01"
                                                name="cout_unitaire[]"
                                                class="form-control cout-unitaire text-center"
                                                value="{{ $detail->cout_unitaire ?? 0 }}"
                                            >

                                        </td>


                                        {{-- MONTANT CALCULE --}}
                                        <td class="text-center">

                                            <span class="montant-ligne">
                                                {{ number_format($totalLigne,0,',',' ') }}
                                                FCFA
                                            </span>


                                            <input
                                                type="hidden"
                                                name="montant_ligne[]"
                                                class="montant-ligne-input"
                                                value="{{ $totalLigne }}"
                                            >

                                        </td>

                                    </tr>


                                @empty

                                    <tr>

                                        <td
                                            colspan="6"
                                            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>

                </div>

            </div>


            {{-- =====================================================
                TOTAUX
            ====================================================== --}}

            <div class="row mt-3">

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

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

                        <div class="card-body py-3 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-2 px-4 py-2 rounded-pill d-inline-block"
                                style="
                                    background:linear-gradient(135deg,#f59e0b,#f97316);
                                    color:#fff;
                                    font-size:22px;
                                    font-weight:bold;
                                "
                            >

                                {{ number_format($consolidation->montant_engage ?? 0,0,',',' ') }}
                                FCFA

                            </div>

                        </div>

                    </div>

                </div>


                {{-- MONTANT RESTANT --}}
                <div class="col-md-6 mb-3">

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

                        <div class="card-body py-3 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-2 px-4 py-2 rounded-pill d-inline-block"
                                style="
                                    background:linear-gradient(135deg,#16a34a,#22c55e);
                                    color:#fff;
                                    font-size:22px;
                                    font-weight:bold;
                                "
                            >

                                {{ number_format($consolidation->montant_restant ?? 0,0,',',' ') }}
                                FCFA

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- CHAMPS CACHES --}}
            <input
                type="hidden"
                id="montant"
                name="montant"
                value="{{ $consolidation->montant }}"
            >

            <input
                type="hidden"
                id="montantEngage"
                name="montant_engage"
                value="{{ $consolidation->montant_engage }}"
            >

            <input
                type="hidden"
                id="montantRestant"
                name="montant_restant"
                value="{{ $consolidation->montant_restant }}"
            >

        </div>
        <!-- FIN BODY STEP 2 -->


        <!-- FOOTER STEP 2 -->
        <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>
        <!-- FIN FOOTER STEP 2 -->

    </div>
    <!-- FIN CARD STEP 2 -->

</div>
<!-- FIN STEP 2 -->



<!-- =====================================================
    STEP 3 : DOCUMENTS
===================================================== -->
<div class="step" id="step3">

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


        {{-- =====================================================
            HEADER STEP 3
        ====================================================== --}}

        <div class="card-header">

            <h5 class="mb-0">

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

                Pièces Jointes

            </h5>

        </div>


        {{-- =====================================================
            BODY STEP 3
        ====================================================== --}}

        <div class="card-body">


            {{-- =====================================================
                TYPE DE DOCUMENT
            ====================================================== --}}

            <div class="row mb-4">


                {{-- TYPE --}}
                <div class="col-md-4">

                    <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>


                {{-- =================================================
                    N° DOCUMENT / BESOIN ORDINAIRE
                ================================================== --}}

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

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

                        N° du document / Besoin

                    </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="col-md-4">

                    <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>


            {{-- =====================================================
                FACTURE / DEVIS PROFORMA MODIFIABLE
            ====================================================== --}}

            <div class="row mb-4">

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

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

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

            Facture / Devis proforma

        </label>


        {{-- =================================================
            PROFORMA EXISTANT
        ================================================== --}}

        @php

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

        @endphp


        @if($proforma)

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

                <div>

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

                    <strong>

                        {{ $proforma->nom_fichier ?? 'Proforma enregistré' }}

                    </strong>

                </div>


                @if($proforma->chemin_fichier)

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

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

                        Voir

                    </a>

                @endif

            </div>

        @else

            <div class="alert alert-secondary">

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

                Aucun devis / facture proforma enregistré.

            </div>

        @endif


        {{-- =================================================
            SÉLECTION DU NOUVEAU PROFORMA
        ================================================== --}}

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

            Vous pouvez ajouter ou remplacer
            la facture / le devis proforma.

        </small>


        @error('documents.proforma')

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

                {{ $message }}

            </small>

        @enderror

    </div>

</div>


        {{-- =====================================================
            FOOTER STEP 3
        ====================================================== --}}

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


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

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

                Précédent

            </button>


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

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

                Valider

            </button>


        </div>
        {{-- FIN FOOTER STEP 3 --}}


    </div>
    {{-- FIN CARD STEP 3 --}}


</div>
{{-- FIN STEP 3 --}}


</form>

    </div>


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

    let currentStep = 1;

    const steps = document.querySelectorAll(".step");


    function showStep(step) {

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

        if (!target) {
            return;
        }


        steps.forEach(function (el) {

            el.classList.remove("active");

        });


        target.classList.add("active");

        currentStep = step;


        /*
        |------------------------------------------------------
        | Remonter en haut de la page à chaque changement
        | d'étape
        |------------------------------------------------------
        */

        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });

    }


    /*
    |----------------------------------------------------------
    | BOUTONS SUIVANT
    |----------------------------------------------------------
    */

    document.querySelectorAll(".next").forEach(function (btn) {

        btn.addEventListener("click", function () {

            if (currentStep < 3) {

                showStep(currentStep + 1);

            }

        });

    });


    /*
    |----------------------------------------------------------
    | BOUTONS PRÉCÉDENT
    |----------------------------------------------------------
    */

    document.querySelectorAll(".prev").forEach(function (btn) {

        btn.addEventListener("click", function () {

            if (currentStep > 1) {

                showStep(currentStep - 1);

            }

        });

    });


    /*
    |----------------------------------------------------------
    | INITIALISATION
    |----------------------------------------------------------
    */

    showStep(1);

});
</script>

<script>

$(document).ready(function () {

    /*
    |--------------------------------------------------------------------------
    | CALCUL INITIAL
    |--------------------------------------------------------------------------
    */

    calculerTotaux();

});


/*
|--------------------------------------------------------------------------
| FORMATAGE DES MONTANTS
|--------------------------------------------------------------------------
*/

function formatMontant(nombre)
{
    nombre = valeurNumerique(nombre);

    return new Intl.NumberFormat('fr-FR', {
        maximumFractionDigits: 0
    }).format(nombre);
}


/*
|--------------------------------------------------------------------------
| CONVERSION EN NOMBRE
|--------------------------------------------------------------------------
*/

function valeurNumerique(valeur)
{
    if (
        valeur === null ||
        valeur === undefined ||
        valeur === ''
    ) {
        return 0;
    }

    valeur = valeur.toString().trim();

    /*
    |--------------------------------------------------------------------------
    | Supprimer les espaces
    |--------------------------------------------------------------------------
    */

    valeur = valeur.replace(/\s/g, '');
    valeur = valeur.replace(/\u00A0/g, '');

    /*
    |--------------------------------------------------------------------------
    | Remplacer virgule par point
    |--------------------------------------------------------------------------
    */

    valeur = valeur.replace(',', '.');

    return parseFloat(valeur) || 0;
}


/*
|--------------------------------------------------------------------------
| CALCUL DU MONTANT D'UNE LIGNE
|--------------------------------------------------------------------------
|
| Formule :
|
| Nombre × Quantité × Coût unitaire
|
*/

function calculerMontantLigne($ligne)
{

    /*
    |--------------------------------------------------------------------------
    | NOMBRE
    |--------------------------------------------------------------------------
    |
    | Dans ton HTML actuel, "Nombre" est affiché directement
    | dans la troisième colonne :
    |
    | <td class="text-center">
    |     {{ $detail->nombre }}
    | </td>
    |
    | Donc on récupère d'abord la valeur dans .nombre si elle existe.
    | Sinon on récupère le texte de la 3ème colonne.
    |
    */

    let nombre = 0;

    const champNombre = $ligne.find('.nombre');


    if (champNombre.length > 0) {

        /*
        | Si Nombre est un input
        */

        nombre = valeurNumerique(
            champNombre.val()
        );

    } else {

        /*
        | Sinon, lecture directe de la 3ème colonne
        */

        nombre = valeurNumerique(
            $ligne.find('td:nth-child(3)').text()
        );

    }


    /*
    |--------------------------------------------------------------------------
    | QUANTITE
    |--------------------------------------------------------------------------
    */

    let quantite = valeurNumerique(
        $ligne.find('.quantite').val()
    );


    /*
    |--------------------------------------------------------------------------
    | COUT UNITAIRE
    |--------------------------------------------------------------------------
    */

    let coutUnitaire = valeurNumerique(
        $ligne.find('.cout-unitaire').val()
    );


    /*
    |--------------------------------------------------------------------------
    | CALCUL
    |--------------------------------------------------------------------------
    */

    let montantLigne =
        nombre
        * quantite
        * coutUnitaire;


    /*
    |--------------------------------------------------------------------------
    | AFFICHAGE DU MONTANT DE LA LIGNE
    |--------------------------------------------------------------------------
    */

    $ligne
        .find('.montant-ligne')
        .text(
            formatMontant(montantLigne) + ' FCFA'
        );


    /*
    |--------------------------------------------------------------------------
    | CHAMP CACHE
    |--------------------------------------------------------------------------
    */

    $ligne
        .find('.montant-ligne-input')
        .val(montantLigne);


    return montantLigne;
}


/*
|--------------------------------------------------------------------------
| CALCUL GLOBAL
|--------------------------------------------------------------------------
*/

function calculerTotaux()
{

    /*
    |--------------------------------------------------------------------------
    | MONTANT DISPONIBLE
    |--------------------------------------------------------------------------
    */

    let montantDisponible = valeurNumerique(
        $('#montant').val()
    );


    /*
    |--------------------------------------------------------------------------
    | TOTAL ENGAGE
    |--------------------------------------------------------------------------
    */

    let totalEngage = 0;


    /*
    |--------------------------------------------------------------------------
    | PARCOURIR LES LIGNES
    |--------------------------------------------------------------------------
    */

    $('#depenseTable tbody tr').each(function () {

        /*
        |----------------------------------------------------------------------
        | Vérifier qu'il s'agit bien d'une ligne de dépense
        |----------------------------------------------------------------------
        */

        if (
            $(this).find('.quantite').length === 0 ||
            $(this).find('.cout-unitaire').length === 0
        ) {
            return;
        }


        /*
        |----------------------------------------------------------------------
        | Calcul du montant de la ligne
        |----------------------------------------------------------------------
        */

        let montantLigne =
            calculerMontantLigne($(this));


        /*
        |----------------------------------------------------------------------
        | Ajouter au total
        |----------------------------------------------------------------------
        */

        totalEngage += montantLigne;

    });


    /*
    |--------------------------------------------------------------------------
    | MONTANT RESTANT
    |--------------------------------------------------------------------------
    */

    let montantRestant =
        montantDisponible - totalEngage;


    /*
    |--------------------------------------------------------------------------
    | Ne jamais afficher un montant restant négatif
    |--------------------------------------------------------------------------
    */

    if (montantRestant < 0) {

        montantRestant = 0;

    }


    /*
    |--------------------------------------------------------------------------
    | AFFICHAGE TOTAL ENGAGE
    |--------------------------------------------------------------------------
    */

    $('#totalMontantEngage').text(
        formatMontant(totalEngage) + ' FCFA'
    );


    /*
    |--------------------------------------------------------------------------
    | AFFICHAGE MONTANT RESTANT
    |--------------------------------------------------------------------------
    */

    $('#totalMontantRestant').text(
        formatMontant(montantRestant) + ' FCFA'
    );


    /*
    |--------------------------------------------------------------------------
    | CHAMPS CACHES
    |--------------------------------------------------------------------------
    */

    $('#montantEngage').val(
        totalEngage
    );


    $('#montantRestant').val(
        montantRestant
    );


    /*
    |--------------------------------------------------------------------------
    | CONTROLE DU DEPASSEMENT
    |--------------------------------------------------------------------------
    */

    const btnSuivant =
        document.querySelector('#step2 .next');


    const btnValider =
        document.querySelector('button[type="submit"]');


    const totalElement =
        document.getElementById('totalMontantEngage');


    const carteMontantEngage =
        totalElement
            ? totalElement.closest('.card')
            : null;


    /*
    |--------------------------------------------------------------------------
    | SI LE TOTAL DEPASSE LE MONTANT DISPONIBLE
    |--------------------------------------------------------------------------
    */

    if (totalEngage > montantDisponible) {


        /*
        |----------------------------------------------------------------------
        | Carte en rouge
        |----------------------------------------------------------------------
        */

        if (carteMontantEngage) {

            carteMontantEngage.style.background =
                'linear-gradient(135deg,#dc2626,#ef4444)';

            carteMontantEngage.style.color =
                '#ffffff';

        }


        /*
        |----------------------------------------------------------------------
        | Bloquer suivant
        |----------------------------------------------------------------------
        */

        if (btnSuivant) {

            btnSuivant.disabled = true;

        }


        /*
        |----------------------------------------------------------------------
        | Bloquer validation
        |----------------------------------------------------------------------
        */

        if (btnValider) {

            btnValider.disabled = true;

        }


        /*
        |----------------------------------------------------------------------
        | Alerte
        |----------------------------------------------------------------------
        */

        if (!window.depassementMontant) {

            window.depassementMontant = true;


            if (typeof Swal !== 'undefined') {

                Swal.fire({

                    icon: 'error',

                    title: 'Montant dépassé',

                    html: `
                        <b>
                            Le montant engagé dépasse
                            le montant disponible.
                        </b>

                        <br><br>

                        Veuillez diminuer :

                        <br>

                        • la quantité
                        <br>
                        • le coût unitaire
                        <br>
                        • ou le nombre.
                    `,

                    confirmButtonText: 'Compris',

                    confirmButtonColor: '#dc2626'

                });

            }

        }

    }

    /*
    |--------------------------------------------------------------------------
    | MONTANT CORRECT
    |--------------------------------------------------------------------------
    */

    else {


        /*
        |----------------------------------------------------------------------
        | Remettre la carte dans son état normal
        |----------------------------------------------------------------------
        */

        if (carteMontantEngage) {

            carteMontantEngage.style.background = '';

            carteMontantEngage.style.color = '';

        }


        /*
        |----------------------------------------------------------------------
        | Réactiver suivant
        |----------------------------------------------------------------------
        */

        if (btnSuivant) {

            btnSuivant.disabled = false;

        }


        /*
        |----------------------------------------------------------------------
        | Réactiver validation
        |----------------------------------------------------------------------
        */

        if (btnValider) {

            btnValider.disabled = false;

        }


        /*
        |----------------------------------------------------------------------
        | Réinitialiser l'alerte
        |----------------------------------------------------------------------
        */

        window.depassementMontant = false;

    }

}


/*
|--------------------------------------------------------------------------
| RECALCUL LORSQUE LA QUANTITE CHANGE
|--------------------------------------------------------------------------
*/

$(document).on(
    'input',
    '.quantite',
    function () {

        calculerTotaux();

    }
);


/*
|--------------------------------------------------------------------------
| RECALCUL LORSQUE LE COUT UNITAIRE CHANGE
|--------------------------------------------------------------------------
*/

$(document).on(
    'input',
    '.cout-unitaire',
    function () {

        calculerTotaux();

    }
);


/*
|--------------------------------------------------------------------------
| RECALCUL SI UN CHAMP EST MODIFIE AVEC UN SELECT
|--------------------------------------------------------------------------
*/

$(document).on(
    'change',
    '.quantite, .cout-unitaire',
    function () {

        calculerTotaux();

    }
);


/*
|--------------------------------------------------------------------------
| RECALCUL AU CHARGEMENT COMPLET DE LA PAGE
|--------------------------------------------------------------------------
*/

$(window).on(
    'load',
    function () {

        calculerTotaux();

    }
);

</script>

@endsection