@extends('layouts.master')

@section('title')
    Dashboard DG
@endsection

@section('content')

<style>

body{
    background: #f6f8fb;
}

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

.dashboard-header{
    background: linear-gradient(
        135deg,
        #ff7b00 0%,
        #ffffff 50%,
        #009a49 100%
    );
    border-radius: 30px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.dashboard-header h2{
    color:#1f2937;
    font-weight:800;
    margin-bottom:5px;
}

.dashboard-header p{
    color:#4b5563;
    margin-bottom:0;
}

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

.stat-card{
    border:none;
    border-radius:28px;
    overflow:hidden;
    background:white;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.stat-card .card-body{
    padding:25px;
}

.stat-icon{
    width:65px;
    height:65px;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:26px;
}

.bg-orange{
    background:linear-gradient(135deg,#ff8a00,#ff6b00);
}

.bg-green{
    background:linear-gradient(135deg,#00b15d,#008c4b);
}

.bg-white-custom{
    background:linear-gradient(135deg,#6b7280,#374151);
}

.bg-blue{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.bg-cyan{
    background:linear-gradient(135deg,#06b6d4,#0891b2);
}

/* ================= TABLEAU ================= */

.main-card{
    border:none;
    border-radius:30px;
    overflow:hidden;
    background:white;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.main-card .card-header{
    background:white;
    padding:22px 30px;
    border-bottom:1px solid #eef2f7;
}

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

.table{
    margin-bottom:0;
}

.table thead th{
    background:#22754e;
    color:white;
    border:none;
    padding:16px;
    font-size:12px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.table td{
    vertical-align:middle;
    padding:15px;
    border-color:#edf2f7;
    font-size:13px;
}

.table tbody tr{
    transition:.25s;
}

.table tbody tr:hover{
    background:#f8fafc;
    transform:scale(1.002);
}

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

.badge-success{
    background:#009a49 !important;
    border-radius:30px;
    padding:8px 14px;
}

.badge-warning{
    background:#ff7b00 !important;
    color:white !important;
    border-radius:30px;
    padding:8px 14px;
}

.badge-info{
    background:#2563eb !important;
    border-radius:30px;
    padding:8px 14px;
}

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

.btn-success{
    border:none;
    border-radius:15px;
    background:linear-gradient(
        135deg,
        #009a49,
        #00b15d
    );
}

.btn-success:hover{
    transform:translateY(-2px);
}

.dropdown-menu{
    border:none;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    overflow:hidden;
}

.dropdown-item{
    padding:12px 18px;
}

.dropdown-item:hover{
    background:#f8fafc;
}

/* ================= MODALS ================= */

.modal-content{
    border:none;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,.15);
}

.modal-header{
    border:none;
}

.modal-header.bg-success{
    background:linear-gradient(
        135deg,
        #009a49,
        #00b15d
    ) !important;
}

.modal-header.bg-danger{
    background:linear-gradient(
        135deg,
        #ff7b00,
        #ff9500
    ) !important;
}

.modal-body{
    background:#f8fafc;
}

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

.detail-card{
    border:none;
    border-radius:25px;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
    overflow:hidden;
}

.detail-card .card-header{
    border:none;
    background:#fff;
    font-weight:700;
}

/* ================= SCROLL ================= */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

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

::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

/* ================= MODAL DG ================= */

.dg-card{
    border:none;
    border-radius:25px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    margin-bottom:20px;
}

.dg-card-header{
    background:linear-gradient(
        135deg,
        #ff7b00,
        #ff9800
    );
    color:white;
    padding:15px 20px;
    font-weight:700;
}

.dg-info{
    padding:20px;
}

.dg-stat{
    background:#f8fafc;
    border-radius:18px;
    padding:15px;
    text-align:center;
    height:100%;
}

.dg-stat h6{
    margin-bottom:5px;
    color:#6b7280;
    font-size:12px;
}

.dg-stat h5{
    margin:0;
    font-weight:700;
}

.dg-mois{
    background:white;
    border-radius:15px;
    padding:10px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    margin-bottom:10px;
}

.dg-mois small{
    display:block;
    color:#6b7280;
}

.dg-montant{
    color:#009a49;
    font-size:20px;
    font-weight:bold;
}

.dg-activite{
    color:#ff7b00;
    font-weight:700;
}

</style>

<div class="container-fluid">

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

    <div class="dashboard-header">

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

            <div>

                <h2>
                    Tableau de Bord 
                </h2>

                <p>
                    Vue globale des besoins budgétaires
                </p>

            </div>

            {{-- <a href="{{ route('user.besoinbudgetaires.indexdg') }}"
               class="btn btn-light font-weight-bold shadow-sm mt-3 mt-md-0">

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

            </a> --}}

        </div>

    </div>

    <!-- ===================== CARDS ===================== -->

    <div class="row">

        <!-- TOTAL -->

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

            <div class="card stat-card">

                <div class="card-body">

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

                        <div>

                            <div class="text-muted text-uppercase small mb-2">
                                Total Budgets
                            </div>

                            <h3 class="font-weight-bold mb-0">
                                {{ $totalBudgets }}
                            </h3>

                        </div>

                        <div class="stat-icon bg-blue">
                            <i class="fas fa-folder"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- EN COURS -->

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

            <div class="card stat-card">

                <div class="card-body">

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

                        <div>

                            <div class="text-muted text-uppercase small mb-2">
                                Budgets En cours
                            </div>

                            <h3 class="font-weight-bold text-warning mb-0">
                                {{ $budgetsEnCours }}
                            </h3>

                        </div>

                        <div class="stat-icon bg-orange">
                            <i class="fas fa-clock"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- VALIDES -->

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

            <div class="card stat-card">

                <div class="card-body">

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

                        <div>

                            <div class="text-muted text-uppercase small mb-2">
                                Budgets Validés
                            </div>

                            <h3 class="font-weight-bold text-success mb-0">
                                {{ $budgetsValides }}
                            </h3>

                        </div>

                        <div class="stat-icon bg-green">
                            <i class="fas fa-check-circle"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- USERS -->

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

            <div class="card stat-card">

                <div class="card-body">

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

                        <div>

                            <div class="text-muted text-uppercase small mb-2">
                                Utilisateurs
                            </div>

                            <h3 class="font-weight-bold text-info mb-0">
                                {{ $totalUsers }}
                            </h3>

                        </div>

                        <div class="stat-icon bg-cyan">
                            <i class="fas fa-users"></i>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

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

    <div class="card main-card">

        <div class="card-header">

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

                <h5 class="font-weight-bold mb-0">
                    Synthèse Générale Budgétaire
                </h5>

                <span class="badge badge-primary px-3 py-2">
                    {{ count($besoins) }} Budgets
                </span>

            </div>

        </div>

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

            <div class="table-responsive">

                <table class="table table-hover">

                    <thead>
                        <tr>
                            <th>Exercice</th>
                            <th>Direction</th>
                            <th>Centre de Responsabilité</th>
                            <th>Entité</th>
                            <th>Type Contrat</th>
                            <th>Responsable</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse($besoins as $besoin)

                        @php
                            $totalRessources = $besoin->budgetressources->sum('montant_inscrit');
                            $totalEmplois = $besoin->budgetdepenses->sum('montant');
                            $ecart = $totalRessources - $totalEmplois;2
                        @endphp

                        <tr>

                            <td>
                                {{ $besoin->exercice}}
                            </td>

                            <td>
                                {{ optional($besoin->direction)->code ?? '-' }} - {{ optional($besoin->direction)->libelle ?? '-'}}
                            </td>

                            <td>
                                {{ optional($besoin->centrerespo)->code ?? '-' }} - {{ optional($besoin->centrerespo)->libelle_long ?? '-' }}
                            </td>

                            <td>
                                {{ optional($besoin->entite)->libelle }}
                            </td>

                            <td>
                                @if($besoin->type_contrat === 'signe')
                                    <span class="badge badge-warning">Signé</span>
                                @elseif($besoin->type_contrat === 'permanent')
                                    <span class="badge badge-success">Permanent</span>
                                @elseif($besoin->type_contrat === 'accessoire')
                                    <span class="badge badge-info">Accessoire</span>
                                @endif
                            </td>

                            <td>{{ $besoin->responsable }}</td>

                            <td>

                                <span class="badge badge-success">

                                    Validé

                                </span>

                            </td>

                            <td>

                                <div class="dropdown">

                                    <button
                                        class="btn btn-success btn-sm dropdown-toggle"
                                        type="button"
                                        data-toggle="dropdown"
                                        aria-expanded="false">

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

                                    </button>

                                    <div class="dropdown-menu">

                                        <a class="dropdown-item"
                                        href="javascript:void(0)"
                                        onclick="showLoadingModal('ressourcesModal{{ $besoin->id }}')">

                                            <i class="fas fa-coins text-success mr-2"></i>
                                            Voir Ressources

                                        </a>

                                        <a class="dropdown-item"
                                        href="javascript:void(0)"
                                        onclick="showLoadingModal('emploisModal{{ $besoin->id }}')">

                                            <i class="fas fa-briefcase text-danger mr-2"></i>
                                            Voir Emplois

                                        </a>

                                    </div>

                                </div>

                            </td>

                            </tr>

                   

                                <div class="modal fade"
                                    id="loadingModal"
                                    data-backdrop="static"
                                    data-keyboard="false">

                                    <div class="modal-dialog modal-sm modal-dialog-centered">

                                        <div class="modal-content">

                                            <div class="modal-body text-center p-4">

                                                <div class="spinner-border text-primary mb-3"></div>

                                                <h6>
                                                    Chargement des données...
                                                </h6>

                                            </div>

                                        </div>

                                    </div>  

                                </div>

                                @empty

                                    <tr>
                                        <td colspan="8" class="text-center">
                                            Aucun budget disponible
                                        </td>
                                    </tr>

                                @endforelse

                    </tbody>

                </table>

            </div>
        </div>
    </div>

    {{-- =========================
     MODALS RESSOURCES
========================= --}}
    @foreach($besoins as $besoin)

    <div class="modal fade"
        id="ressourcesModal{{ $besoin->id }}"
        tabindex="-1">

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

            <div class="modal-content">

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

                    <h5 class="modal-title">
                        Budget Ressources
                    </h5>

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

                        <span>&times;</span>

                    </button>

                </div>

                    <div class="modal-body">

                        @forelse($besoin->budgetressources as $r)

                        <div class="card border-left-success shadow-sm mb-3">

                            <div class="card-body">

                                <div class="row">

                                    <div class="col-md-4">
                                        <strong>Libellé :</strong><br>
                                        {{ $r->libelle }}
                                    </div>

                                    <div class="col-md-4">
                                        <strong>Montant Total :</strong><br>
                                        {{ number_format($r->montant_total,0,',',' ') }}
                                    </div>

                                    <div class="col-md-4">
                                        <strong>Montant Inscrit :</strong><br>
                                        {{ number_format($r->montant_inscrit,0,',',' ') }}
                                    </div>

                                </div>

                                <hr>

                                <div class="row text-center">

                                    <div class="col"><small>Janvier</small><br><b>{{ $r->janvier }}</b></div>
                                    <div class="col"><small>Février</small><br><b>{{ $r->fevrier }}</b></div>
                                    <div class="col"><small>Mars</small><br><b>{{ $r->mars }}</b></div>
                                    <div class="col"><small>Avril</small><br><b>{{ $r->avril }}</b></div>
                                    <div class="col"><small>Mai</small><br><b>{{ $r->mai }}</b></div>
                                    <div class="col"><small>Juin</small><br><b>{{ $r->juin }}</b></div>

                                </div>

                                <hr>

                                <div class="row text-center">

                                    <div class="col"><small>Juillet</small><br><b>{{ $r->juillet }}</b></div>
                                    <div class="col"><small>Août</small><br><b>{{ $r->aout }}</b></div>
                                    <div class="col"><small>Septembre</small><br><b>{{ $r->septembre }}</b></div>
                                    <div class="col"><small>Octobre</small><br><b>{{ $r->octobre }}</b></div>
                                    <div class="col"><small>Novembre</small><br><b>{{ $r->novembre }}</b></div>
                                    <div class="col"><small>Décembre</small><br><b>{{ $r->decembre }}</b></div>

                                </div>

                            </div>

                        </div>

                        @empty

                        <div class="alert alert-info text-center">
                            Aucune ressource enregistrée.
                        </div>

                        @endforelse

                    </div>

                </div>

            </div>

        </div>

    @endforeach

    {{-- =========================
     MODALS EMPLOIS
========================= --}}
@foreach($besoins as $besoin)

<div class="modal fade"
     id="emploisModal{{ $besoin->id }}"
     tabindex="-1">

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

        <div class="modal-content">

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

                <h5 class="modal-title">
                    Budget Emplois
                </h5>

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

                    <span>&times;</span>

                </button>

            </div>

            <div class="modal-body">

                @if($besoin->budgetdepenses->count())

                    @foreach($besoin->budgetdepenses as $d)

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

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

                        <div   div class="row">

                            <div class="col-md-6">
                                <strong>Activité :</strong>
                                {{ $d->activite }}
                            </div>

                            <div class="col-md-6">
                                <strong>Nature :</strong>
                                {{ $d->nature }}
                        </div>

                        </div>

                    </div>

                </div>

                <div class="card-body">

                                <!-- Informations générales -->

                                <div class="row text-center mb-4">

                                    <div class="col-md-3">
                                        <small class="text-muted">Nombre</small>
                                        <h6>{{ $d->nbre }}</h6>
                                    </div>

                                    <div class="col-md-3">
                                        <small class="text-muted">Quantité</small>
                                        <h6>{{ $d->qte }}</h6>
                                    </div>

                                    <div class="col-md-3">
                                        <small class="text-muted">Coût Unitaire</small>
                                        <h6>{{ number_format($d->c_u,2,',',' ') }}</h6>
                                    </div>

                                    <div class="col-md-3">
                                        <small class="text-muted">Montant Global</small>
                                        <h5 class="text-danger font-weight-bold">
                                            {{ number_format($d->montant,2,',',' ') }}
                                        </h5>
                                    </div>

                                </div>

                                <!-- Répartition Mensuelle -->

                                <h6 class="text-primary mb-3">
                                    Répartition mensuelle
                                </h6>

                                <div class="row text-center">

                                    <div class="col">
                                        <small>Janvier</small>
                                        <div>{{ number_format($d->janvier,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Février</small>
                                        <div>{{ number_format($d->fevrier,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Mars</small>
                                        <div>{{ number_format($d->mars,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Avril</small>
                                        <div>{{ number_format($d->avril,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Mai</small>
                                        <div>{{ number_format($d->mai,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Juin</small>
                                        <div>{{ number_format($d->juin,2,',',' ') }}</div>
                                    </div>

                                </div>

                                <hr>

                                <div class="row text-center">

                                    <div class="col">
                                        <small>Juillet</small>
                                        <div>{{ number_format($d->juillet,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Août</small>
                                        <div>{{ number_format($d->aout,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Séptembre</small>
                                        <div>{{ number_format($d->septembre,2,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Octobre</small>
                                        <div>{{ number_format($d->octobre,0,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Novembre</small>
                                        <div>{{ number_format($d->novembre,0,',',' ') }}</div>
                                    </div>

                                    <div class="col">
                                        <small>Décembre</small>
                                        <div>{{ number_format($d->decembre,2,',',' ') }}</div>
                                    </div>

                                </div>

                            </div>

                        </div>

                    @endforeach

                @else

                    <div class="alert alert-warning text-center mb-0">
                        Aucun emploi enregistré pour ce budget.
                    </div>

                @endif

            </div>

        </div>

    </div>

</div>

@endforeach

<div class="modal fade"
     id="loadingModal"
     data-backdrop="static"
     data-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-body text-center p-4">

                <div class="spinner-border text-primary mb-3"></div>

                <h6>
                    Chargement des données...
                </h6>

            </div>

        </div>

    </div>

</div>



<script>
function showLoadingModal(modalId)
{
    $('#loadingModal').modal('show');

    setTimeout(function(){

        $('#loadingModal').modal('hide');

        $('#' + modalId).modal('show');

    }, 800);
}

</script>
@endsection