@extends('layouts.master')

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

@section('content')

<style>

    /*
    |--------------------------------------------------------------------------
    | Champ désactivé lorsqu'un autre choix est utilisé
    |--------------------------------------------------------------------------
    */

    .field-disabled {

        background-color: #f1f5f9 !important;

        border-color: #e2e8f0 !important;

        color: #94a3b8 !important;

        cursor: not-allowed;

        opacity: .75;
    }


    .field-disabled::placeholder {

        color: #94a3b8 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | Petit indicateur visuel
    |--------------------------------------------------------------------------
    */

    .choice-info {

        display: block;

        margin-top: 5px;

        font-size: .75rem;

        color: #64748b;

    }

</style>

{{-- le bouton telecharger de la liste de depense --}}
<style>
.download-pdf{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #0d6efd;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    text-decoration: none;
    transition: all .3s ease;
}

.download-pdf:hover{
    color: #ffffff;
    background: #0d6efd;    
    border-color: #0d6efd;
    text-decoration: none;
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(13,110,253,.35);
}

.download-pdf i{
    font-size: 18px;
}
</style>
 
{{-- la fiche des engagements de depense --}}

<style>
    .pdf-icon{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#0d6efd;
    background:rgba(13,110,253,.08);
    border-radius:50%;
    text-decoration:none;
    transition:.25s;
}

.pdf-icon:hover{
    background:rgba(13,110,253,.18);
    color:#0d6efd;
    transform:scale(1.10);
    text-decoration:none;
}
</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.7s ease;
}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

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

label{

    color:#475569;

    font-weight:600;

    margin-bottom:8px;
}

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

.form-control,
.custom-select{

    min-height:54px;

    border-radius:16px;

    border:2px solid #e2e8f0;

    background:#fff;

    transition:.25s;
}

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

    border-color:#2563eb;

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

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

.bg-readonly{

    background:#f8fafc !important;

    border-style:dashed !important;

    color:#475569;
}

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

.table{

    margin-bottom:0;
}

.table thead th{

    background:#f3f4f6;

    color:#374151;

    border-bottom:2px solid #d1d5db;
}

.table tbody td{

    vertical-align:middle;

    padding:12px;
}

.table tbody tr:hover{

    background:#f8fafc;
}

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

.table-responsive{

    border-radius:20px;

    overflow:hidden;
}

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

.btn{

    border-radius:14px;

    font-weight:600;

    padding:10px 20px;

    border:none;
}

.btn-primary{

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

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

.btn-primary:hover{

    transform:translateY(-2px);
}

.btn-success{

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

.btn-secondary{

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

    color:white;
}

.btn-danger{

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

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

.card-footer{

    background:white !important;

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

    padding:20px 30px;
}

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

.badge{

    border-radius:50px;

    padding:8px 15px;

    font-size:12px;
}

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

.steps-indicator{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:30px;
}

.step-circle{

    width:45px;
    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e2e8f0;

    color:#64748b;

    font-weight:700;
}

.step-circle.active{

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

    color:white;
}

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

#totalGeneral{

    font-size:18px;

    font-weight:700;

    color:#dc2626;
}

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

.alert{

    border:none;

    border-radius:20px;
}

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

#ligne_recap_engagement{

    background:#f8fafc;
}

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

::-webkit-scrollbar{

    height:10px;
    width:10px;
}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:50px;
}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;
}

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

.card-step1{

    border:2px solid #f97316 !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step1 .card-header{

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

    color:white !important;

    border-bottom:none !important;
}

