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

{% block title %}
	{{parent()}}-Tableau de bord-Soumissions
{% endblock %}

{% block content %}
    {% set mois1 = {
			'01': 'janvier',
			'02': 'février',
			'03': 'mars',
			'04': 'avril',
			'05': 'mais',
			'06': 'juin',
			'07': 'juillet',
			'08': 'août',
			'09': 'septembre',
			'10': 'octobre',
			'11': 'novembre',
			'12': 'décembre'
		}
	%}

	{% set mois2 = mois1[moisAnnee|date("m")] %}

	<main style="padding-top: 180px; min-height: 100vh;" class="bg-charcoal-light">
		<div class="container py-4">
			<nav class="operators-breadcrumb mb-4">
				<ol>
					<li>
						<a href="/">
							<svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
								<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
							</svg>
							Accueil
						</a>
					</li>
					<li class="separator">
						<svg width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
							<polyline points="9 18 15 12 9 6"/>
						</svg>
					</li>
					{% if menu == 'ctcpm' %}
                        <li>
                            <a href="#">Accès CTCPM</a>
                        </li>
                    {% else %}
                        <li>
                            <a href="#">Accès autorités</a>
                        </li>
                    {% endif %}
                    <li class="separator">
						<svg width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
							<polyline points="9 18 15 12 9 6"/>
						</svg>
					</li>
					<li>
						<a href="#">Soumission rapport d'activités</a>
					</li>
                    <li class="separator">
						<svg width="14" height="14" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
							<polyline points="9 18 15 12 9 6"/>
						</svg>
					</li>
					<li class="active">{{data.name}}</li>
				</ol>
			</nav>

			<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
				<div>
					<h1 class="fw-bold mb-1" style="font-family: var(--font-display); font-size: 1.6rem;">
						📄 {{data.name}}
					</h1>
					<p class="text-muted-mine mb-0" style="font-size: 0.9rem">
						{{data.name}} soumis en {{mois2}} {{moisAnnee|date('Y')}}
					</p>
				</div>

                <div class="d-flex gap-2 flex-wrap">
                    
				</div>
			</div>

			<div class="mb-4" style='background-color: var(--card-bg);border: 1px solid var(--border-color);border-radius: 1rem;transition: all 0.3s ease;'>
				<div class="d-flex flex-column flex-md-row gap-3 p-3">
                    {% if menu == 'ctcpm' %}
                        {{ include('menu/ctcpm.html.twig') }}
                    {% else %}
                        {{ include('menu/autorite.html.twig') }}
                    {% endif %}
				</div>
			</div>
            
            <div class="mb-5"></div>
            <div class="row g-4">
                <div class="col-lg-12">
					<div class="dashboard-card p-4">
						<h5 class="fw-semibold mb-1">Soumissions à temps</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Les opérateurs qui ont soumis les données à temps en {{mois2}} {{moisAnnee|date('Y')}}
						</p>
						<div>
                            <div class="dashboard-card mb-4">
                                <div class="d-flex flex-column flex-md-row gap-3 p-3">
                                    <div class="operators-search-box flex-grow-1">
                                        <svg width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
                                        </svg>
                                        <input type="text" placeholder="Rechercher par soumissionnaire ou projet..." name="search" hx-post="#" hx-trigger="input changed delay:500ms, search" hx-target="#resultsOpera" hx-indicator=".htmx-indicator"/>
                                    </div>
                                    <div class="d-flex gap-2 flex-wrap align-items-center">
                                        <a class="operators-btn operators-btn-primary btn" href="#">
                                            <svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                                            </svg>
                                            Exporter en Excel
                                        </a>
                                    </div>
                                </div>
                            </div>
							<div class="dashboard-table-wrap">
                                <table class="dashboard-table">
                                    <thead>
                                        <tr>
                                            <th>N°</th>
                                            <th>SOUMISSIONNAIRE</th>
                                            <th>PROJET</th>
                                            <th>NOMBRE d'ENREGISTREMENTS</th>
                                            <th>POURCENTAGE</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="search-results">
                                        {% set compter = 0 %}
                                        {% set total   = 0 %}

                                        {% for item in operateurAvant %}
                                            {% set total   = total + item.nbre %}
                                        {% endfor %}

                                        {% for proprietaire_reel in operateurAvant %}
                                            {% set compter  = compter + 1 %}

                                            <tr>
                                                <td style="font-family: var(--font-display); font-weight: 600; font-size:0.82rem; color:var(--copper);">{{ compter }}</td>
                                                <td class="fw-medium">{{ proprietaire_reel.operateur }}</td>
                                                <td class="fw-medium">
                                                    {% if proprietaire_reel.projet is defined %}
                                                        {{ proprietaire_reel.projet }}
                                                    {% endif %}
                                                </td>
                                                <td style="font-size:0.85rem;">{{ proprietaire_reel.nbre}}</td>
                                                <td style="font-size:0.85rem;">{{((proprietaire_reel.nbre / total) * 100)|round(2, 'floor')}} %</td>
                                                <td class="text-center">
                                                    <div class="d-flex gap-1 justify-content-center">
                                                        <form method="POST" action="{{path(data.path_show)}}">
                                                            <input name="projet" style="height: 45px;" type="hidden" value="{{proprietaire_reel.idProjet}}">
                                                            <input name="operateur" style="height: 45px;" type="hidden" value="{{proprietaire_reel.idOperateur}}">
                                                            <input name="moisAnnee" style="height: 45px;" type="hidden" value="{{moisAnnee|date('m-Y')}}">
                                                            <input name="registre" style="height: 45px;" type="hidden" value="{{index}}">
                                                            <input name="menu" style="height: 45px;" type="hidden" value="{{menu}}">

                                                            <button class="operators-action-btn" type="submit">
                                                                <svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                                                </svg>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% else %}
                                            <tr class="text-center">
                                                <td colspan="6" class="text-center py-5 text-muted-mine">Aucune information dans la base de données.</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
						</div>
					</div>
				</div>

                <div class="col-lg-12">
					<div class="dashboard-card p-4">
						<h5 class="fw-semibold mb-1">Soumissions en retard</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Les opérateurs qui ont soumis les données en retard en {{mois2}} {{moisAnnee|date('Y')}}
						</p>
						<div>
                            <div class="dashboard-card mb-4">
                                <div class="d-flex flex-column flex-md-row gap-3 p-3">
                                    <div class="operators-search-box flex-grow-1">
                                        <svg width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
                                        </svg>
                                        <input type="text" placeholder="Rechercher par soumissionnaire ou projet..." name="search" hx-post="#" hx-trigger="input changed delay:500ms, search" hx-target="#resultsOpera" hx-indicator=".htmx-indicator"/>
                                    </div>
                                    <div class="d-flex gap-2 flex-wrap align-items-center">
                                        <a class="operators-btn operators-btn-primary btn" href="#">
                                            <svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                                            </svg>
                                            Exporter en Excel
                                        </a>
                                    </div>
                                </div>
                            </div>
							<div class="dashboard-table-wrap">
                                <table class="dashboard-table">
                                    <thead>
                                        <tr>
                                            <th>N°</th>
                                            <th>SOUMISSIONNAIRE</th>
                                            <th>PROJET</th>
                                            <th>NOMBRE d'ENREGISTREMENTS</th>
                                            <th>POURCENTAGE</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="search-results">
                                        {% set compter = 0 %}
                                        {% set total   = 0 %}

                                        {% for item in operateurRetard %}
                                            {% set total   = total + item.nbre %}
                                        {% endfor %}

                                        {% for proprietaire_reel in operateurRetard %}
                                            {% set compter  = compter + 1 %}

                                            <tr class="animate-fade-in-up">
                                                <td style="font-family: var(--font-display); font-weight: 600; font-size:0.82rem; color:var(--copper);">{{ compter }}</td>
                                                <td class="fw-medium">{{ proprietaire_reel.operateur }}</td>
                                                <td class="fw-medium">
                                                    {% if proprietaire_reel.projet is defined %}
                                                        {{ proprietaire_reel.projet }}
                                                    {% endif %}
                                                </td>
                                                <td style="font-size:0.85rem;">{{ proprietaire_reel.nbre}}</td>
                                                <td style="font-size:0.85rem;">{{((proprietaire_reel.nbre / total) * 100)|round(2, 'floor')}} %</td>
                                                <td class="text-center">
                                                    <div class="d-flex gap-1 justify-content-center">
                                                        <form method="POST" action="{{path(data.path_show)}}">
                                                            <input name="projet" style="height: 45px;" type="hidden" value="{{proprietaire_reel.idProjet}}">
                                                            <input name="operateur" style="height: 45px;" type="hidden" value="{{proprietaire_reel.idOperateur}}">
                                                            <input name="moisAnnee" style="height: 45px;" type="hidden" value="{{moisAnnee|date('m-Y')}}">
                                                            <input name="registre" style="height: 45px;" type="hidden" value="{{index}}">
                                                            <input name="menu" style="height: 45px;" type="hidden" value="{{menu}}">

                                                            <button class="operators-action-btn" type="submit">
                                                                <svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                                                </svg>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% else %}
                                            <tr>
                                                <td colspan="6" class="text-center py-5 text-muted-mine">Aucune information dans la base de données.</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
						</div>
					</div>
				</div>

                <div class="col-lg-12">
					<div class="dashboard-card p-4">
						<h5 class="fw-semibold mb-1">Non soumis</h5>
						<p class="text-muted-mine mb-3" style='font-size: 0.75rem'>
							Les opérateurs qui n'ont pas soumis les données en {{mois2}} {{moisAnnee|date('Y')}}
						</p>
						<div>
                            <div class="dashboard-card mb-4">
                                <div class="d-flex flex-column flex-md-row gap-3 p-3">
                                    <div class="operators-search-box flex-grow-1">
                                        <svg width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
                                        </svg>
                                        <input type="text" placeholder="Rechercher par soumissionnaire ou projet..." name="search" hx-post="#" hx-trigger="input changed delay:500ms, search" hx-target="#resultsOpera" hx-indicator=".htmx-indicator"/>
                                    </div>
                                    <div class="d-flex gap-2 flex-wrap align-items-center">
                                        <a class="operators-btn operators-btn-primary btn" href="#">
                                            <svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                                            </svg>
                                            Exporter en Excel
                                        </a>
                                    </div>
                                </div>
                            </div>
							<div class="dashboard-table-wrap">
                                <table class="dashboard-table">
                                    <thead>
                                        <tr>
                                            <th>N°</th>
                                            <th>SOUMISSIONNAIRE</th>
                                            <th>PROJET</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="search-results">
                                        {% set compter = 0 %}

                                        {% for proprietaire_reel in operateurNonSoumis %}
                                            {% set compter  = compter + 1 %}

                                            <tr class="animate-fade-in-up">
                                                <td style="font-family: var(--font-display); font-weight: 600; font-size:0.82rem; color:var(--copper);">{{ compter }}</td>
                                                <td class="fw-medium">{{ proprietaire_reel.operateur }}</td>
                                                <td class="fw-medium">
                                                    {% if proprietaire_reel.projet is defined %}
                                                        {{ proprietaire_reel.projet }}
                                                    {% endif %}
                                                </td>
                                                <td class="text-center">
                                                    <div class="d-flex gap-1 justify-content-center">
                                                        <a class="operators-action-btn" title="Voir les détails" href="{{path('app_emine_operateur_operateur_show', {id: proprietaire_reel.idOperateur, sp: 'all'})}}">
                                                            <svg width="15" height="15" viewbox="0 0 24 24" fill="none" stroke="currentColor" strokewidth="2" strokelinecap="round" strokelinejoin="round">
                                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                                            </svg>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% else %}
                                            <tr>
                                                <td colspan="4" class="text-center py-5 text-muted-mine">Aucune information dans la base de données.</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
						</div>
					</div>
				</div>
			</div>
            <div class="mb-5"></div>
		</div>
	</main>

    <div style='position:relative;z-index:999999999999999999;'>
        <elevenlabs-convai agent-id="agent_0701kh8g5nenf9y9jcwbs8qfmvyw"></elevenlabs-convai><script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
    </div>

    <div class="filter-modal-overlay modal-prod" style='display:none;'>
      <div class="filter-modal">
        <div class="filter-modal-header">
          <div>
            <h5 class="fw-bold mb-0" style="font-family:var(--font-display);color:var(--bs-body-color)">
              Filtrer les données
            </h5>
            <small style="color:var(--muted-color); font-size: 0.8rem">
              Affinez les résultats affichés
            </small>
          </div>
          <button class="filter-modal-close btn-flitre-prod">✕</button>
        </div>

		<form action="{{path('app_reporting_dashbord_soumission')}}" method="POST">
			<div class="filter-modal-body">
                <div class="filter-group">
					<label class="filter-label" htmlFor="filter-year">
					<span class="filter-label-icon" style="background:$17418a18;color:17418a;">📅</span>
					Mois et Année
					</label>
                    <input class="form-control input-lg" id="datepicker" name="anneeProdJour" style="height: 45px;" id="datepicker" type="text" placeholder="Sélectionnez le mois et l'année du rapport" data-options="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;m-Y&quot;}" readonly="readonly" required>
				</div>
			</div>

				<div class="filter-modal-footer">
					<button class="filter-btn-reset">Réinitialiser</button>
					<button class="filter-btn-apply" type='submit' style="background: #17418a;">
						Appliquer les filtres
					</button>
				</div>
			</form>
		</div>
    </div>
{% endblock %}

{% block javascripts %}
	{{parent()}}

	<script>
		window.onload = function () {
            flatpickr("#datepicker", {dateFormat: "Y-m"});

            $('.btn-flitre-prod').click(function() {
				$('.modal-prod').toggle();
			});
        }
    </script>
{% endblock %}