@extends('layouts.master')

@section('title', 'Liste des engagements')

@section('content')


{{-- /* =====================================================
   {{-- pour la consolidation --}}
{{-- ===================================================== */ --}} 

<style>
    #loaderConsolidation{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.95);
    z-index:999999;
}

.loader-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}
</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.8s 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>

<style>

/* =====================================================
   SURBRILLANCE DES BOUTONS D'ACTION
   TRANSMETTRE À L'APPRO + DIFFÉRER
===================================================== */

.action-hover {
    position: relative;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                filter 0.25s ease;
}

/* =====================================================
   EFFET UNIQUEMENT AU SURVOL DU BOUTON
===================================================== */

.action-hover:hover {

    transform: translateY(-2px);

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.15);

    filter: brightness(1.05);
}


/* =====================================================
   PETIT LABEL AU SURVOL
===================================================== */

.action-hover::after {

    content: attr(data-label);

    position: absolute;

    bottom: -30px;

    left: 50%;

    transform: translateX(-50%);

    background: #111827;

    color: #ffffff;

    font-size: 11px;

    font-weight: 500;

    padding: 5px 9px;

    border-radius: 6px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    white-space: nowrap;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;

    z-index: 1000;
}


/* =====================================================
   APPARITION DU LABEL
===================================================== */

.action-hover:hover::after {

    opacity: 1;

    visibility: visible;
}