.card-step1 .card-footer{

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

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

.card-step2{

    border:2px solid #d1d5db !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step2 .card-header{

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

    color:#374151 !important;

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

.card-step2 .card-footer{

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

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

.card-step3{

    border:2px solid #16a34a !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step3 .card-header{

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

    color:white !important;

    border-bottom:none !important;
}

.card-step3 .card-footer{

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

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

.card-step4{

    border:2px solid #15803d !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step4 .card-header{

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

    color:white !important;

    border-bottom:none !important;
}

.card-step4 .card-footer{

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

.btn-add-row{

    background:#6b7280;

    color:#fff;

    border:none;
}

.btn-add-row:hover{

    background:#4b5563;

    color:#fff;
}

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

.step.active {
    display: block;
}

</style>

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

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

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

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

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

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

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

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

.modal-body{
    padding: 25px;
}

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

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

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

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

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

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

<style>
    /* ===============================
   WRAPPER CENTRÉ PROPRE
================================ */
.engagement-table-wrapper{
    max-width: 1250px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
}

/* ===============================
   SCROLL HORIZONTAL CONTRÔLÉ
================================ */
.table-scroll{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
}

/* ===============================
   TABLE PLUS PROPRE
================================ */
.engagement-table{
    width: 100%;
    min-width: 1100px; /* équilibre parfait */
    font-size: 0.85rem;
}

/* ===============================
   FIX HEADER ALIGNEMENT
================================ */
.engagement-table th,
.engagement-table td{
    white-space: nowrap;
    vertical-align: middle;
}

/* ===============================
   SCROLLBAR PLUS DISCRET
================================ */
.table-scroll::-webkit-scrollbar{
    height: 8px;
}

.table-scroll::-webkit-scrollbar-thumb{
    background: #cbd5e1;
    border-radius: 20px;
}

.table-scroll::-webkit-scrollbar-thumb:hover{
    background: #94a3b8;
}
</style>

{{-- surbrillance sur les 3 boutons --}}

<style>
    .action-btn {
    position: relative;
    transition: all 0.25s ease;
}

/* effet hover */
.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    filter: brightness(1.05);
}

/* label au survol */
.action-btn::after {
    content: attr(data-label);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
    white-space: nowrap;
}

/* apparition label */
.action-btn:hover::after {
    opacity: 1;
}
</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 Dépense   
                    </h3>

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

                </div>

                <div>

                    <button
                        class="btn btn-new-engagement"
                        type="button"
                        data-toggle="collapse"
                        data-target="#collapseEngagement"
                        aria-expanded="false">

                        <i class="fas fa-plus-circle mr-2"></i>
                        Commencer un Engagement

                    </button> 

                    {{-- <a href="{{ route('user.engagementdepense.lignebudgetaire') }}"
                    class="btn btn-new-engagement">

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

                        Voir les lignes budgétaires

                    </a> --}}

                </div>

            </div>

        </div>

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

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

                    <span>&times;</span>

                </button>
            </div>
        @endif

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

    @if ($errors->any())

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

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

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

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

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

                @endforeach

            </ul>

        </div>

    @endif

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

    <div class="collapse" id="collapseEngagement">

        <form action="{{ route('user.engagementdepenses.store') }}"
            method="POST"
            enctype="multipart/form-data">

            @csrf

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

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

            <!-- =====================================================
                STEP 1 : INFORMATIONS GENERALES
            ===================================================== -->

            <div class="step" id="step1">

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

                    <div class="card-header">

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

                    </div>

                    <div class="card-body">

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

<div class="row">

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

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

        <input
            type="text"
            class="form-control bg-readonly"
            value="{{ $ligne?->besoinbudgetaire?->exercice ?? '' }}"
            readonly
        >

    </div>


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

        <label class="font-weight-bold">
            Code Budget
        </label>

        <input
            type="text"
            class="form-control bg-readonly"
            value="{{ $ligne?->besoinbudgetaire?->code_budget ?? '' }}"
            readonly
        >

    </div>


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

        <label class="font-weight-bold">
            Nom du Budget
        </label>

        <input
            type="text"
            class="form-control bg-readonly"
            value="{{ $ligne?->besoinbudgetaire?->nom_budget ?? '' }}"
            readonly
        >

    </div>

</div>


<!-- =========================================
    LIGNE 2
========================================= -->

<div class="row">

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

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

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

    </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"
            value="{{ $ligne?->nature ?? '' }}"
            readonly
        >

    </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"
            value="{{ optional($ligne?->comptesyscohada)->code ?? '' }} - {{ optional($ligne?->comptesyscohada)->libelle ?? '' }}"
            readonly
        >

    </div>

</div>

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

        <!-- Date de saisie -->
        <div class="col-md-4 mb-3">

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

            <input type="date"
                name="date_saisie"
                class="form-control bg-readonly"
                value="{{ old('date_saisie', date('Y-m-d')) }}"
                readonly>

        </div>

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

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

            @if($responsable && optional($responsable->direction)->code === '00-SIEGE')

                <select name="direction_id" class="form-control">

                    @foreach($directions as $direction)

                        <option value="{{ $direction->id }}"
                            {{ $direction->id == $responsable->direction_id ? 'selected' : '' }}>

                            {{ $direction->code }} - {{ $direction->libelle }}

                        </option>

                    @endforeach

                </select>

            @else

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

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

            @endif

        </div>

        <!-- Centre de responsabilité -->
        <div class="col-md-4 mb-3">

            <label class="font-weight-bold">
                Centre de responsabilité
            </label>

            @php
                $isSiege = optional($responsable->direction)->code === '00-SIEGE';
            @endphp

            @if($isSiege)

                <select name="centrerespo_id" class="form-control">

                    @foreach($centrerespos as $centre)

                        <option value="{{ $centre->id }}"
                            {{ $centre->id == $responsable->centrerespo_id ? 'selected' : '' }}>

                            {{ $centre->code }} - {{ $centre->libelle_long }}

                        </option>

                    @endforeach

                </select>

            @else

                <input type="text"
                    class="form-control bg-readonly"
                    value="{{ optional($responsable->centrerespo)->code }} - {{ optional($responsable->centrerespo)->libelle_long }}"
                    readonly>

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

            @endif

        </div>

    </div>

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

    <!-- Numéro BR -->
    <div class="col-md-6 mb-3">

        <label class="font-weight-bold">
            Numéro BR
        </label>

        <input type="text"
               name="numero_br"
               class="form-control bg-readonly"
               value="{{ old('numero_br', $numeroBR ?? '') }}"
               readonly>

    </div>

    <!-- Date du besoin -->
    <div class="col-md-6 mb-3">

        <label class="font-weight-bold">
            Date du besoin
        </label>

        <input type="date"
               name="date_besoin"
               id="date_besoin"
               class="form-control"
               value="{{ old('date_besoin') }}"
               required>

    </div>

</div>
                        <!-- =========================================
                            LIGNE 2
                        ========================================= -->

                        <div class="row">

                            <!-- Niveau d'urgence -->
                            <div class="col-md-6 mb-3">

                                <label class="font-weight-bold">
                                    Niveau d'urgence
                                </label>

                                <select name="urgence"
                                        id="urgence"
                                        class="form-control"
                                        required>
                                    
                                        
                                <option value="">-- Sélectionner --</option>

                                    <option value="normal"
                                        {{ old('urgence') == 'normal' ? 'selected' : '' }}>
                                        Normal
                                    </option>

                                    <option value="urgent"
                                        {{ old('urgence') == 'urgent' ? 'selected' : '' }}>
                                        Urgent
                                    </option>

                                </select>

                            </div>

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

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

                                <input type="text"
                                    name="responsable"
                                    class="form-control"
                                    value="{{ old('responsable', optional($responsable)->nom.' '.optional($responsable)->prenoms) }}"
                                    placeholder="Saisir le responsable"
                                    required>

                            </div>

                        </div>

                        <div class="card-footer">

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

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

                                    Suivant

                                </button>

                            </div>

                        </div>

                    </div>
                    
                </div>

            </div>
                    
            <!-- =====================================================
                STEP 2 : IMPUTATION BUDGETAIRE
            ===================================================== -->

           <div class="step" id="step2">

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

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

        <div class="card-header bg-white border-bottom">

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

                <!-- TITRE -->
                <div>

                    <h5 class="mb-1 text-dark font-weight-bold">

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

                        Détails de la Dépense

                    </h5>

                    <small class="text-muted">

                        Ajouter les articles liés à cet engagement

                    </small>

                </div>

                <!-- BOUTON AJOUT -->

                <button
                    type="button"
                    class="btn btn-add-row btn-sm"
                    id="addRow">

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

                    Ajouter une ligne

                </button>

            </div>

        </div>

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

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

            <div class="table-responsive">

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

                    <!-- =====================================================
                        ENTETE
                    ===================================================== -->

                    <thead class="bg-light">

                        <tr class="text-center">

                            <th width="25%">
                                Designation
                            </th>

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

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

                            <th width="15%">
                                Quantité
                            </th>

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

                        </tr>

                    </thead>

                    <!-- =====================================================
                        LIGNES
                    ===================================================== -->

                    <tbody id="depenseBody">

                        <tr>

                            <!-- DESCRIPTION -->

                            <td>

                                <input
                                    type="text"
                                    name="designation[]"
                                    class="form-control"
                                    placeholder="Designation"
                                    required>

                            </td>

                            <!-- DETAILS -->

                            <td>

                                <input
                                    type="text"
                                    name="details[]"
                                    class="form-control"
                                    placeholder="Détails de la dépense"
                                    required>

                            </td>

                            <!-- NOMBRE -->

                            <td>

                                <input
                                    type="number"
                                    name="nombre[]"
                                    class="form-control text-center"
                                    min="1"
                                    value="1"
                                    required>

                            </td>

                            <!-- QUANTITE -->

                            <td>

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

                            </td>

                            <!-- ACTION -->

                            <td class="text-center">

                                <button
                                    type="button"
                                    class="btn btn-outline-danger btn-sm removeRow">

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

                                </button>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

        <!-- Désactiver la suppression de la première ligne -->
        <style>

            #depenseBody tr:first-child .removeRow{

                opacity:.5;

                cursor:not-allowed;

                pointer-events:none;

            }

        </style>

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

        <div class="card-footer bg-white">

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

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

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

                    Précédent

                </button>

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

                    Suivant

                    <i class="fas fa-arrow-right ml-1"></i>

                </button>

            </div>

        </div>

    </div>

</div>

            


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

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

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

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

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

            <h5 class="mb-0">
                <i class="fas fa-paperclip"></i>
                Saisir des références
            </h5>

        </div>

        <div class="card-body">

            {{-- =========================================================
                DOCUMENT TDR / BESOIN ORDINAIRE / RÉFÉRENCE
            ========================================================= --}}

            <div class="row">

                {{-- =====================================================
                    1. DOCUMENT TDR / JUSTIFICATIF
                ====================================================== --}}

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

                    <label
                        for="numero_document"
                        class="font-weight-bold"
                    >
                        N° document TDR / Justificatif
                    </label>

                    <input
                        type="text"
                        name="numero_document"
                        id="numero_document"
                        class="form-control"
                        value="{{ old(
                            'numero_document',
                            $engagement?->numero_document ?? ''
                        ) }}"
                        placeholder="Ex : TDR/ANADER/2026/025"
                        autocomplete="off"
                    >

                    <small class="text-muted">
                        Document ou justificatif lié au TDR.
                    </small>

                    @error('numero_document')
                        <small class="text-danger d-block mt-1">
                            {{ $message }}
                        </small>
                    @enderror

                </div>


                {{-- =====================================================
                    2. BESOIN ORDINAIRE
                ====================================================== --}}

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

                    <label
                        for="besoin_ordinaire"
                        class="font-weight-bold"
                    >
                        Besoin ordinaire
                    </label>

                    <input
                        type="text"
                        name="besoin_ordinaire"
                        id="besoin_ordinaire"
                        class="form-control"
                        value="{{ old(
                            'besoin_ordinaire',
                            $engagement?->besoin_ordinaire ?? ''
                        ) }}"
                        placeholder="Ex : BO/ANADER/2026/025"
                        autocomplete="off"
                    >

                    <small class="text-muted">
                        À renseigner si le besoin n'est pas lié à un TDR.
                    </small>

                    @error('besoin_ordinaire')
                        <small class="text-danger d-block mt-1">
                            {{ $message }}
                        </small>
                    @enderror

                </div>


                {{-- =====================================================
                    3. RÉFÉRENCE AUTOMATIQUE
                ====================================================== --}}

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

                    <label
                        for="reference_document"
                        class="font-weight-bold"
                    >
                        Référence
                    </label>

                    <input
                        type="text"
                        name="reference_document"
                        id="reference_document"
                        class="form-control bg-readonly"
                        value="{{ old(
                            'reference_document',
                            $engagement?->reference_document ?? ''
                        ) }}"
                        placeholder="Générée automatiquement"
                        readonly
                    >

                    <small class="text-muted">
                        Cette référence est générée automatiquement.
                    </small>

                    @error('reference_document')
                        <small class="text-danger d-block mt-1">
                            {{ $message }}
                        </small>
                    @enderror

                </div>

            </div>

        </div>


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

        <div class="card-footer">

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

                <button
                    type="button"
                    class="btn btn-secondary prev"
                >
                    <i class="fas fa-arrow-left mr-1"></i>
                    Précédent
                </button>


                <div>

                    <button
                        type="submit"
                        name="action"
                        value="brouillon"
                        class="btn btn-secondary"
                    >
                        <i class="fas fa-save mr-1"></i>
                        Enregistrer
                    </button>


                    <button
                        type="submit"
                        name="action"
                        value="transmettre"
                        class="btn btn-success"
                    >
                        <i class="fas fa-paper-plane mr-1"></i>
                        Transmettre
                    </button>

                </div>

            </div>

        </div>

    </div>

        </div>

        </form>

    </div>

