{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ encore_entry_link_tags('project-dashboard') }}
    {{ encore_entry_link_tags('planning') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('project-dashboard') }}
    {{ encore_entry_script_tags('planning') }}
{% endblock %}

{% block main %}
    <div class="content-page"
         id="project-data" data-app-project-id="{{ project.id }}" data-app-project-acronym="{{ project.acronym }}"
    >
        <div id="chartsData"
             data-app-component-budget-chart="{{ componentBudgetBarData }}",
             data-app-component-weighting-doughnut-chart="{{ componentWeightingDoughnutData }}">
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 mb-2 mt-2">
                        <div class="page-title-box">
                            <button class="btn btn-primary rounded-pill pt-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSidebarMenu" aria-expanded="true" aria-controls="collapseSidebarMenu">
                                <i class="fe-sidebar"></i>
                            </button>
                            <div class="page-title-right mt-0">
                                {{ render(controller('App\\Controller\\SharedController::getBreadcrumb', {type: 'project', id: project.id })) }}
                            </div>
                        </div>
                    </div>
                <div class="col-12 d-flex">
                    <div>
                        {{ render(controller('App\\Controller\\SharedController::getProjectSideBarMenu', { acronym: project.acronym, step: step, show : 'show' })) }}
                    </div>
                    <div class="w-100 ps-2">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm rounded-4">
                                    <div class="card-body pb-0 fs-6">
                                        <h5 class="mb-4 text-primary fw-bold d-flex align-items-center">
                                            <i class="mdi mdi-chart-line me-2 fs-4"></i> Synthèse d'avancement
                                        </h5>
                                        <div class="table-responsive">
                                            <table class="table table-sm text-center align-middle border">
                                                <thead class="table-light text-secondary fw-semibold">
                                                <tr>
                                                    <th>
                                                        <i class="mdi mdi-target-variant me-1 text-muted"></i> Déc
                                                    </th>
                                                    <th>
                                                        <i class="mdi mdi-check-circle-outline me-1 text-muted"></i> Mars
                                                    </th>
                                                    <th>
                                                        <i class="mdi mdi-target-variant me-1 text-muted"></i> Avril
                                                    </th>
                                                    <th>
                                                        <i class="mdi mdi-check-circle-outline me-1 text-muted"></i> Avril
                                                    </th>
                                                    <th>
                                                        <i class="mdi mdi-target-variant me-1 text-muted"></i> Mai
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="fw-medium text-dark">
                                                    <td class="text-success">100%</td>
                                                    <td class="text-warning">76%</td>
                                                    <td class="text-success">82%</td>
                                                    <td class="text-warning">80%</td>
                                                    <td class="text-success">85%</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm rounded-4">
                                    <div class="card-body pb-0">
                                        <h5 class="mb-4 text-primary fw-bold d-flex align-items-center">
                                            <i class="mdi mdi-speedometer me-2 fs-4"></i> Dashboard Projet
                                        </h5>

                                        <table class="table table-sm fs-6 text-center align-middle border">
                                            <thead class="table-light">
                                            <tr class="text-secondary fw-semibold">
                                                <th>Variation</th>
                                                <th>Tendance</th>
                                                <th>Performance</th>
                                                <th>Statut</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="fw-bold text-success">
                                                    <i class="mdi mdi-arrow-top-right-thin me-1"></i> +3%
                                                </td>
                                                <td>
                                                    <i class="mdi mdi-trending-up text-success fs-5"></i>
                                                </td>
                                                <td class="fw-semibold text-primary">59%</td>
                                                <td>
                                                <span class="badge bg-info bg-opacity-25 text-white fw-medium px-3 py-1 rounded-pill">
                                                    <i class="mdi mdi-progress-clock me-1"></i> En progression
                                                </span>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div id="observations" class="col-md-6 mb-3">
                                <div class="card h-100 shadow-sm rounded-4">
                                    <div class="card-body pb-0">
                                        <h6 class="fw-bolder text-center text-primary"><i class="mdi mdi-robot"></i> OBSERVATIONS IA </h6>
                                        <ul class="list-group fs-6"></ul>
                                        <div class="d-flex justify-content-center loadingInsights">
                                            <div class="spinner-border spinner-border-sm text-primary m-auto" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="recommandations" class="col-md-6 mb-3">
                                <div class="card h-100 shadow-sm  rounded-4">
                                    <div class="card-body pb-0">
                                        <h6 class="fw-bolder text-center text-primary"><i class="mdi mdi-robot"></i> RECOMMANDATIONS IA</h6>
                                        <ul class="list-group fs-6"></ul>
                                        <div class="d-flex justify-content-center loadingInsights">
                                            <div class="spinner-border spinner-border-sm text-primary m-auto" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card shadow-sm  h-100 rounded-4 shadow-sm">
                                    <div class="card-body text-center">
                                        <i class="mdi mdi-cash fs-2 text-primary mb-1"></i>
                                        <h4 class="mb-0 text-primary-emphasis fw-bold">{{ project.totalCommittedBudget|format_currency(project.currency, {fraction_digit: 0}) }}</h4>
                                        <p class="text-muted small mb-2">Budget Engagé</p>
                                        {% set committedPercent = project.totalCommittedBudget/project.totalBudget*100 %}
                                        <div class="progress progress-bar-alt-blue" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ committedPercent }}%;" aria-valuenow="{{ committedPercent }}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card shadow-sm  h-100 rounded-4 shadow-sm">
                                    <div class="card-body text-center">
                                        <i class="mdi mdi-cash-remove fs-2 text-primary mb-1"></i>
                                        <h4 class="mb-0 text-primary fw-bold">{{ project.totalRemainingBudget|format_currency(project.currency, {fraction_digit: 0}) }}</h4>
                                        <p class="text-muted small mb-1">Budget non utilisé</p>
                                        <span class="badge badge-outline-primary">{{ (project.totalRemainingBudget/project.totalBudget*100)|round }} % non consommé</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card shadow-sm  h-100 rounded-4 shadow-sm">
                                    <div class="card-body text-center">
                                        <i class="mdi mdi-timer-outline fs-2 text-primary mb-1"></i>
                                        <h4 class="mb-0 text-primary-emphasis fw-bold">18%</h4>
                                        <p class="text-muted small mb-1">Taux de respect des délais</p>
                                        <span class="badge badge-outline-primary">+2% <i class="mdi mdi-trending-up"></i></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Cibles atteintes -->
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card shadow-sm  h-100 rounded-4 shadow-sm">
                                    <div class="card-body text-center">
                                        <i class="mdi mdi-bullseye-arrow fs-2 text-primary mb-1"></i>
                                        <h4 class="mb-0 text-primary-emphasis fw-bold">4/7</h4>
                                        <p class="text-muted small mb-1">Cibles atteintes</p>
                                        <div class="progress progress-bar-alt-blue" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 57%;" aria-valuenow="4" aria-valuemin="0" aria-valuemax="7"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm rounded-4">
                                    <div class="card-body">
                                        <canvas id="activitiesCharts" ></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm rounded-4">
                                    <div class="card-body">
                                        <canvas id="milestonesChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="action-bar d-flex justify-content-around align-items-center">
        {{ project_action_buttons(project) }}
    </div>
{% endblock %}