@extends('layouts.master')

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

@section('content')


<style>

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

:root{

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

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

    --card:#ffffff;

    --border:#e2e8f0;

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

}

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

body{

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

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

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

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

.page-header{

    background:#ffffff;

    border-radius:25px;

    padding:28px 35px;

    margin-bottom:25px;

    position:relative;

    overflow:hidden;

    border:1px solid #e5e7eb;

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

/* Bande supérieure */

.page-header::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

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

/* Bande inférieure */

.page-header::after{

    content:"";

    position:absolute;

    bottom:0;
    left:0;

    width:100%;
    height:6px;

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

.page-header h3{

    color:#1f2937;

    font-weight:700;

    margin-bottom:5px;

    letter-spacing:.5px;
}

.page-header small{

    color:#64748b;

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

.btn-new-engagement{

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

    color:white !important;

    border:none;

    border-radius:14px;

    padding:12px 22px;

    font-weight:600;

    transition:.3s;

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

.btn-new-engagement:hover{

    color:white;

    transform:translateY(-3px);

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

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

.card-header{

    background:white !important;

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

    padding:22px 30px !important;
}

.card{ 

    border:none !important;

    border-radius:28px !important;

    overflow:hidden;

    background:white;

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

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

.card-body{

    padding:20px;
}

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

.step{

    display:none;
}

.step.active{

    display:block;

    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

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

label{

    color:#475569;

    font-weight:600;

    margin-bottom:8px;
}

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

.form-control,
.custom-select{

    min-height:54px;

    border-radius:16px;

    border:2px solid #e2e8f0;

    background:#fff;

    transition:.25s;
}

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

    border-color:#2563eb;

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

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

.bg-readonly{

    background:#f8fafc !important;

    border-style:dashed !important;

    color:#475569;
}

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

.table{

    margin-bottom:0;
}

.table thead th{

    background:#f3f4f6;

    color:#374151;

    border-bottom:2px solid #d1d5db;
}

.table tbody td{

    vertical-align:middle;

    padding:12px;
}

.table tbody tr:hover{

    background:#f8fafc;
}

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

.table-responsive{

    border-radius:20px;

    overflow:hidden;
}

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

.btn{

    border-radius:14px;

    font-weight:600;

    padding:10px 20px;

    border:none;
}

.btn-primary{

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

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

.btn-primary:hover{

    transform:translateY(-2px);
}

.btn-success{

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

.btn-secondary{

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

    color:white;
}

.btn-danger{

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

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

.card-footer{

    background:white !important;

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

    padding:20px 30px;
}

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

.badge{

    border-radius:50px;

    padding:8px 15px;

    font-size:12px;
}

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

.steps-indicator{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:30px;
}

.step-circle{

    width:45px;
    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e2e8f0;

    color:#64748b;

    font-weight:700;
}

.step-circle.active{

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

    color:white;
}

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

#totalGeneral{

    font-size:18px;

    font-weight:700;

    color:#dc2626;
}

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

.alert{

    border:none;

    border-radius:20px;
}

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

#ligne_recap_engagement{

    background:#f8fafc;
}

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

::-webkit-scrollbar{

    height:10px;
    width:10px;
}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:50px;
}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;
}

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

.card-step1{

    border:2px solid #f97316 !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step1 .card-header{

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

    color:white !important;

    border-bottom:none !important;
}

.card-step1 .card-footer{

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

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

.card-step2{

    border:2px solid #d1d5db !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step2 .card-header{

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

    color:#374151 !important;

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

.card-step2 .card-footer{

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

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

.card-step3{

    border:2px solid #16a34a !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step3 .card-header{

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

    color:white !important;

    border-bottom:none !important;
}

.card-step3 .card-footer{

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

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

.card-step4{

    border:2px solid #15803d !important;

    border-radius:28px !important;

    overflow:hidden;

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

.card-step4 .card-header{

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

    color:white !important;

    border-bottom:none !important;
}

.card-step4 .card-footer{

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

.btn-add-row{

    background:#6b7280;

    color:#fff;

    border:none;
}

.btn-add-row:hover{

    background:#4b5563;

    color:#fff;
}

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

.step.active {
    display: block;
}

</style>

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

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

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

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

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

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

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

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

.modal-body{
    padding: 25px;
}

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

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

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

<style>
    .transition {
    transition: all 0.2s ease-in-out;
}

.transition:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
</style>

<div class="container-fluid">

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

        <div class="page-header">

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

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

                    <h3 class="mb-1 text-uppercase">
                        <i class="fas fa-file-signature mr-2"></i>
                        Modification de la depense   
                    </h3>

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

                </div>

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

                        Retour

                    </a>
                </div>

            </div>

        </div>

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

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

                    <span>&times;</span>

                </button>
            </div>
        @endif

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

    @if ($errors->any())

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

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

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

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

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

                @endforeach

            </ul>

        </div>

    @endif

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

    <div id="collapseEngagement">

        <form action="{{ route('user.engagementdepenses.update', $engagement->id) }}"
            method="POST"
            enctype="multipart/form-data">

            @csrf
            @method('PUT')

            <!-- =====================================================
                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="{{ optional(optional($engagement->budgetdepense)->besoinbudgetaire)->exercice }}"
               readonly>
    </div>


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

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


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

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

</div>



<div class="row">

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

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


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

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


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

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

</div>



<div class="row">

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

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


    <!-- 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 }}"
                    {{ old('direction_id',$engagement->direction_id)==$direction->id?'selected':'' }}>

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

                    </option>

                @endforeach

            </select>

        @else

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

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

        @endif

    </div>


    <!-- Centre -->
    <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 }}"
                    {{ old('centrerespo_id',$engagement->centrerespo_id)==$centre->id?'selected':'' }}>

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

                    </option>

                @endforeach

            </select>

        @else

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

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

        @endif

    </div>

</div>



<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',$engagement->numero_br) }}"
               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"
               class="form-control"
               value="{{ old('date_besoin',$engagement->date_besoin) }}"
               required>

    </div>

</div>



<div class="row">

    <!-- 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',$engagement->responsable) }}"
               required>

    </div>

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

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

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

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

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

        </select>

    </div>

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

                <div>

                    <h5 class="mb-1 text-dark font-weight-bold">
                        <i class="fas fa-shopping-cart mr-2"></i>
                        Modification des Détails de la Dépense
                    </h5>

                    <small class="text-muted">
                        Modifier les articles existants ou ajouter de nouveaux articles
                    </small>

                </div>

                <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"
               style="table-layout: fixed; width:100%;">

            <thead class="bg-light">

                <tr class="text-center">

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

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

                    <th style="width:15%;">
                        Nombre
                    </th>

                    <th style="width:15%;">
                        Quantité
                    </th>

                    <th style="width:10%;">
                        Action
                    </th>

                </tr>

            </thead>


            <tbody id="depenseBody">

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

                    <tr>

                        <input type="hidden"
                               name="detail_id[]"
                               value="{{ $detail->id }}">


                        <td>
                            <input type="text"
                                   name="designation[]"
                                   class="form-control"
                                   value="{{ $detail->designation }}"
                                   required>
                        </td>


                        <td>
                            <input type="text"
                                   name="details[]"
                                   class="form-control"
                                   value="{{ $detail->details }}"
                                   required>
                        </td>


                        <td>
                            <input type="text"
                                   name="nombre[]"
                                   class="form-control text-center"
                                   value="{{ $detail->nombre }}"
                                   required>
                        </td>


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


                        <td class="text-center">

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

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

                            </button>

                        </td>


                    </tr>


                @empty

                    <tr>

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

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

                            Aucune dépense enregistrée.

                        </td>

                    </tr>

                @endforelse


            </tbody>

        </table>

    </div>

</div>

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

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

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

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

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

                                Précédent

                            </button>

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

                                Suivant

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

                            </button>

                        </div>

                    </div>

                </div>

            </div>


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

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

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

                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-paperclip"></i>
                            Modification des Pièces Jointes
                        </h5>
                    </div>

                   <div class="card-body">


                    <div class="row">

                    @php

                    $documents = $engagement->engagementdocuments ?? collect();

                    $tdr = $documents->where('type_document', 'tdr')->first();

                    // $proforma = $documents->where('type_document', 'proforma')->first();

                    // $autres = $documents->where('type_document', 'autres')->first();

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

<div class="row">

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

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

        <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
                {{ !empty($engagement->besoin_ordinaire) ? 'field-disabled' : '' }}"
            value="{{ old(
                'numero_document',
                $engagement->numero_document ?? ''
            ) }}"
            placeholder="Ex : TDR/ANADER/2026/025"
            autocomplete="off"
            {{ !empty($engagement->besoin_ordinaire) ? 'disabled' : '' }}
        >

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

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

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

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

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


                    <div class="card-footer">

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

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

                                Précédent

                            </button>

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

                                <i class="fas fa-save"></i>
                                Mettre à jour 

                            </button>

                        </div>

                    </div>

                </div>


            </div>
            
        </div>

    </form>

</div>


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

    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', () => 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();

});
</script>

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

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

    if (!depenseBody) return;

    /*=====================================================
      AJOUT D'UNE NOUVELLE LIGNE
    =====================================================*/
    if (addRowBtn) {

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

            const row = `
                <tr>

                    <input type="hidden"
                           name="detail_id[]"
                           value="">

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

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

                    <td>
                        <input type="text"
                               name="nombre[]"
                               class="form-control"
                               placeholder="1"
                               required>
                    </td>

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

                    <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 AVEC CONDITIONS
    =====================================================*/
    depenseBody.addEventListener("click", function (e) {

        const btn = e.target.closest(".removeRow");

        if (!btn) return;

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

        // ==========================================
        // INTERDIRE LA SUPPRESSION DE LA PREMIÈRE LIGNE
        // ==========================================
        if (row === rows[0]) {

            Swal.fire({

                icon: "error",

                title: "Oupssss 😅",

                text: "Impossible de supprimer la première ligne des détails de la dépense.",

                confirmButtonColor: "#d33"

            });

            return;
        }

        // ==========================================
        // CONFIRMATION POUR LES AUTRES LIGNES
        // ==========================================
        Swal.fire({

            title: "Êtes-vous sûr ? 🤔",

            text: "Cette ligne sera supprimée.",

            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ée ! 🎉",

                    text: "La ligne a été supprimée avec succès.",

                    timer: 1500,

                    showConfirmButton: false

                });

            }

        });

    });

});
</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 de la référence
    |--------------------------------------------------------------------------
    */

    function genererReference() {

        const numeroTDR =
            numeroDocument.value.trim();

        const numeroBO =
            besoinOrdinaire.value.trim();


        /*
        |--------------------------------------------------------------------------
        | Aucun numéro
        |--------------------------------------------------------------------------
        */

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

            referenceDocument.value = '';

            return;

        }


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

        let numero = '';
        let prefixe = '';


        if (numeroTDR !== '') {

            numero = numeroTDR;
            prefixe = 'REF-TDR';

        }

        else if (numeroBO !== '') {

            numero = numeroBO;
            prefixe = 'REF-BO';

        }


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

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


        /*
        |--------------------------------------------------------------------------
        | Découpage
        |--------------------------------------------------------------------------
        */

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


        let reference = '';


        if (morceaux.length >= 2) {

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

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

        }

        else {

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

        }


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

        referenceDocument.value =
            reference;

    }


    /*
    |--------------------------------------------------------------------------
    | Gestion TDR / Besoin ordinaire
    |--------------------------------------------------------------------------
    */

    function gererChamps(generer = true) {

        const numeroTDR =
            numeroDocument.value.trim();

        const numeroBO =
            besoinOrdinaire.value.trim();


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

        if (numeroTDR !== '') {

            besoinOrdinaire.disabled = true;

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

            numeroDocument.disabled = false;

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

        }


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

        else if (numeroBO !== '') {

            numeroDocument.disabled = true;

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

            besoinOrdinaire.disabled = false;

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

        }


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

        else {

            numeroDocument.disabled = false;

            besoinOrdinaire.disabled = false;

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

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

        }


        /*
        |--------------------------------------------------------------------------
        | Générer uniquement si demandé
        |--------------------------------------------------------------------------
        */

        if (generer) {

            genererReference();

        }

    }


    /*
    |--------------------------------------------------------------------------
    | Saisie TDR
    |--------------------------------------------------------------------------
    */

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

            gererChamps(true);

        }
    );


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

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

            gererChamps(true);

        }
    );


    /*
    |--------------------------------------------------------------------------
    | INITIALISATION EDIT
    |--------------------------------------------------------------------------
    |
    | On détecte d'abord les valeurs déjà enregistrées.
    |
    | La référence existante n'est PAS recalculée au chargement.
    |
    */

    gererChamps(false);

});

</script>
@endsection