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

{{-- /* surbrillance pour le telechargement 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>

{{-- pour le chargement de la consolidation --}}
<style>
    
.loader-overlay{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(255,255,255,0.92);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.loader-box{
    text-align:center;
    padding:35px 45px;
    border-radius:25px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,0.12);
    border-top:6px solid #f97316;
    border-bottom:6px solid #16a34a;
    animation: pop .4s ease;
}

@keyframes pop{
    from{transform:scale(0.9); opacity:0;}
    to{transform:scale(1); opacity:1;}
}

.loader-logo i{
    font-size:45px;
    color:#f97316;
    margin-bottom:15px;
}

.loader-box h4{
    color:#1f2937;
    font-weight:700;
    margin-bottom:5px;
}

.loader-box p{
    color:#64748b;
    margin-bottom:20px;
}

.loader-bar{
    width:250px;
    height:8px;
    background:#e5e7eb;
    border-radius:50px;
    overflow:hidden;
    margin:auto;
}

.loader-progress{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#f97316,#ffffff,#16a34a);
    animation: loading 1.2s linear forwards;
}

@keyframes loading{
    from{width:0%;}
    to{width:100%;}
}

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

/* 
 pour les deux boutons cnsolidation /differer-- */
.action-hover:hover {

    transform: translateY(-2px);

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

    filter: brightness(1.05);
}

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

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

                    Engagement de la dépense

                </h3>

                <small>

                    ANADER – Système intégré de gestion budgétaire

                </small>

            </div>

        </div>

    </div>


    <!-- =====================================================
         SUCCESS
    ===================================================== -->

    @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


    <!-- =====================================================
         TABLEAU RECAPITULATIF
    ===================================================== -->

    <div class="card mb-4">


        <div class="card-header">

            <h6 class="mb-0">

                <i class="fas fa-clipboard-list"></i>

                Synthèse de l’Engagement de Dépense

            </h6>

        </div>


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


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


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


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

                    <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>
                                Action
                            </th>

                            <th>
                                Motif retour
                            </th>

                        </tr>

                    </thead>


                    <!-- =====================================================
                         BODY TABLE
                    ===================================================== -->

                    <tbody>


                    @if($engagements->isEmpty())


                        <tr>

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

                                Aucun engagement trouvé

                            </td>

                        </tr>


                    @else


                        @foreach($engagements as $engagement)


                            <tr>


                                <!-- NUMERO BR -->

                                <td>

                                    {{ $engagement->numero_br }}

                                </td>


                                <!-- DIRECTION -->

                                <td>

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

                                    -

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

                                </td>


                                <!-- CENTRE RESPONSABILITE -->

                                <td>

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

                                    -

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

                                </td>


                                <!-- DATE -->

                                <td>

                                    {{ $engagement->date_besoin }}

                                </td>


                                <!-- RESPONSABLE -->

                                <td>

                                    {{ $engagement->responsable }}

                                </td>


                                <!-- URGENCE -->

                                <td>

                                    {{ $engagement->niveau_urgence }}

                                </td>


                                <!-- DETAILS -->

                                <td class="text-center">


                                    <button
                                        class="btn btn-info btn-sm"
                                        data-toggle="modal"
                                        data-target="#detailsModal{{ $engagement->id }}"
                                    >

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

                                    </button>


                                </td>


                            <!-- =================================================
     ACTION
================================================== -->

<td class="text-center">

    {{-- =================================================
         1. BROUILLON
    ================================================== --}}

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

        {{-- MODIFIER --}}
        <a
            href="{{ route(
                'user.engagementdepenses.edit',
                $engagement->id
            ) }}"
            class="btn btn-warning btn-sm mr-1"
            title="Modifier"
        >

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

        </a>


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

            @csrf
            @method('DELETE')

            <button
                type="submit"
                class="btn btn-danger btn-sm mr-1"
                title="Supprimer"
                onclick="return confirm(
                    'Voulez-vous vraiment supprimer cet engagement ?'
                );"
            >

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

            </button>

        </form>


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

            @csrf

            <button
                type="submit"
                class="btn btn-success btn-sm"
                title="Transmettre"
            >

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

            </button>

        </form>


    {{-- =================================================
         2. TRANSMIS AU CONTRÔLEUR

         Le Contrôleur doit maintenant voir :
         [ VALIDER ] [ DIFFÉRER ]
    ================================================== --}}

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

        {{-- =============================================
             VALIDER PAR LE CONTRÔLEUR
        ============================================== --}}

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

            @csrf

            <button
                type="submit"
                class="btn btn-success btn-sm mr-1"
                title="Validation globale"
                onclick="
                    return confirm(
                        'Attention : cette action constitue la validation globale et définitive de l’engagement. Voulez-vous continuer ?'
                    );
                "
            >

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

                Valider

            </button>

        </form>


        {{-- =============================================
             DIFFÉRER PAR LE CONTRÔLEUR
        ============================================== --}}

        <button
            type="button"
            class="btn btn-warning btn-sm"
            data-toggle="modal"
            data-target="#differerModal{{ $engagement->id }}"
            title="Différer"
        >

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

            Différer

        </button>


    {{-- =================================================
         3. ENGAGEMENT FINALISÉ

         Les deux statuts techniques :
         - valide
         - complete

         sont affichés de la même manière.
    ================================================== --}}

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


    {{-- =================================================
         4. ENGAGEMENT DIFFÉRÉ
    ================================================== --}}

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

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

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

            Engagement différé

        </span>


    {{-- =================================================
         5. AUTRES STATUTS
    ================================================== --}}

    @else

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

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

        </span>

    @endif

