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

{% block title %}{{parent()}}-Dot-Projet{% endblock %}

{% block content %}
    <div class="content-wrapper" style="margin-top:180px;">
		<div class="container-full">
			<div class="content-header">
				<div class="d-flex align-items-center">
					<div class="me-auto">
						<h3 class="page-title">Les projets de la {{dot.nom}}</h3>
						<div class="d-inline-block align-items-center">
							<nav>
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
									<li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
									<li class="breadcrumb-item" aria-current="page">Les obligations des entreprises</li>
									<li class="breadcrumb-item" aria-current="page">Dotation de 0,3% du CA</li>
									<li class="breadcrumb-item" aria-current="page">Liste des DOTS</li>
                                    <li class="breadcrumb-item" aria-current="page">{{dot.nom}}</li>
									<li class="breadcrumb-item active" aria-current="page">Projets</li>
								</ol>
							</nav>
						</div>
					</div>
				</div>
			</div>	

			<!-- Main content -->
			<section class="content">
				<div class="row">
                    <div class="col-12">
						<div class="box">
							<div class="box-header with-border">
								<h3 class="box-title">La liste de projets de la {{dot.nom}}</h3>
							</div>
							<div class="box-body">
                                <div class="row">
                                    <div class="col-md-3 col-12">
                                        <div class="btn-group" role="group" aria-label="Basic outlined example">
                                            <a type="button" class="text-white btn-md" style="background-color: #edb717;" href="{{path('app_emine_operateur_dot_download_projet', {id: dot.id})}}"><i class="fa fa-download"></i> Exportation en excel</a>
                                        </div>
                                    </div>

                                    <div class="col-md-3 col-12">
                                        <span class="htmx-indicator">Recherche en cours...</span>
                                    </div>

                                    <div class="col-md-6 col-12">
										<div class="app-menu">
											<div class="search-bx mx-5">
												<div class="input-group shadow bg-body" style="border: 2px solid #392d4c; border-radius:5px;">
													<input class="form-control" type="search" style="border: 2px solid white;" 
													name="search" placeholder="Rechercher un projet de la Dot..." 
													hx-post="#" 
													hx-trigger="input changed delay:500ms, search" 
													hx-target="#search-results" 
													hx-indicator=".htmx-indicator"
													aria-label="Search" aria-describedby="button-addon2">

													<div class="input-group-append">
														<button class="btn form-control text-dark" type="submit" id="button-addon3">
															<i data-feather="search"></i>
														</button>
													</div>
												</div>
											</div>
										</div>
									</div>
                                </div>

								<div class="table-responsive" style="margin-top: 40px;">
									<table class="table table-bordered table-hover display nowrap margin-top-10 w-p100 shadow bg-body">
										<thead>
											<tr style="background-color: #17418a;">
												<th class="bb-2 text-white">N°</th>
												<th class="bb-2 text-white">Nom</th>
												<th class="bb-2 text-white">Dot</th>
												<th class="bb-2 text-white">Localisation</th>
												<th class="bb-2 text-white">Nature</th>
												<th class="bb-2 text-white">Coût en USD</th>
												<th class="bb-2 text-white">Statut</th>
												<th class="bb-2 text-white">Date début</th>
                                                <th class="bb-2 text-white">Date fin</th>
											</tr>
										</thead>
										<tbody id="search-result">
											{% set compter = 0 %}

											{% for item in dot.projetDots %}
												{% set compter = compter + 1 %}

												<tr>
													<td>{{compter}}</td>
													<td>{{item.nom}}</td>
													<td>{{item.dot ? item.dot.nom : ''}}</td>
													<td>{{item.localisation}}</td>
													<td>{{item.nature ? item.nature.nom : ''}}</td>
													<td>{{item.budget}} USD</td>
													<td>{{item.stade}}</td>
													<td>{{ item.dateDebut ? item.dateDebut|date('d/m/Y') : '' }}</td>
													<td>{{ item.dateFin ? item.dateFin|date('d/m/Y') : '' }}</td>
												</tr>
											{% else %}
                                                <tr class="text-center">
                                                    <td colspan="9">Aucune information dans la base de données</td>
                                                </tr>
                                            {% endfor %}
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
                </div>
            </section>
        </div>
    </div> 
{% endblock %}