</div>


  {{-- =====================================================
    TABLEAU RÉCAPITULATIF
===================================================== --}}

<div class="container-fluid">

    <div class="card card-step2 mb-4 mx-auto engagement-table-wrapper">

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

        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">

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

        </div>


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

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

            <div class="table-scroll">

                <table
                    class="table table-bordered table-striped table-sm mb-0 engagement-table"
                >

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

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

                            <th>
                                Motif retour
                            </th>

                        </tr>

                    </thead>


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

                    <tbody>

                        {{-- =================================================
                            AUCUN ENGAGEMENT
                        ================================================== --}}

                        @if($engagements->isEmpty())

                            <tr>

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

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

                                    Aucun engagement trouvé

                                </td>

                            </tr>

                        @else


                            {{-- =================================================
                                BOUCLE ENGAGEMENTS
                            ================================================== --}}

                            @foreach($engagements as $engagement)

                                <tr>

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

                                    <td>

                                        {{ $engagement->numero_br }}

                                    </td>


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

                                    <td>

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

                                        -

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

                                    </td>


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

                                    <td>

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

                                        -

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

                                    </td>


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

                                    <td>

                                        {{ $engagement->date_besoin }}

                                    </td>


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

                                    <td>

                                        {{ $engagement->responsable }}

                                    </td>


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

                                    <td>

                                        {{ $engagement->niveau_urgence }}

                                    </td>


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

                                    <td class="text-center">

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

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

                                        </button>

                                    </td>


                                    {{-- =================================================
                                        ACTIONS / STATUT
                                    ================================================== --}}

                                    <td class="text-center">

                                        {{-- =================================================
                                            TÉLÉCHARGER LA FICHE PDF
                                        ================================================== --}}

                                        <a
                                            href="{{ route(
                                                'user.engagementdepense.fiche.pdf',
                                                $engagement->id
                                            ) }}"
                                            class="pdf-icon mr-1"
                                            title="Télécharger la fiche PDF"
                                        >

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

                                        </a>


                                        {{-- =================================================
                                            1. BROUILLON
                                            Modifier / Supprimer / Transmettre
                                        ================================================== --}}

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

                                            {{-- MODIFIER --}}

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

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

                                            </a>


                                            {{-- SUPPRIMER --}}

                                            <form
                                                action="{{ route(
                                                    'user.engagementdepenses.destroy',
                                                    $engagement->id
                                                ) }}"
                                                method="POST"
                                                style="display:inline-block;"
                                                onsubmit="return confirm(
                                                    'Voulez-vous vraiment supprimer cet engagement ?'
                                                );"
                                            >

                                                @csrf

                                                @method('DELETE')

                                                <button
                                                    type="submit"
                                                    class="btn btn-danger btn-sm mr-1 action-btn"
                                                    data-label="Supprimer"
                                                    title="Supprimer l'engagement"
                                                >

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

                                                </button>

                                            </form>


                                            {{-- TRANSMETTRE AU DIRECTEUR --}}

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

                                                @csrf

                                                <button
                                                    type="submit"
                                                    class="btn btn-success btn-sm action-btn"
                                                    data-label="Transmettre au Directeur"
                                                    title="Transmettre au Directeur"
                                                    onclick="return confirm(
                                                        'Voulez-vous transmettre cet engagement au Directeur ?'
                                                    );"
                                                >

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

                                                </button>

                                            </form>


                                        {{-- =================================================
                                            2. TRANSMIS AU DIRECTEUR
                                        ================================================== --}}

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

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

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

                                                Engagement transmis au Directeur

                                            </span>


                                        {{-- =================================================
                                            3. RETOUR DU DIRECTEUR
                                            → CORRECTION SUR LE PREMIER ÉCRAN
                                        ================================================== --}}

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

                                            {{-- BADGE --}}

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

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

                                                Retour pour correction

                                            </span>


                                            {{-- MODIFIER / CORRIGER --}}

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

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

                                            </a>


                                            {{-- RETRANSMETTRE AU DIRECTEUR --}}

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

                                                @csrf

                                                <button
                                                    type="submit"
                                                    class="btn btn-success btn-sm action-btn"
                                                    data-label="Retransmettre au Directeur"
                                                    title="Retransmettre au Directeur"
                                                    onclick="return confirm(
                                                        'Voulez-vous retransmettre cet engagement au Directeur après correction ?'
                                                    );"
                                                >

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

                                                </button>

                                            </form>


                                        {{-- =================================================
                                            4. RETOUR DE L'APPRO
                                            → CORRECTION SUR LE PREMIER ÉCRAN
                                        ================================================== --}}

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

                                            {{-- BADGE --}}

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

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

                                                Retour pour correction

                                            </span>


                                            {{-- MODIFIER / CORRIGER --}}

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

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

                                            </a>


                                            {{-- RETRANSMETTRE AU DIRECTEUR --}}

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

                                                @csrf

                                                <button
                                                    type="submit"
                                                    class="btn btn-success btn-sm action-btn"
                                                    data-label="Retransmettre au Directeur"
                                                    title="Retransmettre au Directeur"
                                                    onclick="return confirm(
                                                        'Voulez-vous retransmettre cet engagement au Directeur après correction ?'
                                                    );"
                                                >

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

                                                </button>

                                            </form>


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

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

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

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

                                                Engagement transmis à l'APPRO

                                            </span>


                                        {{-- =================================================
                                            6. TRANSMIS AU CONTRÔLEUR
                                        ================================================== --}}

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

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

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

                                                Engagement transmis au Controleur

                                            </span>


                                        {{-- =================================================
                                            7. VALIDÉ PAR LE CONTRÔLEUR
                                        ================================================== --}}

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

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

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

                                                Engagement validé

                                            </span>


                                        {{-- =================================================
                                            8. ENGAGEMENT FINALISÉ
                                        ================================================== --}}

                                        @elseif($engagement->status === '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>


                                        {{-- =================================================
                                            9. 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
                                        Le même motif est visible sur l'écran 1
                                        pour les deux types de retour.
                                    ================================================== --}}

                                    <td>

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

                            @endforeach

                        @endif

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

{{-- =====================================================
    MODALS (HORS TABLE — IMPORTANT)
===================================================== --}}

@foreach($engagements as $engagement)

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



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

                                            <td>

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

                                            </td>


                                            <td>
                                                {{ $detail->details }}
                                            </td>


                                            <td class="text-center">

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

                                            </td>


                                            <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 article enregistré.

                                            </td>

                                        </tr>

                                    @endforelse

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>



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

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



@endforeach
<!-- =====================================================
    SCRIPT TABLEAU DYNAMIQUE POUR DETAILS DEPENSE
===================================================== -->

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

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

    let currentStep = 1;
    const steps = document.querySelectorAll('.step');
    const totalSteps = steps.length;

    function showStep(step) {

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

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

        if (!current || !next) return;

        current.style.opacity = "0";
        current.style.transform = "translateX(-10px)";

        setTimeout(() => {

            current.style.display = "none";
            current.classList.remove('active');

            next.style.display = "block";

            requestAnimationFrame(() => {
                next.style.opacity = "1";
                next.style.transform = "translateX(0)";
                next.classList.add('active');
            });

            currentStep = step;

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

        }, 180);
    }

    document.querySelectorAll('.next').forEach(btn => {
    btn.addEventListener('click', function () {

        const currentStepEl = document.getElementById('step' + currentStep);

        // 🔥 STEP 1 VALIDATION
        if (currentStep === 1) {

            const inputs = currentStepEl.querySelectorAll('input, select, textarea');
            let isValid = true;

            inputs.forEach(input => {

                if (input.type === 'hidden' || input.hasAttribute('readonly')) return;

                if (input.hasAttribute('required') && !input.value.trim()) {
                    isValid = false;
                    input.classList.add('is-invalid');
                } else {
                    input.classList.remove('is-invalid');
                }
            });

            if (!isValid) {

                Swal.fire({
                    icon: 'error',
                    title: 'Oupssss 😅',
                    text: 'Veuillez remplir tous les champs obligatoires avant de continuer.'
                });

                return; // 🚨 STOP
            }
        }

        // ✔ sinon navigation normale
        showStep(currentStep + 1);
    });
});

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

    function initSteps() {

        steps.forEach(s => {
            s.style.display = "none";
            s.style.opacity = "0";
        });

        const first = document.getElementById('step1');

        if (first) {
            first.style.display = "block";
            first.style.opacity = "1";
            first.classList.add('active');
        }

        currentStep = 1;
    }

    initSteps();


    /* =====================================================
       TABLE DYNAMIQUE + SUPPRESSION PROPRE
    ===================================================== */

   const addRowBtn = document.getElementById('addRow');
const depenseBody = document.getElementById('depenseBody');

if (addRowBtn && depenseBody) {

    // AJOUT D'UNE LIGNE
    addRowBtn.addEventListener('click', function () {

        const row = `
            <tr>

                <!-- DESIGNATION -->
                <td>
                    <input
                        type="text"
                        name="designation[]"
                        class="form-control"
                        placeholder="Désignation"
                        required>
                </td>

                <!-- DETAILS -->
                <td>
                    <input
                        type="text"
                        name="details[]"
                        class="form-control"
                        placeholder="Détails de la dépense"
                        required>
                </td>

                <!-- NOMBRE -->
                <td>
                    <input
                        type="number"
                        name="nombre[]"
                        class="form-control text-center"
                        min="1"
                        value="1"
                        required>
                </td>

                <!-- QUANTITE -->
                <td>
                    <input
                        type="number"
                        name="quantite[]"
                        class="form-control text-center"
                        min="1"
                        value="1"
                        required>
                </td>

                <!-- ACTION -->
                <td class="text-center">
                    <button
                        type="button"
                        class="btn btn-outline-danger btn-sm removeRow">

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

                    </button>
                </td>

            </tr>
        `;

        depenseBody.insertAdjacentHTML('beforeend', row);

    });

        // SUPPRESSION + CONFIRMATION SWEETALERT
        depenseBody.addEventListener('click', function (e) {

            const btn = e.target.closest('.removeRow');
            if (!btn) return;

            const row = btn.closest('tr');
            const rows = depenseBody.querySelectorAll('tr');

            // 🚨 BLOQUER LA PREMIÈRE LIGNE
            if (row === rows[0]) {

                Swal.fire({
                    icon: 'error',
                    title: 'Oupssss 😅',
                    text: 'Impossible de supprimer la première ligne.',
                    confirmButtonColor: '#d33'
                });

                return;
            }

            // ⚠️ CONFIRMATION
            Swal.fire({
                title: 'Êtes-vous sûr ? 🤔',
                text: "Cette ligne sera supprimée définitivement.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#16a34a',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui, supprimer',
                cancelButtonText: 'Annuler'
            }).then((result) => {

                if (result.isConfirmed) {

                    row.remove();

                    Swal.fire({
                        icon: 'success',
                        title: 'Supprimé !',
                        text: 'La ligne a été supprimée.',
                        timer: 1500,
                        showConfirmButton: false
                    });

                }

            });

        });
    }

});
</script>
<script>
document.querySelector('#step1 .next').addEventListener('click', function () {

    const step1 = document.getElementById('step1');
    const inputs = step1.querySelectorAll('input, select, textarea');

    let isValid = true;

    inputs.forEach(input => {

        // ignorer les hidden + readonly
        if (input.type === 'hidden' || input.hasAttribute('readonly')) {
            return;
        }

        // validation required
        if (input.hasAttribute('required') && !input.value.trim()) {
            isValid = false;
            input.classList.add('is-invalid');
        } else {
            input.classList.remove('is-invalid');
        }
    });

    if (!isValid) {

        Swal.fire({
            icon: 'error',
            title: 'Oupssss 😅',
            text: 'Veuillez remplir tous les champs obligatoires avant de continuer.',
            confirmButtonColor: '#d33'
        });

        return; // 🚨 BLOQUE le passage
    }

    // ✅ tout est OK → passer au step 2
    showStep(2);

});
</script>