</td>


                                <!-- MOTIF RETOUR -->

                                <td>

                                    {{ $engagement->motif_retour ?? '-' }}

                                </td>


                            </tr>


                        @endforeach


                    @endif


                    </tbody>


                </table>


            </div>


        </div>


    </div>


</div>



<!-- =====================================================
     MODALS DETAILS
===================================================== -->

@foreach($engagements as $engagement)


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


    <div class="modal-dialog modal-xl">


        <div class="modal-content">


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

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


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

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

                    Détails -

                    {{ $engagement->numero_br }}

                </h5>


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

                    <span>&times;</span>

                </button>


            </div>


            <!-- =================================================
                 BODY MODAL
            ================================================== -->

            <div class="modal-body">


                <!-- =================================================
                     INFORMATIONS GENERALES
                ================================================== -->

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

                    <h5 class="mt-4">

                        {{-- <i class="fas fa-shopping-cart mr-2"></i> --}}

                        Informations générales 

                    </h5>

                    {{-- <div
                        class="card-header text-white"
                        style="background:linear-gradient(135deg,#f59e0b,#f97316);"
                    >

                        <h5 class="mb-0">

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

                            Informations de l'engagement

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

                                </div>


                            </div>

                        </div>

                </div>



         <!-- =================================================
     DETAILS DE LA DEPENSE
================================================== -->

@php

    /*
    |--------------------------------------------------------------------------
    | Récupérer la consolidation
    |--------------------------------------------------------------------------
    |
    | L'APPRO a consolidé l'engagement.
    | Le Contrôleur doit donc pouvoir consulter
    | les informations issues de cette consolidation.
    |
    */

    $consolidation = $engagement->engagementdetails
        ->map(function ($detail) {
            return $detail->consolidation;
        })
        ->filter()
        ->first();


    /*
    |--------------------------------------------------------------------------
    | Vérifier si l'engagement possède une consolidation
    |--------------------------------------------------------------------------
    */

    $consolidee = $consolidation !== null;


    /*
    |--------------------------------------------------------------------------
    | Calcul du montant engagé
    |--------------------------------------------------------------------------
    */

    $montantEngage = $engagement->engagementdetails->sum(function ($detail) {

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

    });


    /*
    |--------------------------------------------------------------------------
    | Montant disponible après consolidation
    |--------------------------------------------------------------------------
    */

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


    /*
    |--------------------------------------------------------------------------
    | Montant restant
    |--------------------------------------------------------------------------
    */

    $montantRestant =
        $montantDisponible
        - $montantEngage;

@endphp


<h5 class="mt-4">

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

    Détails de la dépense

</h5>


<div class="table-responsive">

    <table class="table table-bordered table-hover">

        <thead class="bg-light">

            <tr>

                <th>
                    Désignation
                </th>

                <th>
                    Détails
                </th>

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

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

                @if($consolidee)

                    <th class="text-center">
                        Coût unitaire
                    </th>

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

                @endif

            </tr>

        </thead>


        <tbody>

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

            <tr>

                <!-- =========================================
                     DESIGNATION
                ========================================== -->

                <td>

                    <strong>

                        {{ $detail->designation }}

                    </strong>

                </td>


                <!-- =========================================
                     DETAILS
                ========================================== -->

                <td>

                    {{ $detail->details }}

                </td>


                <!-- =========================================
                     NOMBRE
                ========================================== -->

                <td class="text-center">

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

                </td>


                <!-- =========================================
                     QUANTITE
                ========================================== -->

                <td class="text-center">

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

                </td>


                @if($consolidee)

                    <!-- =====================================
                         COUT UNITAIRE
                    ====================================== -->

                    <td class="text-center">

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

                        FCFA

                    </td>


                    <!-- =====================================
                         MONTANT
                    ====================================== -->

                    <td
                        class="text-center font-weight-bold text-success"
                    >

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

                        FCFA

                    </td>

                @endif

            </tr>


        @empty

            <tr>

                <td
                    colspan="{{ $consolidee ? 6 : 4 }}"
                    class="text-center text-muted py-3"
                >

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

                    Aucun détail de dépense enregistré.

                </td>

            </tr>

        @endforelse

        </tbody>

    </table>

</div>



<!-- =================================================
     INFORMATIONS FINANCIÈRES
================================================== -->

@if($consolidee)

    <div class="row mt-4">


        <!-- =============================================
             TOTAL ENGAGÉ
        ============================================== -->

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

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

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

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

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

                        TOTAL ENGAGÉ

                    </small>


                    <h3
                        class="mt-2 text-warning font-weight-bold"
                    >

                        {{ number_format(
                            $montantEngage,
                            0,
                            ',',
                            ' '
                        ) }}

                        FCFA

                    </h3>

                </div>

            </div>

        </div>



        <!-- =============================================
             MONTANT DISPONIBLE
        ============================================== -->

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

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

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

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

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

                        MONTANT CONSOLIDÉ

                    </small>


                    <h3
                        class="mt-2 text-primary font-weight-bold"
                    >

                        {{ number_format(
                            $montantDisponible,
                            0,
                            ',',
                            ' '
                        ) }}

                        FCFA

                    </h3>

                </div>

            </div>

        </div>



        <!-- =============================================
             MONTANT RESTANT
        ============================================== -->

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

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

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

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

                        <i class="fas fa-money-bill-wave text-success mr-1"></i>

                        MONTANT RESTANT

                    </small>


                    <h3
                        class="mt-2 text-success font-weight-bold"
                    >

                        {{ number_format(
                            $montantRestant,
                            0,
                            ',',
                            ' '
                        ) }}

                        FCFA

                    </h3>

                </div>

            </div>

        </div>


    </div>

@endif



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

                    <div class="card mb-4 mt-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
                                ================================================= --}}

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


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

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

    <!-- =================================================
         FACTURE / DEVIS PROFORMA
    ================================================== -->

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

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

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

                Facture / Devis proforma

            </label>


            @php

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

            @endphp


            @if($proforma)

                <div
                    class="form-control bg-light d-flex align-items-center justify-content-between"
                >

                    <span>

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

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

                    </span>


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

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

                        Voir

                    </a>

                </div>

            @else

                <div class="form-control bg-light text-muted">

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

                    Aucun proforma enregistré

                </div>

            @endif

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