</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>
                    L'engagement de la dépense
                </h3>

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

            </div>

        </div>

    </div>


    {{-- ============================================================
        MESSAGE DE SUCCÈS
    ============================================================ --}}

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">

            <i class="fas fa-check-circle mr-1"></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 mr-1"></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


 {{-- ============================================================
    SYNTHÈSE DES ENGAGEMENTS
============================================================ --}}

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

    <div class="card-header bg-info text-white">

        <h6 class="mb-0">
            <i class="fas fa-clipboard-list mr-2"></i>
            Synthèse des Engagements de Dépense
        </h6>

    </div>


    <div class="card-body p-0">

        <div class="table-responsive" style="overflow-x:auto;">

            <table
                class="table table-bordered table-striped table-hover table-sm mb-0"
                style="min-width:1500px; font-size:0.85rem;"
            >

                {{-- =====================================================
                    HEADER
                ====================================================== --}}

                <thead class="thead-dark">

                    <tr class="text-center align-middle">

                        <th>
                            Numéro BR
                        </th>

                        <th>
                            Direction
                        </th>

                        <th>
                            Centre de responsabilité
                        </th>

                        <th>
                            Date du besoin
                        </th>

                        <th>
                            Responsable
                        </th>

                        <th>
                            Niveau urgence
                        </th>

                        <th>
                            Voir détails
                        </th>

                        <th>
                            Actions
                        </th>

                        <th>
                            Motif retour
                        </th>

                    </tr>

                </thead>


                {{-- =====================================================
                    BODY
                ====================================================== --}}

                <tbody>

                    @forelse($engagements as $engagement)

                        <tr>

                            {{-- =================================================
                                NUMÉRO BR
                            ================================================== --}}

                            <td class="align-middle">

                                <strong>
                                    {{ $engagement->numero_br }}
                                </strong>

                            </td>


                            {{-- =================================================
                                DIRECTION
                            ================================================== --}}

                            <td class="align-middle">

                                {{ optional($engagement->direction)->code }}
                                -
                                {{ optional($engagement->direction)->libelle }}

                            </td>


                            {{-- =================================================
                                CENTRE DE RESPONSABILITÉ
                            ================================================== --}}

                            <td class="align-middle">

                                {{ optional($engagement->centrerespo)->code }}
                                -
                                {{ optional($engagement->centrerespo)->libelle_long }}

                            </td>


                            {{-- =================================================
                                DATE DU BESOIN
                            ================================================== --}}

                            <td class="align-middle">

                                {{ $engagement->date_besoin }}

                            </td>


                            {{-- =================================================
                                RESPONSABLE
                            ================================================== --}}

                            <td class="align-middle">

                                {{ $engagement->responsable }}

                            </td>


                            {{-- =================================================
                                NIVEAU D'URGENCE
                            ================================================== --}}

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

                                <span class="badge badge-warning">

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

                                    {{ $engagement->niveau_urgence }}

                                </span>

                            </td>


                            {{-- =================================================
                                VOIR DÉTAILS
                            ================================================== --}}

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

                                <button
                                    type="button"
                                    class="btn btn-info btn-sm btn-action-icon"
                                    data-toggle="modal"
                                    data-target="#detailsModal{{ $engagement->id }}"
                                    title="Voir les détails de l'engagement"
                                >

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

                                </button>

                            </td>


                            {{-- =================================================
                                ACTIONS
                            ================================================== --}}

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


                                {{-- =================================================
                                     1. ENGAGEMENT REÇU DU SERVICE DEMANDEUR
                                ================================================== --}}

                                @if($engagement->status === 'transmis_directeur')


                                    {{-- =================================================
                                         TRANSMETTRE À L'APPRO
                                    ================================================== --}}

                                    <form
                                        action="{{ route(
                                            'user.engagementdepense.transmettre.appro',
                                            $engagement->id
                                        ) }}"
                                        method="POST"
                                        style="display:inline-block;"
                                    >

                                        @csrf

                                        <button
                                            type="submit"
                                            class="btn btn-primary btn-sm btn-action-icon action-hover mr-1"
                                            data-label="Transmettre à l’APPRO"
                                            title="Transmettre à l’APPRO"
                                            onclick="return confirm(
                                                'Confirmez-vous la transmission de cet engagement à l’APPRO pour consolidation ?'
                                            );"
                                        >

                                            <i class="fas fa-paper-plane"></i>

                                        </button>

                                    </form>


                                    {{-- =================================================
                                         DIFFÉRER / RETOURNER
                                    ================================================== --}}

                                    <button
                                        type="button"
                                        class="btn btn-secondary btn-sm btn-action-icon action-hover"
                                        data-label="Différer / Retourner"
                                        data-toggle="modal"
                                        data-target="#retourModal{{ $engagement->id }}"
                                        title="Différer / Retourner l'engagement"
                                    >

                                        <i class="fas fa-clock"></i>

                                    </button>


                                {{-- =================================================
                                     2. RETOURNÉ PAR LE DIRECTEUR
                                     IMPORTANT :
                                     Le Directeur ne modifie PAS.
                                     La correction se fait sur le premier écran.
                                ================================================== --}}

                                @elseif($engagement->status === 'retour_directeur')


                                    <span
                                        class="badge badge-danger px-3 py-2"
                                        style="font-size:0.85rem;"
                                    >

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

                                        Retour pour correction

                                    </span>


                                {{-- =================================================
                                     3. TRANSMIS À L'APPRO
                                ================================================== --}}

                                @elseif(
                                    $engagement->status === 'transmis_appro'
                                    ||
                                    $engagement->status === 'transmis_controleur'
                                )


                                    <span
                                        class="badge badge-success px-3 py-2"
                                        style="font-size:0.85rem;"
                                    >

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

                                        Transmis à l'APPRO

                                    </span>


                                {{-- =================================================
                                     4. RETOURNÉ PAR L'APPRO
                                     Le Directeur voit le retour,
                                     mais ne modifie pas.
                                ================================================== --}}

                                @elseif($engagement->status === 'retour_appro')


                                    <span
                                        class="badge badge-danger px-3 py-2"
                                        style="font-size:0.85rem;"
                                    >

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

                                        Retour pour correction

                                    </span>


                                {{-- =================================================
                                     5. ENGAGEMENT VALIDÉ / FINALISÉ
                                ================================================== --}}

                                @elseif(
                                    in_array($engagement->status, [
                                        'valide',
                                        'complete'
                                    ])
                                )


                                    <span
                                        class="badge badge-success px-3 py-2"
                                        style="font-size:0.85rem;"
                                    >

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

                                        Engagement finalisé

                                    </span>


                                {{-- =================================================
                                     6. AUTRE STATUT
                                ================================================== --}}

                                @else


                                    <span
                                        class="badge badge-secondary px-3 py-2"
                                        style="font-size:0.85rem;"
                                    >

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

                                        {{ ucfirst(
                                            str_replace(
                                                '_',
                                                ' ',
                                                $engagement->status
                                            )
                                        ) }}

                                    </span>


                                @endif

                            </td>


                            {{-- =================================================
                                MOTIF RETOUR
                            ================================================== --}}

                            <td class="align-middle">

                                @if(
                                    $engagement->status === 'retour_directeur'
                                    ||
                                    $engagement->status === 'retour_appro'
                                )

                                    @if($engagement->motif)

                                        <span
                                            class="text-danger"
                                            title="Motif du retour"
                                        >

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

                                            {{ $engagement->motif }}

                                        </span>

                                    @else

                                        <span class="text-muted">
                                            Aucun motif renseigné
                                        </span>

                                    @endif

                                @else

                                    <span class="text-muted">
                                        -
                                    </span>

                                @endif

                            </td>

                        </tr>

                    @empty

                        <tr>

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

                                <i
                                    class="fas fa-folder-open fa-2x mb-3 d-block"
                                ></i>

                                <strong>
                                    Aucun engagement trouvé
                                </strong>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>
