@extends('layouts.master')

@section('title', 'Compléter l\'engagement')

<link
    href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
    rel="stylesheet"
/>
@section('content')

<style>

/* =====================================================
   SELECT2 - FOURNISSEUR
===================================================== */

.select2-container {

    width: 100% !important;

}


.select2-container
.select2-selection--single {

    height: 54px !important;

    border: 2px solid #e2e8f0 !important;

    border-radius: 16px !important;

    background: #fff !important;

    transition: .25s;

}


.select2-container
.select2-selection--single
.select2-selection__rendered {

    line-height: 50px !important;

    padding-left: 16px !important;

    color: #334155 !important;

    font-weight: 500;

}


.select2-container
.select2-selection--single
.select2-selection__arrow {

    height: 50px !important;

    right: 10px !important;

}


.select2-container--default
.select2-selection--single:focus,
.select2-container--default.select2-container--open
.select2-selection--single {

    border-color: #2563eb !important;

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

}


/* =====================================================
   LISTE DES RÉSULTATS
===================================================== */

.select2-dropdown {

    border: 2px solid #e2e8f0 !important;

    border-radius: 14px !important;

    overflow: hidden;

    box-shadow:
        0 15px 35px rgba(15,23,42,.12);

}


/* =====================================================
   CHAMP DE RECHERCHE
===================================================== */

.select2-search--dropdown {

    padding: 10px !important;

}


.select2-search--dropdown
.select2-search__field {

    height: 45px;

    border: 2px solid #e2e8f0 !important;

    border-radius: 12px;

    padding: 8px 12px;

    outline: none;

}


.select2-search--dropdown
.select2-search__field:focus {

    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);

}


/* =====================================================
   OPTIONS
===================================================== */

.select2-results__option {

    padding: 12px 15px;

    color: #334155;

}


.select2-results__option--highlighted {

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

    color: #fff !important;

}


/* =====================================================
   MESSAGE AUCUN RÉSULTAT
===================================================== */

.select2-results__option[aria-disabled="true"] {

    color: #64748b;

}

</style>

<style>

.form-control {
    min-height:54px;
    border-radius:16px;
}


/* =====================================================
   DESIGN COMPLETION ENGAGEMENT
===================================================== */