@endforeach


<!-- =====================================================
     MODALS DIFFERER
===================================================== -->

@foreach($engagements as $engagement)

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

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

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

                <div class="modal-content">


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

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

                        <h5
                            class="modal-title"
                            id="differerModalLabel{{ $engagement->id }}"
                        >

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

                            Différer l'engagement

                        </h5>


                        <button
                            type="button"
                            class="close text-white"
                            data-dismiss="modal"
                            aria-label="Fermer"
                        >

                            <span aria-hidden="true">
                                &times;
                            </span>

                        </button>

                    </div>


                    <!-- =====================================
                         FORMULAIRE
                    ====================================== -->

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

                        @csrf


                        <div class="modal-body">

                            <div class="form-group">

                                <label
                                    for="motif_retour{{ $engagement->id }}"
                                    class="font-weight-bold"
                                >

                                    Motif du différé

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

                                </label>


                                <textarea
                                    name="motif_retour"
                                    id="motif_retour{{ $engagement->id }}"
                                    class="form-control"
                                    rows="4"
                                    placeholder="Veuillez saisir le motif du différé..."
                                    required
                                ></textarea>

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

                                Annuler

                            </button>


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

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

                                Confirmer le différé

                            </button>

                        </div>


                    </form>

                </div>

            </div>

        </div>

    @endif

@endforeach

{{-- =====================================================
     ANIMATION VALIDATION GLOBALE
===================================================== --}}

@if(session('validation_globale'))

