{% extends 'layout/content.html.twig' %}

{% block stylesheets %}
    {{ encore_entry_link_tags('dashboard') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('dashboard') }}
{% endblock %}

{% block breadcrumb %}
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb bg-white px-3 py-2 rounded shadow-sm rounded-pill align-items-center">
			<li class="breadcrumb-item d-flex align-items-center">
				<a href="{{ url('app_dashboard') }}" class="text-primary">
					<i class="mdi mdi-view-dashboard me-1"></i>
                    Tableau de bord
				</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">
                {{ department ? department.name : 'GLOBAL' }}
            </li>
		</ol>
	</nav>
{% endblock %}

{% set hasSidebar = false %}
{% block sidebar %}{% endblock %}

{% block content %}

<div>
     <div class="row mb-3"
      id="dashboard-content-page"
      data-app-dashboard-scope ="{{ scope }}"
      data-app-dashboard-department ="{{ department.id ?? null }}"
      data-app-period-month = "{{ periodMonth }}"
      data-app-period-year = "{{ periodYear }}" >
         <div class="col-12">
             <div class="d-flex flex-md-row align-items-start align-items-md-center justify-content-between">
                 <h4 class="text-primary text-uppercase pt-3">
                     <i class="fa fa-chart-bar me-2 "></i> Tableau de bord {{ department.abbreviation ?? app.user.organization.abbreviation }} <span class="fw-bolder">{{ (periodYear ~ "-" ~ periodMonth ~ "-01")|date("F")|trans }} {{ periodYear }}</span>
                 </h4>
                 <form class="d-flex flex-wrap gap-2 mt-3 align-items-center" method="GET" action="">
                         <div>
                             <label for="department" class="visually-hidden">Département</label>
                             <select id="department" name="department" class="form-select">
                                 <option value="">Tous les départements</option>
                                 {% for dept in departments %}
                                     <option value="{{ dept.id }}" {% if department and  dept.id == department.id %}selected{% endif %}>
                                         {{ dept.name }}
                                     </option>
                                 {% endfor %}
                             </select>
                         </div>

                         <div>
                             <label for="month" class="visually-hidden">Mois</label>
                             <select id="month" name="periodMonth" class="form-select">
                                 {% for m in 1..12 %}
                                     <option value="{{ m }}" {% if m == periodMonth %}selected{% endif %}>
                                         {{ ("2024-" ~ m ~ "-01")|date("F")|trans }}
                                     </option>
                                 {% endfor %}
                             </select>
                         </div>

                         <div>
                             <label for="year" class="visually-hidden">Année</label>
                             <select id="year" name="periodYear" class="form-select">
                                 {% set now = date() %}
                                 {% for y in 2020..now|date("Y")  %}
                                     <option value="{{ y }}" {% if y == periodYear %}selected{% endif %}>{{ y }}</option>
                                 {% endfor %}
                             </select>
                         </div>
                         <div>
                             <button type="submit" class="btn btn-primary waves-effect rounded-pill">
                                 <i class="fa fa-sync-alt me-1"></i> Mettre à jour
                             </button>
                         </div>
                     </form>
             </div>
             <div class="mt-3 mt-md-0">
                 <span class="badge bg-primary">{{ department.abbreviation ?? app.user.organization.abbreviation }}</span>
                 <span class="badge bg-secondary ms-2">Mise à jour: 10 {{ ("2024-" ~ periodMonth ~ "-01")|date("F")|trans }} {{ periodYear }}</span>
             </div>
         </div>
     </div>
        <div class="row">
            <div class="col-12">
                <div class="card rounded-4">
                    <div class="card-body rounded-4">
                        <!-- projects -->
                        <div>
                            <h4 class="d-flex align-items-center text-muted fw-semibold p-2 bg-secondary-subtle rounded">
                                <i class="mdi mdi-folder-open-outline me-2"></i> PROJETS
                            </h4>
                            {% if (department is null) %}
                            <div class="row">
                                <!--
                                <div class="col-12 col-md-6 col-xl-4 mb-3">
                                    {% include 'dashboard/widgets/knob-rate.html.twig' with {
                                        'kpi_title': executionRate.label ?? null,
                                        'kpi_value': executionRate.value ?? null,
                                        'kpi_count': executionRate.metadata.project_count ?? null,
                                        'kpi_performance': executionRate.metadata.trend ?? null,
                                        'kpi_count_title': 'Projets en cours',
                                    } %}
                                </div>
                                -->

                                <div class="col-12 col-md-6 col-xl-3 mb-3">
                                    <div class="card border-0 shadow-sm rounded-4 bg-light-subtle  h-100">
                                        <div class="card-body pb-0">
                                            <div class="d-flex align-items-center justify-content-between mb-3">
                                                <div>
                                                    <h5 class="card-title mb-1">Portefeuille de Projets</h5>
                                                    <p class="text-muted small mb-0">Projets en cours</p>
                                                </div>
                                                <i class="fa fa-folder fs-2 text-primary"></i>
                                            </div>
                                            <div class="d-flex align-items-end mb-3">
                                                <div class="font-28 fw-bolder">{{ projects_performance.projects_performance.project_count }}</div>
                                                <div class="ms-2 mb-1">projets</div>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <div class="me-3">
                                                    <span class="badge bg-info">
                                                        <i class="fas fa-chart-line me-1"></i>{{ projects_performance.projects_performance.project_count_status|capitalize }}
                                                    </span>
                                                </div>
                                                <div class="text-muted small">Même nombre que le mois dernier</div>
                                            </div>
                                            <div class="pt-4">
                                                <div class="d-flex justify-content-between small">
                                                    <span>{{ projects_performance.projects_performance.on_time_project_count }} projets dans les temps</span>
                                                    <span>{{ projects_performance.projects_performance.delayed_project_count }} projets en retard</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-xl-3 mb-3">
                                    <div class="card border-0 shadow-sm rounded-4 bg-light-subtle h-100">
                                        <div class="card-body position-relative">
                                            <div class="d-flex align-items-center justify-content-between mb-3">
                                                <div>
                                                    <h5 class="card-title mb-1">Performance Globale mensuelle</h5>
                                                    <p class="text-muted small mb-0">Score moyen des projets</p>
                                                </div>
                                                <i class="fa fa-star fs-2 text-warning"></i>
                                            </div>

                                            <div class="d-flex align-items-end mb-3">
                                                <div class="font-28 fw-bolder">{{ projects_performance.projects_performance.value }} <i class="mdi mdi-percent-outline"></i></div>
                                            </div>

                                            <div class="d-flex align-items-center">
                                                <div class="me-3">
                                                    {% set trend_class = projects_performance.projects_performance.trend >= 0 ? 'success' : 'danger' %}
                                                    {% set trend_icon = projects_performance.projects_performance.trend >= 0 ? 'mdi-trending-up' : 'mdi-trending-down' %}
                                                    {% set trend_sign = projects_performance.projects_performance.trend >= 0 ? '+' : '' %}
                                                    <span class="text-{{ trend_class }}">
                                                        <i class="fw-bolder mdi {{ trend_icon }}"></i>{{ trend_sign }}
                                                    </span>
                                                </div>
                                                <div class="text-{{ trend_class }} small">
                                                    {{ projects_performance.global_score.trend_type == 'up' ? 'Amélioration' : 'Baisse' }} vs mois précédent
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-xl-3 mb-3">
                                        <div class="card border-0 shadow-sm rounded-4 bg-light-subtle h-100">
                                            <div class="card-body pb-0">
                                                <div class="d-flex align-items-center justify-content-between mb-3">
                                                    <div>
                                                        <h5 class="card-title mb-1">Taux d'Avancement</h5>
                                                        <p class="text-muted small mb-0">Moyenne pondérée</p>
                                                    </div>
                                                    <i class="fas fa-tasks fs-2 text-success"></i>
                                                </div>
                                                <div class="d-flex align-items-end mb-3">
                                                    <div class="font-28 fw-bolder">{{ projects_performance.execution_rate.value }}<i class="mdi mdi-percent-outline"></i></div>
                                                </div>
                                                <div class="progress progress-sm">
                                                    {% set value_percent = projects_performance.execution_rate.value %}
                                                    {% set progress_class = value_percent >= 75 ? 'success' : (value_percent >= 50 ? 'warning' : 'danger') %}
                                                    <div class="progress-bar bg-{{ progress_class }}" role="progressbar"
                                                         style="width: {{ value_percent }}%"
                                                         aria-valuenow="{{ value_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <div class="pt-4">
                                                    <div class="d-flex justify-content-between small">
                                                        <span>Objectif: 75%</span>
                                                        <span>Échéance: Déc 2025</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <div class="col-12 col-md-6 col-xl-3 mb-3">
                                        <div class="card border-0 shadow-sm rounded-4 bg-light-subtle h-100">
                                            <div class="card-body  pb-0">
                                                <div class="d-flex align-items-center justify-content-between mb-3">
                                                    <div>
                                                        <h5 class="card-title mb-1">Dynamique globale des projets</h5>
                                                        <p class="text-muted small mb-0">Direction des indicateurs</p>
                                                    </div>
                                                    <i class="fas fa-chart-line fs-2 text-info"></i>
                                                </div>
                                                {% set overall_class = projects_performance.global_score.global_trend >= 0 ? 'text-success' : 'text-danger' %}
                                                <div class="d-flex align-items-center justify-content-center mb-4">
                                                    <div class="text-center">
                                                        {% set trend_class = projects_performance.projects_performance.trend >= 0 ? 'text-success' : 'text-danger' %}
                                                        <div class="font-28 fw-bolder {{ trend_class }}">
                                                            {{ projects_performance.projects_performance.trend >= 0 ? '+' : '' }}{{ projects_performance.projects_performance.trend }}<i class="mdi mdi-percent-outline"></i>
                                                        </div>
                                                        <div class="{{ trend_class }} small">
                                                            {{ projects_performance.projects_performance.trend >= 0 ? 'Amélioration globale' : 'Dégradation globale' }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-around small pt-3">
                                                    <!-- div class="text-center">
                                                        <div class="fw-bold">Risques</div>
                                                        <div class="text-danger">↑ 3.1%</div>
                                                    </div -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                            {% endif %}
                            <div class="row">
                                <div class="col-12 col-md-6 my-sm-2">
                                    <div class="card border-0 shadow-sm  bg-light-subtle rounded-4 h-100 pb-0">
                                        <div class="card-body p-0">
                                            <h4 class="header-title text-success-emphasis px-2 pt-3 pb-1"><i class="mdi mdi-thumb-up"></i> Top projects</h4>
                                            <div id="top-projects-grid"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 my-sm-2">
                                    <div class="card border-0 shadow-sm  bg-light-subtle rounded-4 h-100 pb-0">
                                        <div class="card-body p-0">
                                            <h4 class="header-title text-danger-emphasis px-2 pt-3 pb-1"><i class="mdi mdi-thumb-down"></i> Flop projects</h4>
                                            <div id="flop-projects-grid"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- departments -->
                        <div>
                            <h4 class="mt-4 d-flex align-items-center text-muted fw-semibold p-2 bg-secondary-subtle rounded">
                                <i class="mdi mdi-source-branch me-2"></i> STRUCTURES
                            </h4>
                            <div class="row">
                                <div id="departmentData"></div>
                            </div>
                        </div>

                        <!-- finances -->
                        <div>
                            <h4 class="mt-4 d-flex align-items-center text-muted fw-semibold p-2 bg-secondary-subtle rounded">
                                <i class="mdi mdi-finance me-2"></i> FINANCES
                            </h4>
                            <div class="row g-4">
                                <div class="col-xl-4 col-md-6">
                                    <div class="card border-0 shadow-sm rounded-4 bg-light-subtle">
                                        <div class="card-body text-center">
                                            <div class="mb-2">
                                                <i class="mdi mdi-bank-transfer-in text-primary" style="font-size: 2rem;"></i>
                                            </div>
                                            <h2 class="fw-semibold text-primary mb-1">
                                                {{ (budget_allocated.value ?? 0) | format_currency('XOF', {fraction_digit: 0}) }}
                                            </h2>
                                            <div class="text-muted small">{{ budget_allocated.label ?? 'budget_allocated' | trans(domain: 'kpi') }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-6">
                                    <div class="card border-0 shadow-sm rounded-4 bg-light-subtle">
                                        <div class="card-body text-center">
                                            <div class="mb-2">
                                                <i class="mdi mdi-bank-check text-danger" style="font-size: 2rem;"></i>
                                            </div>
                                            <h2 class="fw-semibold text-danger mb-1">
                                                {{ (budget_committed.value ?? 0) | format_currency('XOF', {fraction_digit: 0}) }}
                                            </h2>
                                            <div class="text-muted small">{{ budget_committed.label ?? 'budget_committed' | trans(domain: 'kpi') }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-6">
                                    <div class="card border-0 shadow-sm rounded-4 bg-light-subtle">
                                        <div class="card-body text-center">
                                            <div class="mb-2">
                                                <i class="mdi mdi-bank-transfer-out text-success" style="font-size: 2rem;"></i>
                                            </div>
                                            <h2 class="fw-semibold text-success mb-1">
                                                {{ (budget_disbursed.value ?? 0) | format_currency('XOF', {fraction_digit: 0}) }}
                                            </h2>
                                            <div class="text-muted small">{{ budget_disbursed.label ?? 'budget_disbursed' | trans(domain: 'kpi') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-8">
                                    <div class="card border-0 shadow-sm  bg-light-subtle rounded-4 h-100 pb-0">
                                        <div class="card-body p-0">
                                            <h4 class="header-title text-success-emphasis px-2 pt-3 pb-1"> </h4>
                                            <canvas id="budgetEvolutionChart" height="120px"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <div class="card border-0 shadow-sm  bg-light-subtle rounded-4 h-100 pb-0">
                                        <div class="card-body " style="height: 120px">
                                            <h4 class="header-title text-danger-emphasis px-2 pt-3 pb-1"> </h4>
                                            <canvas id="budgetDonutChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- platform -->
                        <div>
                            <h4 class="mt-4 d-flex align-items-center text-muted fw-semibold p-2 bg-secondary-subtle rounded">
                                <i class="mdi mdi-application me-2"></i> KPLAN
                            </h4>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-6 col-xl-3 mb-3">
                                {% include 'dashboard/widgets/knob-score.html.twig' with {
                                    kpi_score : milestone_performance_score,
                                    score_title: 'Note sur 20 basée sur les délais de traitement'
                                } %}
                            </div>
                            <div class="col-4 col-md-4 col-xl-3 mb-3">
                                {% include 'dashboard/widgets/performance-delays.html.twig' with {
                                    performanceType: 'fill',
                                    processing_delay_value : milestone_delays.fill_delay ?? null,
                                    processing_delay_trend_delay: milestone_delays.fill_trend_delay ?? null
                                } %}
                            </div>
                            <div class="col-4 col-md-4 col-xl-3 mb-3">
                                {% include 'dashboard/widgets/performance-delays.html.twig' with {
                                    performanceType: 'approve',
                                    processing_delay_value : milestone_delays.approve_delay ?? null,
                                    processing_delay_trend_delay: milestone_delays.approve_trend_delay ?? null
                                } %}
                            </div>
                            <div class="col-4 col-md-4 col-xl-3 mb-3">
                                {% include 'dashboard/widgets/performance-delays.html.twig' with {
                                    performanceType: 'validate',
                                    processing_delay_value : milestone_delays.validate_delay ?? null,
                                    processing_delay_trend_delay: milestone_delays.validate_trend_delay ?? null
                                } %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

{% endblock %}