:root{

    --primary:#2563eb;
    --secondary:#4f46e5;

    --success:#16a34a;
    --success-light:#22c55e;

    --orange:#f97316;
    --orange-light:#f59e0b;

    --dark:#0f172a;
    --text:#334155;
    --muted:#64748b;

    --border:#e2e8f0;

    --readonly:#f8fafc;

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


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

body{

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

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


/* =====================================================
   PAGE HEADER
===================================================== */

.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 ANADER */

.page-header::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

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


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


/* =====================================================
   CARDS
===================================================== */

.card{

    border:none !important;

    border-radius:28px !important;

    overflow:hidden;

    background:#ffffff;

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


.card-header{

    padding:20px 28px !important;

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

    background:#ffffff !important;
}


.card-body{

    padding:25px;
}


/* =====================================================
   CARD INFORMATIONS VALIDÉES
===================================================== */

.card-validated{

    border:2px solid #d1d5db !important;

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


.card-validated .card-header{

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

    color:#374151;

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


.card-validated .card-header i{

    color:#64748b;
}


/* =====================================================
   CARD INFORMATIONS À COMPLÉTER
===================================================== */

.card-completion{

    border:2px solid #16a34a !important;

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


.card-completion .card-header{

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

    color:#ffffff !important;

    border-bottom:none !important;
}


/* =====================================================
   LABELS
===================================================== */

label{

    color:#475569;

    font-weight:600;

    margin-bottom:8px;

    display:block;
}


/* =====================================================
   INPUTS
===================================================== */

.form-control,
.custom-select{

    min-height:54px;

    border-radius:16px;

    border:2px solid #e2e8f0;

    background:#ffffff;

    color:#334155;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


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

    border-color:#2563eb;

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

    outline:none;
}


/* =====================================================
   CHAMPS VALIDÉS / READONLY
===================================================== */

.form-control-readonly{

    background:#f8fafc !important;

    border:2px dashed #cbd5e1 !important;

    color:#475569 !important;

    cursor:not-allowed;

    box-shadow:none !important;
}


.form-control-readonly:focus{

    border-color:#cbd5e1 !important;

    box-shadow:none !important;
}


/* =====================================================
   ICONE CHAMP VALIDÉ
===================================================== */

.readonly-wrapper{

    position:relative;
}


.readonly-wrapper .readonly-icon{

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    pointer-events:none;
}


/* =====================================================
   CHAMPS À COMPLÉTER
===================================================== */

.editable-field{

    background:#ffffff !important;

    border:2px solid #bbf7d0 !important;

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


.editable-field:focus{

    border-color:#16a34a !important;

    box-shadow:
        0 0 0 4px rgba(22,163,74,.12) !important;
}


/* =====================================================
   LABEL CHAMP MODIFIABLE
===================================================== */

.editable-label{

    color:#15803d;

    font-weight:700;
}


.required{

    color:#dc2626;

    margin-left:3px;
}


/* =====================================================
   BADGE LECTURE SEULE
===================================================== */

.badge-readonly{

    background:#e2e8f0;

    color:#475569;

    border-radius:50px;

    padding:7px 14px;

    font-size:11px;

    font-weight:600;
}


/* =====================================================
   BADGE MODIFIABLE
===================================================== */

.badge-editable{

    background:#dcfce7;

    color:#15803d;

    border-radius:50px;

    padding:7px 14px;

    font-size:11px;

    font-weight:600;
}


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

.details-table-wrapper{

    border-radius:20px;

    overflow:hidden;

    border:1px solid #e2e8f0;
}


.details-table{

    width:100%;

    margin-bottom:0;
}


.details-table thead th{

    background:#f3f4f6;

    color:#374151;

    border-bottom:2px solid #d1d5db;

    padding:14px;

    font-size:.85rem;

    font-weight:700;

    white-space:nowrap;
}


.details-table tbody td{

    vertical-align:middle;

    padding:12px;

    border-top:1px solid #eef2f7;

}


.details-table tbody tr:hover{

    background:#f8fafc;
}


/* =====================================================
   SECTION TITLE
===================================================== */

.section-title{

    display:flex;

    align-items:center;

    gap:10px;

    color:#334155;

    font-weight:700;

    margin-bottom:20px;
}


.section-title .section-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#eef2ff;

    color:#2563eb;
}


/* =====================================================
   INFORMATION LOCK
===================================================== */

.lock-message{

    display:flex;

    align-items:center;

    gap:10px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:14px;

    padding:12px 15px;

    margin-bottom:22px;

    color:#64748b;

    font-size:.85rem;
}


.lock-message i{

    color:#64748b;
}


/* =====================================================
   INFORMATION COMPLETION
===================================================== */

.completion-message{

    display:flex;

    align-items:center;

    gap:10px;

    background:#f0fdf4;

    border:1px solid #bbf7d0;

    border-radius:14px;

    padding:12px 15px;

    margin-bottom:22px;

    color:#166534;

    font-size:.85rem;
}


.completion-message i{

    color:#16a34a;
}


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

.input-group .form-control{

    border-radius:16px 0 0 16px;
}


.input-group .input-group-text{

    min-height:54px;

    border:2px solid #bbf7d0;

    border-left:none;

    border-radius:0 16px 16px 0;

    background:#f0fdf4;

    color:#15803d;

    font-weight:700;
}


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

.btn{

    border-radius:14px;

    font-weight:600;

    padding:10px 20px;

    border:none;

    transition:.25s;
}


.btn:hover{

    transform:translateY(-2px);
}


/* Retour */

.btn-back{

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

    color:#ffffff !important;

    box-shadow:
        0 8px 18px rgba(100,116,139,.20);
}


.btn-back:hover{

    color:#ffffff !important;

    box-shadow:
        0 12px 25px rgba(100,116,139,.30);
}


/* Enregistrer */

.btn-complete{

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

    color:#ffffff !important;

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


.btn-complete:hover{

    color:#ffffff !important;

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


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

.form-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:20px 25px;

    background:#ffffff;

    border-top:1px solid #f1f5f9;
}


/* =====================================================
   ALERTES
===================================================== */

.alert{

    border:none;

    border-radius:18px;
}


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

::-webkit-scrollbar{

    width:9px;

    height:9px;
}


::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:50px;
}


::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;
}


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

@media(max-width:768px){

    .page-header{

        padding:22px;

    }

    .card-body{

        padding:18px;

    }

    .form-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .form-footer .btn{

        width:100%;

    }

}

</style>


<div class="container-fluid">


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

    <div class="page-header">

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

            <div>

                <h3>

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

                    Compléter l'engagement de dépense

                </h3>

                <small>

                    Ajoutez le fournisseur et le montant définitif
                    après validation du Contrôleur de gestion.

                </small>

            </div>

        </div>

    </div>


    {{-- =====================================================
        FORMULAIRE
    ====================================================== --}}

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

        @csrf

        @method('PUT')


        {{-- =====================================================
            INFORMATIONS VALIDÉES
        ====================================================== --}}

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

            <div class="card-header">

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

                    <h5 class="mb-0">

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

                        Informations validées

                    </h5>

                    <span class="badge-readonly">

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

                        Lecture seule

                    </span>

                </div>

            </div>


            <div class="card-body">


                <div class="lock-message">

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

                    <span>
                        Ces informations ont déjà été validées.
                        Elles ne peuvent plus être modifiées.
                    </span>

                </div>


                {{-- =================================================
                    INFORMATIONS GENERALES
                ================================================== --}}

                <div class="section-title">

                    <div class="section-icon">

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

                    </div>

                    <span>
                        Informations générales
                    </span>

                </div>


                <div class="row">


                    {{-- NUMERO BR --}}

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

                        <label>
                            Numéro BR
                        </label>

                        <div class="readonly-wrapper">

                            <input
                                type="text"
                                class="form-control form-control-readonly"
                                value="{{ $engagement->numero_br }}"
                                readonly
                            >

                            <i class="fas fa-lock readonly-icon"></i>

                        </div>

                    </div>


                    {{-- DATE BESOIN --}}

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

                        <label>
                            Date du besoin
                        </label>

                        <div class="readonly-wrapper">

                            <input
                                type="date"
                                class="form-control form-control-readonly"
                                value="{{ $engagement->date_besoin }}"
                                readonly
                            >

                            <i class="fas fa-lock readonly-icon"></i>

                        </div>

                    </div>


                    {{-- RESPONSABLE --}}

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

                        <label>
                            Responsable
                        </label>

                        <div class="readonly-wrapper">

                            <input
                                type="text"
                                class="form-control form-control-readonly"
                                value="{{ $engagement->responsable }}"
                                readonly
                            >

                            <i class="fas fa-lock readonly-icon"></i>

                        </div>

                    </div>


                </div>


                <div class="row">


                    {{-- DIRECTION --}}

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

                        <label>
                            Direction
                        </label>

                        <div class="readonly-wrapper">

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

                            <i class="fas fa-lock readonly-icon"></i>

                        </div>

                    </div>


                    {{-- CENTRE RESPONSABILITE --}}

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

                        <label>
                            Centre de responsabilité
                        </label>

                        <div class="readonly-wrapper">

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

                            <i class="fas fa-lock readonly-icon"></i>

                        </div>

                    </div>


                </div>


                {{-- =================================================
                    DETAILS ENGAGEMENT
                ================================================== --}}

                <hr class="my-4">


                <div class="section-title">

                    <div class="section-icon">

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

                    </div>

                    <span>
                        Détails de la dépense
                    </span>

                </div>

<div class="details-table-wrapper">

    <div class="table-responsive">

        <table class="table details-table">

            <thead>

                <tr>

                    <th>
                        Désignation
                    </th>

                    <th>
                        Détails
                    </th>

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

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

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

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

                </tr>

            </thead>


            <tbody>

            @php
                $totalGeneral = 0;
            @endphp


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

                @php
                    $nombre = (float) ($detail->nombre ?? 0);
                    $quantite = (float) ($detail->quantite ?? 0);
                    $coutUnitaire = (float) ($detail->cout_unitaire ?? 0);

                    $montantLigne = $nombre * $quantite * $coutUnitaire;

                    $totalGeneral += $montantLigne;
                @endphp


                <tr>

                    {{-- ===============================
                         DESIGNATION
                    ================================ --}}

                    <td>

                        <input
                            type="text"
                            class="form-control form-control-readonly"
                            value="{{ $detail->designation }}"
                            readonly
                        >

                    </td>


                    {{-- ===============================
                         DETAILS
                    ================================ --}}

                    <td>

                        <input
                            type="text"
                            class="form-control form-control-readonly"
                            value="{{ $detail->details }}"
                            readonly
                        >

                    </td>


                    {{-- ===============================
                         NOMBRE
                    ================================ --}}

                    <td>

                        <input
                            type="text"
                            class="form-control form-control-readonly text-center"
                            value="{{ $detail->nombre }}"
                            readonly
                        >

                    </td>


                    {{-- ===============================
                         QUANTITE
                    ================================ --}}

                    <td>

                        <input
                            type="text"
                            class="form-control form-control-readonly text-center"
                            value="{{ $detail->quantite }}"
                            readonly
                        >

                    </td>


                    {{-- ===============================
                         COUT UNITAIRE
                    ================================ --}}

                    <td>

                        <input
                            type="text"
                            class="form-control form-control-readonly text-right"
                            value="{{ number_format($coutUnitaire, 0, ',', ' ') }} FCFA"
                            readonly
                        >

                    </td>


                    {{-- ===============================
                         MONTANT LIGNE
                    ================================ --}}

                    <td>

                        <input
                            type="text"
                            class="form-control form-control-readonly text-right font-weight-bold"
                            value="{{ number_format($montantLigne, 0, ',', ' ') }} FCFA"
                            readonly
                        >

                    </td>

                </tr>


            @empty

                <tr>

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

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

                        Aucun détail disponible.

                    </td>

                </tr>

            @endforelse


            {{-- =================================================
                 TOTAL GENERAL
            ================================================== --}}

            @if($engagement->engagementdetails->count() > 0)

                <tr class="total-row">

                    <td
                        colspan="5"
                        class="text-right font-weight-bold"
                    >

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

                        TOTAL GÉNÉRAL

                    </td>

                    <td
                        class="text-right font-weight-bold total-amount"
                    >

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

                        FCFA

                    </td>

                </tr>

            @endif

            </tbody>

        </table>

    </div>

</div>

            </div>

        </div>


        {{-- =====================================================
            INFORMATIONS À COMPLÉTER
        ====================================================== --}}

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

    <div class="card-header">

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

            <h5 class="mb-0">

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

                Informations à compléter

            </h5>

            <span class="badge-editable">

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

                À renseigner

            </span>

        </div>

    </div>


    <div class="card-body">


        <div class="completion-message">

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

            <span>

                Les informations ci-dessous doivent être renseignées
                par l'Appro après la validation du Contrôleur.

            </span>

        </div>


         {{-- =====================================================
             RÉFÉRENCES ADMINISTRATIVES
        ====================================================== --}}

        <div class="row">


            {{-- BON DE RÉQUISITION --}}

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

                <label
                    for="bon_requisition_reference"
                    class="editable-label"
                >

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

                    Référence du bon de réquisition

                </label>


                <input
                    type="text"
                    name="bon_requisition_reference"
                    id="bon_requisition_reference"

                    class="form-control editable-field"

                    value="{{ old(
                        'bon_requisition_reference',
                        $consolidation->bon_requisition_reference ?? ''
                    ) }}"

                    placeholder="Ex. BR/2026/001"
                >


                @error('bon_requisition_reference')

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

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

                        {{ $message }}

                    </small>

                @enderror

            </div>


            {{-- FACTURE --}}

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

                <label
                    for="facture_reference"
                    class="editable-label"
                >

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

                    Référence de la facture

                </label>


                <input
                    type="text"
                    name="facture_reference"
                    id="facture_reference"

                    class="form-control editable-field"

                    value="{{ old(
                        'facture_reference',
                        $consolidation->facture_reference ?? ''
                    ) }}"

                    placeholder="Ex. FAC/2026/001"
                >


                @error('facture_reference')

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

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

                        {{ $message }}

                    </small>

                @enderror

            </div>


            {{-- BON DE LIVRAISON --}}

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

                <label
                    for="bon_livraison_reference"
                    class="editable-label"
                >

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

                    Référence du bon de livraison

                </label>


                <input
                    type="text"
                    name="bon_livraison_reference"
                    id="bon_livraison_reference"

                    class="form-control editable-field"

                    value="{{ old(
                        'bon_livraison_reference',
                        $consolidation->bon_livraison_reference ?? ''
                    ) }}"

                    placeholder="Ex. BL/2026/001"
                >


                @error('bon_livraison_reference')

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

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

                        {{ $message }}

                    </small>

                @enderror

            </div>


        </div>



        {{-- =====================================================
             FOURNISSEUR + MONTANT
        ====================================================== --}}


        <div class="row">


            {{-- FOURNISSEUR --}}

            {{-- =====================================================
     FOURNISSEUR
===================================================== --}}

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

    <label
        for="fournisseur_id"
        class="editable-label"
    >

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

        Fournisseur

        <span class="required">
            *
        </span>

    </label>


    <select
        name="fournisseur_id"
        id="fournisseur_id"
        class="form-control editable-field"
        required
    >

        <option value="">
            -- Rechercher ou sélectionner un fournisseur --
        </option>


        @foreach($fournisseurs as $fournisseur)

            @php

                $nomFournisseur =
                    $fournisseur->raison_sociale
                    ?? $fournisseur->nom
                    ?? 'Fournisseur #'.$fournisseur->id;

            @endphp


            <option
                value="{{ $fournisseur->id }}"

                {{ old(
                    'fournisseur_id',
                    $consolidation->fournisseur_id ?? ''
                ) == $fournisseur->id
                    ? 'selected'
                    : ''
                }}
            >

                {{ $nomFournisseur }}

            </option>

        @endforeach

    </select>


    @error('fournisseur_id')

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

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

            {{ $message }}

        </small>

    @enderror

