@extends('layouts.master')

        @section('title', 'Lignes budgétaires')

        @section('content')

    <style>

    /*====================================================
                    THEME ANADER 2026
            Orange • Blanc • Vert
    ====================================================*/

    :root{

        --orange:#f97316;
        --orange-light:#fb923c;

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

        --white:#ffffff;

        --dark:#1e293b;

        --gray:#64748b;

        --bg:#f6f9fc;

    }

    body{

        background:
        linear-gradient(180deg,#fff,#f9fafb,#eef8f1);

        font-family:'Segoe UI',sans-serif;

    }

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

    .page-header{

        position:relative;

        overflow:hidden;

        border-radius:35px;

        padding:35px 45px;

        background:linear-gradient(120deg,
                #ffffff 15%,
                #fff7ed 50%,
                #f0fdf4 100%);

        box-shadow:

            0 15px 45px rgba(15,23,42,.08);

        border:1px solid rgba(255,255,255,.8);

    }

    .page-header::before{

        content:"";

        position:absolute;

        width:280px;

        height:280px;

        background:rgba(249,115,22,.08);

        border-radius:50%;

        right:-120px;

        top:-120px;

    }

    .page-header::after{

        content:"";

        position:absolute;

        width:220px;

        height:220px;

        background:rgba(22,163,74,.08);

        border-radius:50%;

        left:-90px;

        bottom:-90px;

    }

    .page-header h3{

        color:var(--dark);

        font-weight:700;

        font-size:30px;

    }

    .page-header small{

        color:var(--gray);

        font-size:15px;

    }

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

    .card{

        border:none;

        border-radius:35px;

        overflow:hidden;

        background:#fff;

        box-shadow:

            0 15px 45px rgba(15,23,42,.08);

    }

    .card-header{

        background:linear-gradient(90deg,
            #f97316,
            #ffffff,
            #16a34a);

        padding:20px 28px;

        border:none;

    }

    .card-header h5{

        font-weight:700;

        color:#1e293b;

    }

    /*====================================================
                CARTES STATISTIQUES
    ====================================================*/

    .stats-wrapper{

        margin-bottom:35px;

    }

    .stats-card{

        background:#fff;

        border-radius:30px;

        overflow:hidden;

        border:none;

        box-shadow:

            0 10px 35px rgba(15,23,42,.07);

        transition:.35s;

    }

    .stats-card:hover{

        transform:translateY(-8px);

        box-shadow:

            0 20px 50px rgba(15,23,42,.12);

    }

    .stats-body{

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:28px;

    }

    .stats-icon{

        width:75px;

        height:75px;

        border-radius:25px;

        display:flex;

        justify-content:center;

        align-items:center;

        color:#fff;

        font-size:28px;

        box-shadow:0 12px 25px rgba(0,0,0,.12);

    }

    .bg-orange{

        background:linear-gradient(135deg,
                #f0ccae,
                #eebb97);

    }

    .bg-green{

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

    }

    .bg-blue{

        background:linear-gradient(135deg,
                #34d399,
                #16a34a);

    }

    .stats-title{

        font-size:13px;

        color:#64748b;

        text-transform:uppercase;

        letter-spacing:1px;

        font-weight:700;

    }

    .stats-value{

        margin-top:6px;

        font-size:35px;

        font-weight:700;

        color:#0f172a;

    }


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

    .table-container{
        border-radius:0 0 35px 35px;
        overflow:hidden;
    }

    .table-responsive{
        padding:8px;
        overflow-x:hidden;
    }

    /*-------------------------
            TABLEAU
    --------------------------*/

    .budget-table{
        width:100%;
        margin-bottom:0;
        table-layout:fixed;
        border-collapse:separate;
        border-spacing:0 6px;
    }

    /*-------------------------
            EN-TETE
    --------------------------*/

    .budget-table thead th{

        background:linear-gradient(90deg,#fb923c,#fdba74);

        color:#fff;

        border:none;

        padding:12px 10px;

        text-align:center;

        font-size:13px;

        font-weight:600;

        white-space:normal;

        line-height:1.3;

    }

    .budget-table thead th:first-child{

        border-top-left-radius:18px;

    }

    .budget-table thead th:last-child{

        border-top-right-radius:18px;

    }

    /*-------------------------
            LIGNES
    --------------------------*/

    .budget-table tbody tr{

        background:#fff;

        transition:.30s;

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

    }

    .budget-table tbody tr:hover{

        background:#fffdf9;

        transform:translateY(-2px);

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

    }

    .budget-table tbody td{

        padding:10px 8px;

        border:none;

        vertical-align:middle;

        white-space:normal;

        word-break:break-word;

        overflow-wrap:break-word;

        font-size:13px;

        line-height:1.35;

    }

    .budget-table tbody td:first-child{

        border-radius:18px 0 0 18px;

    }

    .budget-table tbody td:last-child{

        border-radius:0 18px 18px 0;

    }

    /*-------------------------
        LARGEUR DES COLONNES
    --------------------------*/

    .budget-table th:nth-child(1),
    .budget-table td:nth-child(1){
        width:55px;
    }

    .budget-table th:nth-child(2),
    .budget-table td:nth-child(2){
        width:90px;
    }

    .budget-table th:nth-child(3),
    .budget-table td:nth-child(3){
        width:150px;
    }

    .budget-table th:nth-child(4),
    .budget-table td:nth-child(4){
        width:145px;
    }

    .budget-table th:nth-child(5),
    .budget-table td:nth-child(5){
        width:120px;
    }

    .budget-table th:nth-child(6),
    .budget-table td:nth-child(6){
        width:130px;
    }

    .budget-table th:nth-child(7),
    .budget-table td:nth-child(7){
        width:110px;
    }

    .budget-table th:nth-child(8),
    .budget-table td:nth-child(8){
        width:110px;
    }

    .budget-table th:nth-child(9),
    .budget-table td:nth-child(9){
        width:120px;
    }
    /*====================================================
                    BADGE NUMERO
    ====================================================*/

    .badge-number{

        width:34px;

        height:34px;

        display:flex;

        align-items:center;

        justify-content:center;

        border-radius:50%;

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

        color:#fff;

        font-size:13px;

        font-weight:700;

        margin:auto;

    }

    /*====================================================
                    MONTANT
    ====================================================*/

    .budget-amount{

        display:inline-block;

        background:#ecfdf5;

        color:#15803d;

        padding:5px 10px;

        border-radius:30px;

        font-size:12px;

        font-weight:700;

    }

    /*====================================================
                    BOUTONS
    ====================================================*/

    .btn-engager{

        border:none;

        color:#fff;

        font-size:11px;

        font-weight:600;

        border-radius:30px;

        padding:6px 12px;

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

        transition:.30s;

    }

    .btn-engager:hover{

        color:#fff;

        transform:translateY(-2px);

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

    }

    .btn-warning,
    .btn-info{

        font-size:12px;

        border-radius:30px;

        padding:6px 12px;

    }

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

    .badge{

        border-radius:30px;

        padding:6px 12px;

        font-size:11px;

        font-weight:600;

    }

    /*====================================================
                ETAT VIDE
    ====================================================*/

    .empty-box{

        padding:60px 20px;

        text-align:center;

        color:#94a3b8;

    }

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

    .badge{

        border-radius:50px;

        padding:10px 18px;

        font-weight:600;

        font-size:12px;

    }

    /*====================================================
                ETAT VIDE
    ====================================================*/

    .empty-box{

        padding:70px 20px;

        text-align:center;

        color:#94a3b8;

    }

    .empty-box i{

        color:#f97316;

        margin-bottom:20px;

    }

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

    .table-responsive::-webkit-scrollbar{

        height:10px;

    }

    .table-responsive::-webkit-scrollbar-thumb{

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

        border-radius:30px;

    }

    .table-responsive::-webkit-scrollbar-track{

        background:#f3f4f6;

    }

    </style>

        <div class="container-fluid">

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

        <div class="page-header">

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

                <div>

                    <h3 class="mb-1">
                        <i class="fas fa-list-alt mr-2"></i>
                        Lignes Budgétaires Validées
                    </h3>

                    <small>
                        Sélectionnez une ligne budgétaire pour commencer un engagement de dépense
                    </small>

                </div>

            </div>

        </div>

    </div>


    {{-- Informations générales du budget --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body py-3">

            @php
                $premiereLigne = $lignes->first();
            @endphp

            <div class="row">

                <div class="col-md-4 mb-3 mb-md-0">
                    <small class="text-muted d-block">
                        <i class="fas fa-calendar-alt text-primary mr-1"></i>
                        Exercice
                    </small>

                    <h5 class="font-weight-bold mb-0">
                        {{ optional(optional($premiereLigne)->besoinbudgetaire)->exercice ?? '-' }}
                    </h5>
                </div>

                <div class="col-md-4 mb-3 mb-md-0">
                    <small class="text-muted d-block">
                        <i class="fas fa-building text-success mr-1"></i>
                        Direction
                    </small>

                    <h5 class="font-weight-bold mb-0">
                        {{ optional($premiereLigne->direction)->code ?? '-' }}
                        -
                        {{ optional($premiereLigne->direction)->libelle ?? '' }}
                    </h5>
                </div>

                <div class="col-md-4">
                    <small class="text-muted d-block">
                        <i class="fas fa-sitemap text-warning mr-1"></i>
                        Centre de responsabilité
                    </small>

                    <h5 class="font-weight-bold mb-0">
                        {{ optional($premiereLigne->centrerespo)->code ?? '-' }}
                        -
                        {{ optional($premiereLigne->centrerespo)->libelle_long ?? '' }}
                    </h5>
                </div>

            </div>

        </div>
    </div>

        <div class="row stats-wrapper">

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

            <div class="stats-card">

                <div class="stats-body">

                    <div>

                        <div class="stats-title">

                            Nombre de lignes

                        </div>

                        <div class="stats-value">

                            {{ $totalLignes }}

                        </div>

                    </div>

                    <div class="stats-icon bg-orange">

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

                    </div>

                </div>

            </div>

        </div>


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

            <div class="stats-card">

                <div class="stats-body">

                    <div>

                        <div class="stats-title">

                            Déjà engagées

                        </div>

                        <div class="stats-value text-success">

                            {{ $lignesEngagees }}

                        </div>

                    </div>

                    <div class="stats-icon bg-green">

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

                    </div>

                </div>

            </div>

        </div>


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

            <div class="stats-card">

                <div class="stats-body">

                    <div>

                        <div class="stats-title">

                            Restantes

                        </div>

                        <div class="stats-value text-primary">

                            {{ $lignesRestantes }}

                        </div>

                    </div>

                    <div class="stats-icon bg-blue">

                        <i class="fas fa-hourglass-half"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>



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

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

            <h5 class="mb-0">

                <i class="fas fa-table text-success"></i>

                Liste des lignes budgétaires

            </h5>

        </div>

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

            <div class="table-container">

                <div class="table-responsive">

                    <!-- votre tableau ici -->

                    <table class="table budget-table mb-0">

                        <thead>

    <tr>

        <th>N°</th>

        {{-- <th>Exercice</th> --}}

        <th>Code Budget</th>

        <th>Nom du Budget</th>

        {{-- <th>Direction</th> --}}

        {{-- <th>Centre de responsabilité</th> --}}

        {{-- <th>Poste de gestion</th> --}}

        <th>Activité</th>

        <th>Compte SYSCOHADA</th>

        {{-- <th>Nature de la dépense</th> --}}

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

        {{-- <th class="text-right">Montant engagé</th> --}}

        <th class="text-right">Solde disponible</th>

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

    </tr>

    </thead>

                        <tbody>

   @forelse($lignes as $ligne)

    @php

        /*
        |--------------------------------------------------------------------------
        | MONTANT BUDGÉTAIRE
        |--------------------------------------------------------------------------
        */

        $montantBudgetaire = (float) ($ligne->montant ?? 0);


        /*
        |--------------------------------------------------------------------------
        | MONTANT RÉELLEMENT CONSOLIDÉ
        |--------------------------------------------------------------------------
        |
        | On récupère uniquement les montants réellement consommés
        | sur cette ligne budgétaire.
        |
        */

        $montantEngage = \App\Models\Consolidation::where(
            'budgetdepense_id',
            $ligne->id
        )->sum('montant_ligne');


        /*
        |--------------------------------------------------------------------------
        | SOLDE
        |--------------------------------------------------------------------------
        */

        $solde = max(
            0,
            $montantBudgetaire - $montantEngage
        );


        /*
        |--------------------------------------------------------------------------
        | DERNIER ENGAGEMENT
        |--------------------------------------------------------------------------
        */

        $dernierEngagement = $ligne->engagementdepenses
            ->sortByDesc('created_at')
            ->first();


        /*
        |--------------------------------------------------------------------------
        | EXISTENCE D'UN BROUILLON
        |--------------------------------------------------------------------------
        */

        $brouillon = $ligne->engagementdepenses
            ->where('status', 'brouillon')
            ->sortByDesc('created_at')
            ->first();


        /*
        |--------------------------------------------------------------------------
        | LIGNE ÉPUISÉE
        |--------------------------------------------------------------------------
        */

        $ligneEpuisee = $solde <= 0;

    @endphp


    <tr>

        {{-- =====================================================
             N°
        ====================================================== --}}

        <td class="text-center">

            <span class="badge badge-number">

                {{ $loop->iteration }}

            </span>

        </td>


        {{-- =====================================================
             CODE BUDGET
        ====================================================== --}}

        <td>

            {{ optional($ligne->besoinbudgetaire)->code_budget ?? '-' }}

        </td>


        {{-- =====================================================
             NOM BUDGET
        ====================================================== --}}

        <td>

            {{ optional($ligne->besoinbudgetaire)->nom_budget ?? '-' }}

        </td>


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

        <td>

            {{ $ligne->activite ?? '-' }}

        </td>


        {{-- =====================================================
             COMPTE SYSCOHADA
        ====================================================== --}}

        <td>

            {{ optional($ligne->comptesyscohada)->code ?? '-' }}

            -

            {{ optional($ligne->comptesyscohada)->libelle ?? '' }}

        </td>


        {{-- =====================================================
             MONTANT BUDGÉTAIRE
        ====================================================== --}}

        <td class="text-right">

            <span class="budget-amount">

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

                FCFA

            </span>

        </td>


        {{-- =====================================================
             SOLDE DISPONIBLE
        ====================================================== --}}

        <td class="text-right">

            @if($solde > 0)

                <span class="text-success font-weight-bold">

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

                    FCFA

                </span>

            @else

                <span class="badge badge-danger">

                    Épuisée

                </span>

            @endif

        </td>


        {{-- =====================================================
             ACTION
        ====================================================== --}}

        <td class="text-center">


            {{-- =================================================
                 CAS 1 : LIGNE ÉPUISÉE
            ================================================== --}}

            @if($ligneEpuisee)

                <span class="badge badge-success">

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

                    Budget épuisé

                </span>


            {{-- =================================================
                 CAS 2 : BROUILLON EXISTANT
            ================================================== --}}

            @elseif($brouillon)

                <span class="badge badge-warning mb-2">

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

                    Brouillon

                </span>

                <br>

                <a
                    href="{{ route(
                        'user.engagementdepenses.edit',
                        $brouillon->id
                    ) }}"
                    class="btn btn-warning btn-sm mt-2"
                >

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

                    Continuer

                </a>


            {{-- =================================================
                 CAS 3 : SOLDE DISPONIBLE
            ================================================== --}}

            @else

                {{-- ---------------------------------------------
                     BOUTON NOUVEL ENGAGEMENT
                ---------------------------------------------- --}}

                <a
                    href="{{ route(
                        'user.engagementdepenses.createLigneBudgetaire',
                        $ligne->id
                    ) }}"
                    class="btn btn-engager"
                >

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

                    Nouvel engagement

                </a>


                {{-- ---------------------------------------------
                     SI UN ANCIEN ENGAGEMENT EXISTE
                ---------------------------------------------- --}}

                @if($dernierEngagement)

                    <br>

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

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

                        FCFA déjà engagé

                    </small>

                @endif

            @endif

        </td>

    </tr>


@empty

    <tr>

        <td colspan="8">

            <div class="empty-box">

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

                <h5>
                    Aucune ligne budgétaire disponible
                </h5>

            </div>

        </td>

    </tr>

@endforelse

    </tbody>

                        </table>

                </div>

            </div>

        </div>

    </div>
@endsection