</div>
{{-- ============================================================
    MODALS
============================================================ --}}

@foreach($engagements as $engagement)


    {{-- ============================================================
        MODAL : VOIR DÉTAILS
    ============================================================= --}}

    <div
        class="modal fade"
        id="detailsModal{{ $engagement->id }}"
        tabindex="-1"
        role="dialog"
        aria-hidden="true">

        <div
            class="modal-dialog modal-xl modal-dialog-scrollable"
            role="document">

            <div class="modal-content">


                {{-- =================================================
                    HEADER
                ================================================== --}}

                <div
                    class="modal-header"
                    style="
                        background:linear-gradient(
                            90deg,
                            #f97316,
                            #ffffff,
                            #16a34a
                        );
                    ">

                    <h5 class="modal-title text-dark">

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

                        Détails de l'engagement -

                        {{ $engagement->numero_br }}

                    </h5>


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

                        <span>
                            &times;
                        </span>

                    </button>

                </div>


                {{-- =================================================
                    BODY
                ================================================== --}}

                <div class="modal-body">


                    {{-- =================================================
                        1. INFORMATIONS GÉNÉRALES
                    ================================================== --}}

                    <div class="card mb-4">

                        <div class="card-header">

                            <h5 class="mb-0">

                                <i class="fas fa-info-circle mr-2"></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"
                                        readonly
                                        value="{{ $engagement->budgetdepense?->besoinbudgetaire?->exercice ?? '' }}">

                                </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"
                                        readonly
                                        value="{{ $engagement->budgetdepense?->besoinbudgetaire?->code_budget ?? '' }}">

                                </div>


                                {{-- =================================================
                                    NOM DU 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"
                                        readonly
                                        value="{{ $engagement->budgetdepense?->besoinbudgetaire?->nom_budget ?? '' }}">

                                </div>


                                {{-- =================================================
                                    DATE DE SAISIE
                                ================================================== --}}

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

                                    <label class="font-weight-bold">
                                        Date de saisie
                                    </label>

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

                                </div>


                                {{-- =================================================
                                    ACTIVITÉ
                                ================================================== --}}

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

                                    <label class="font-weight-bold">
                                        Activité
                                    </label>

                                    <input
                                        type="text"
                                        class="form-control bg-readonly"
                                        readonly
                                        value="{{ $engagement->budgetdepense?->activite ?? '' }}">

                                </div>


                                {{-- =================================================
                                    NATURE DE LA DÉPENSE
                                ================================================== --}}

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

                                    <label class="font-weight-bold">
                                        Nature de la dépense
                                    </label>

                                    <input
                                        type="text"
                                        class="form-control bg-readonly"
                                        readonly
                                        value="{{ $engagement->budgetdepense?->nature ?? '' }}">

                                </div>


                                {{-- =================================================
                                    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"
                                        readonly
                                        value="{{ $engagement->budgetdepense?->comptesyscohada?->code }} - {{ $engagement->budgetdepense?->comptesyscohada?->libelle }}">

                                </div>


                                {{-- =================================================
                                    POSTE DE GESTION
                                ================================================== --}}

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

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

                                    <input
                                        type="text"
                                        class="form-control bg-readonly"
                                        readonly
                                        value="{{ $engagement->budgetdepense?->postegestion?->code }} - {{ $engagement->budgetdepense?->postegestion?->libelle }}">

                                </div>


                            </div>

                        </div>

                    </div>



                    {{-- =================================================
                        2. DÉTAILS DE LA DÉPENSE
                    ================================================== --}}

                    <div class="card mb-4">

                        <div class="card-header">

                            <h5 class="mb-0">

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

                                    <thead class="thead-light">

                                        <tr>

                                            <th>
                                                Désignation
                                            </th>

                                            <th>
                                                Détails
                                            </th>

                                            <th class="text-center">
                                                Nombre
                                            </th>

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

                                        </tr>

                                    </thead>


                                    <tbody>

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

                                            <tr>

                                                {{-- DÉSIGNATION --}}

                                                <td>

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

                                                </td>


                                                {{-- DÉTAILS --}}

                                                <td>

                                                    {{ $detail->details }}

                                                </td>


                                                {{-- NOMBRE --}}

                                                <td class="text-center">

                                                    {{ number_format(
                                                        $detail->nombre ?? 0,
                                                        0,
                                                        ',',
                                                        ' '
                                                    ) }}

                                                </td>


                                                {{-- QUANTITÉ --}}

                                                <td class="text-center">

                                                    {{ number_format(
                                                        $detail->quantite ?? 0,
                                                        0,
                                                        ',',
                                                        ' '
                                                    ) }}

                                                </td>

                                            </tr>


                                        @empty

                                            <tr>

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

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

                                                    Aucun détail enregistré.

                                                </td>

                                            </tr>

                                        @endforelse

                                    </tbody>

                                </table>

                            </div>

                        </div>

                    </div>



                    {{-- =================================================
                        3. DOCUMENTS JUSTIFICATIFS
                    ================================================== --}}

                   
                <div class="card mb-4">

                    <div class="card-header">

                        <h5 class="mb-0">

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

                            Document justificatif

                        </h5>

                    </div>


                    <div class="card-body">


                        <div class="row">


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

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

                                <div class="border rounded p-3 h-100">

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

                                        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>

                            </div>


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

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

                                <div class="border rounded p-3 h-100">

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

                                        N° du document / Besoin

                                    </label>


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

                                </div>

                            </div>


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

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

                                <div class="border rounded p-3 h-100">

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

                                        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>

                </div>

            </div>



                {{-- =================================================
                    FOOTER
                ================================================== --}}

                <div class="modal-footer">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-dismiss="modal">

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

                        Fermer

                    </button>

                </div>

            </div>

        </div>

    </div>



    {{-- ============================================================
        MODAL : DIFFÉRER / RETOURNER
    ============================================================= --}}

    <div
        class="modal fade"
        id="retourModal{{ $engagement->id }}"
        tabindex="-1"
        role="dialog"
        aria-hidden="true">

        <div
            class="modal-dialog"
            role="document">

            <div class="modal-content">


                {{-- HEADER --}}

                <div class="modal-header bg-warning">

                    <h5 class="modal-title">

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

                        Différer l'engagement

                    </h5>


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

                        <span>
                            &times;
                        </span>

                    </button>

                </div>


                {{-- FORMULAIRE --}}

                <form
                    action="{{ route(
                        'user.engagementdepense.retourner',
                        $engagement->id
                    ) }}"
                    method="POST">

                    @csrf


                    <div class="modal-body">

                        <div class="alert alert-warning">

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

                            L'engagement sera retourné à la
                            <strong>Direction Porteuse</strong>
                            pour correction.

                        </div>


                        <div class="form-group">

                            <label
                                for="motif{{ $engagement->id }}">

                                Motif du retour

                                <span class="text-danger">
                                    *
                                </span>

                            </label>


                            <textarea
                                id="motif{{ $engagement->id }}"
                                name="motif"
                                class="form-control"
                                rows="5"
                                required
                                placeholder="Saisissez le motif du retour..."></textarea>

                        </div>

                    </div>


                    <div class="modal-footer">

                        <button
                            type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal">

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

                            Annuler

                        </button>


                        <button
                            type="submit"
                            class="btn btn-warning">

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

                            Confirmer le différé

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>


@endforeach

{{-- ============================================================
    JAVASCRIPT
============================================================ --}}

<script>

    $(document).ready(function () {

        $('.btn-consolider').on('click', function (e) {

            e.preventDefault();

            let url = $(this).attr('href');

            const loader = $('#loaderConsolidation');

            loader.fadeIn(200);

            loader
                .find('.loader-progress')
                .css('width', '0%');

            setTimeout(function () {

                window.location.href = url;

            }, 1200);

        });

    });

</script>


@endsection