</div>


            {{-- MONTANT DÉFINITIF --}}

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

                <label
                    for="montant_definitif"
                    class="editable-label"
                >

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

                    Montant définitif

                    <span class="required">
                        *
                    </span>

                </label>


                <div class="input-group">

                    <input
                        type="number"
                        name="montant_definitif"
                        id="montant_definitif"
                        class="form-control editable-field"
                        min="0.01"
                        step="0.01"

                        value="{{ old(
                            'montant_definitif',
                            $consolidation->montant_definitif ?? ''
                        ) }}"

                        placeholder="Ex. 1500000"

                        required
                    >


                    <div class="input-group-append">

                        <span class="input-group-text">
                            FCFA
                        </span>

                    </div>

                </div>


                @error('montant_definitif')

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

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

                        {{ $message }}

                    </small>

                @enderror

            </div>

        </div>


       

    </div>

</div>


        {{-- =====================================================
            BOUTONS
        ====================================================== --}}

        <div class="card mb-4">

            <div class="form-footer">


                {{-- RETOUR --}}

                <a
                    href="javascript:history.back()"
                    class="btn btn-back"
                >

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

                    Retour

                </a>


                {{-- ENREGISTRER --}}

                <button
                    type="submit"
                    class="btn btn-complete"
                    onclick="return confirm(
                        'Confirmez-vous l’enregistrement du fournisseur et du montant définitif ?'
                    );"
                >

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

                    Enregistrer la complétion

                </button>


            </div>

        </div>

    </form>

</div>


<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>

$(document).ready(function () {

    $('#fournisseur_id').select2({

        placeholder:
            '-- Rechercher ou sélectionner un fournisseur --',

        allowClear: true,

        width: '100%',

        language: {

            noResults: function () {

                return 'Aucun fournisseur trouvé';

            },

            searching: function () {

                return 'Recherche en cours...';

            }

        }

    });

});

</script>
@endsection