<div id="validationGlobaleOverlay">

    <div class="validation-globale-content">

        {{-- Cercle de validation --}}
        <div class="validation-check-wrapper">

            <div class="validation-check-circle">

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

            </div>

        </div>


        {{-- Texte --}}
        <div class="validation-globale-title">

            VALIDATION GLOBALE

        </div>


        <div class="validation-globale-subtitle">

            Engagement de dépense validé

        </div>


        {{-- Ligne animée --}}
        <div class="validation-progress">

            <div class="validation-progress-bar"></div>

        </div>


        <div class="validation-globale-status">

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

            Validation définitive en cours...

        </div>

    </div>

</div>


<style>

/* =====================================================
   OVERLAY
===================================================== */

#validationGlobaleOverlay {

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:999999;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.98),
            rgba(239,246,255,.98)
        );

    animation:
        validationOverlayIn
        .45s
        ease-out
        forwards;
}


/* =====================================================
   CONTENU
===================================================== */

.validation-globale-content {

    text-align:center;

    transform:
        translateY(40px)
        scale(.85);

    opacity:0;

    animation:
        validationContentIn
        .7s
        cubic-bezier(.175,.885,.32,1.275)
        .15s
        forwards;
}


/* =====================================================
   CERCLE
===================================================== */

.validation-check-wrapper {

    display:flex;

    justify-content:center;

    margin-bottom:25px;
}


.validation-check-circle {

    width:110px;
    height:110px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

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

    box-shadow:
        0 20px 50px
        rgba(22,163,74,.30);

    position:relative;

    animation:
        validationCircle
        .8s
        cubic-bezier(.175,.885,.32,1.275)
        .25s
        forwards;
}


.validation-check-circle::before {

    content:"";

    position:absolute;

    width:130px;
    height:130px;

    border-radius:50%;

    border:2px solid
        rgba(22,163,74,.25);

    animation:
        validationPulse
        1.5s
        ease-out
        infinite;
}


.validation-check-circle i {

    color:white;

    font-size:48px;

    transform:
        scale(0);

    animation:
        validationCheck
        .45s
        ease-out
        .65s
        forwards;
}


/* =====================================================
   TITRE
===================================================== */

.validation-globale-title {

    font-size:28px;

    font-weight:800;

    letter-spacing:2px;

    color:#0f172a;

    margin-bottom:8px;
}


.validation-globale-subtitle {

    font-size:17px;

    font-weight:600;

    color:#16a34a;

    margin-bottom:25px;
}


/* =====================================================
   PROGRESSION
===================================================== */

.validation-progress {

    width:320px;

    height:5px;

    background:#e2e8f0;

    border-radius:50px;

    overflow:hidden;

    margin:
        0
        auto
        15px;
}


.validation-progress-bar {

    width:0%;

    height:100%;

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

    animation:
        validationProgress
        1.4s
        ease-in-out
        forwards;
}


/* =====================================================
   STATUT
===================================================== */

.validation-globale-status {

    color:#64748b;

    font-size:13px;

    font-weight:500;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes validationOverlayIn {

    from {

        opacity:0;

    }

    to {

        opacity:1;

    }

}


@keyframes validationContentIn {

    from {

        opacity:0;

        transform:
            translateY(40px)
            scale(.85);

    }

    to {

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes validationCircle {

    0% {

        transform:scale(.5);

    }

    70% {

        transform:scale(1.08);

    }

    100% {

        transform:scale(1);

    }

}


@keyframes validationCheck {

    from {

        transform:
            scale(0)
            rotate(-45deg);

    }

    to {

        transform:
            scale(1)
            rotate(0);

    }

}


@keyframes validationPulse {

    0% {

        transform:scale(.85);

        opacity:.8;

    }

    100% {

        transform:scale(1.35);

        opacity:0;

    }

}


@keyframes validationProgress {

    from {

        width:0%;

    }

    to {

        width:100%;

    }

}


/* =====================================================
   SORTIE
===================================================== */

#validationGlobaleOverlay.validation-out {

    animation:
        validationOverlayOut
        .55s
        ease-in
        forwards;
}


@keyframes validationOverlayOut {

    from {

        opacity:1;

    }

    to {

        opacity:0;

        visibility:hidden;

    }

}

</style>


<script>

document.addEventListener('DOMContentLoaded', function () {

    const overlay =
        document.getElementById(
            'validationGlobaleOverlay'
        );

    if (!overlay) {

        return;

    }

    /*
    |--------------------------------------------------------------------------
    | Laisser l'animation respirer
    |--------------------------------------------------------------------------
    */

    setTimeout(function () {

        overlay.classList.add('validation-out');

    }, 1700);

});

</script>

@endif

@endsection