<script>

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

    /*
    |--------------------------------------------------------------------------
    | Récupération des champs
    |--------------------------------------------------------------------------
    */

    const numeroDocument =
        document.getElementById('numero_document');

    const besoinOrdinaire =
        document.getElementById('besoin_ordinaire');

    const referenceDocument =
        document.getElementById('reference_document');


    /*
    |--------------------------------------------------------------------------
    | Vérification
    |--------------------------------------------------------------------------
    */

    if (
        !numeroDocument ||
        !besoinOrdinaire ||
        !referenceDocument
    ) {
        return;
    }


    /*
    |--------------------------------------------------------------------------
    | Génération automatique de la référence
    |--------------------------------------------------------------------------
    */

    function genererReference() {

        const numeroTDR =
            numeroDocument.value.trim();

        const numeroBO =
            besoinOrdinaire.value.trim();


        /*
        |--------------------------------------------------------------------------
        | Aucun des deux
        |--------------------------------------------------------------------------
        */

        if (
            numeroTDR === '' &&
            numeroBO === ''
        ) {

            referenceDocument.value = '';

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | Déterminer le numéro utilisé
        |--------------------------------------------------------------------------
        */

        let numero = '';

        let prefixe = '';


        /*
        |--------------------------------------------------------------------------
        | Document TDR
        |--------------------------------------------------------------------------
        */

        if (numeroTDR !== '') {

            numero = numeroTDR;

            prefixe = 'REF-TDR';

        }


        /*
        |--------------------------------------------------------------------------
        | Besoin ordinaire
        |--------------------------------------------------------------------------
        */

        else if (numeroBO !== '') {

            numero = numeroBO;

            prefixe = 'REF-BO';

        }


        /*
        |--------------------------------------------------------------------------
        | Année
        |--------------------------------------------------------------------------
        */

        const annee =
            new Date().getFullYear();


        /*
        |--------------------------------------------------------------------------
        | Découpage du numéro
        |--------------------------------------------------------------------------
        */

        const morceaux =
            numero.split('/');


        let reference = '';


        /*
        |--------------------------------------------------------------------------
        | Exemple :
        |
        | TDR/ANADER/2026/025
        |
        | devient :
        |
        | REF-TDR-2026-025
        |--------------------------------------------------------------------------
        */

        if (morceaux.length >= 2) {

            const dernier =
                morceaux[morceaux.length - 1];

            reference =
                prefixe +
                '-' +
                annee +
                '-' +
                dernier;

        }

        else {

            reference =
                prefixe +
                '-' +
                annee +
                '-' +
                numero;

        }


        /*
        |--------------------------------------------------------------------------
        | Affectation
        |--------------------------------------------------------------------------
        */

        referenceDocument.value =
            reference;

    }


    /*
    |--------------------------------------------------------------------------
    | Désactivation du champ opposé
    |--------------------------------------------------------------------------
    */

    function gererChamps() {

        const numeroTDR =
            numeroDocument.value.trim();

        const numeroBO =
            besoinOrdinaire.value.trim();


        /*
        |--------------------------------------------------------------------------
        | TDR renseigné
        |--------------------------------------------------------------------------
        */

        if (numeroTDR !== '') {

            besoinOrdinaire.disabled = true;

            besoinOrdinaire.classList.add(
                'field-disabled'
            );

        }


        /*
        |--------------------------------------------------------------------------
        | Besoin ordinaire renseigné
        |--------------------------------------------------------------------------
        */

        else if (numeroBO !== '') {

            numeroDocument.disabled = true;

            numeroDocument.classList.add(
                'field-disabled'
            );

        }


        /*
        |--------------------------------------------------------------------------
        | Aucun champ renseigné
        |
        | On réactive les deux
        |--------------------------------------------------------------------------
        */

        else {

            numeroDocument.disabled = false;

            besoinOrdinaire.disabled = false;


            numeroDocument.classList.remove(
                'field-disabled'
            );

            besoinOrdinaire.classList.remove(
                'field-disabled'
            );

        }


        /*
        |--------------------------------------------------------------------------
        | Génération de la référence
        |--------------------------------------------------------------------------
        */

        genererReference();

    }


    /*
    |--------------------------------------------------------------------------
    | SAISIE TDR
    |--------------------------------------------------------------------------
    */

    numeroDocument.addEventListener(
        'input',
        function () {

            gererChamps();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | SAISIE BESOIN ORDINAIRE
    |--------------------------------------------------------------------------
    */

    besoinOrdinaire.addEventListener(
        'input',
        function () {

            gererChamps();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Initialisation
    |--------------------------------------------------------------------------
    |
    | Important pour le mode EDIT.
    | Si un engagement existe déjà avec un TDR,
    | le besoin ordinaire sera automatiquement désactivé.
    |--------------------------------------------------------------------------
    */

    gererChamps();

});

</script>
@endsection