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

{% block title %}{{parent()}}-Projet-détails{% endblock %}

{% block content %}
	<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>
					<li>
						<a href="#">Actifs miniers</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>
						<a href="#">Liste des projets miniers</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>
						<a href="#">{{projet.nom}}</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">Détails</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;">
						📋 Les titres miniers du projet
					</h1>
					<p class="text-muted-mine mb-0" style="font-size: 0.9rem">
						Liste complète des titres miniers publiés du projet
					</p>
				</div>
				<div class="d-flex gap-2 flex-wrap">
					<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 class="dashboard-card mb-4">
				<div class="d-flex flex-column flex-md-row gap-3 p-3">
					<div class="d-flex gap-2 flex-wrap align-items-center">
						{{ include('menu/projet.html.twig') }}
					</div>
				</div>
			</div>

			<div class="dashboard-card" style='z-index:1;'>
				<div class="dashboard-table-wrap" style='z-index:1;'>
					<table class="dashboard-table" style='z-index:1;'>
						<thead>
							<tr>
								<th>N°</th>
								<th>Opérateur</th>
                                <th>Type</th>
                                <th>Numéro</th>
                                <th>Titulaire</th>
                                <th class="text-center">Statut</th>
                                <th>Carré minier</th>
                                <th>Localisation</th>
                                <th>Province</th>
                                <th>Date octroi</th>
                                <th>Date expiration</th>
                                <th class="text-center">Arrêté</th>
								<th class="text-center">Actions</th>
							</tr>
						</thead>
						<tbody id="resultsOpera">
							{% set compter = 0 %}

							{% for item in projet.titreMiniers %}
								{% set compter  = compter + 1 %}

								<tr class="animate-fade-in-up" style='position:relative;width: 100%;z-index:1;'>
									<td>
										<span style="font-family: var(--font-display); font-weight: 600; font-size:0.82rem; color:var(--copper);">
											{{compter}}
										</span>
									</td>
									<td class="fw-medium">{{item.operateur ? item.operateur.denomination : ''}}</td>
									<td style="font-size:0.85rem;">{{item.typePermis}}</td>
									<td style="font-size:0.85rem;">{{item.permis}}</td>
									<td style="font-size: 0.85rem;">
										{{item.titulaire}}
									</td>
                                    {% if item.status == 'Actif' %}
                                        <td class="text-center">
                                            <span class="dashboard-badge" style="background: #22c55e18; color: #16a34a, borderColor:#22c55e44;">
                                                {{item.status ? item.status : ""}}
                                            </span>
                                        </td>
                                    {% elseif item.status == 'Inactif' %}
                                        <td class="text-center">
                                            <span class="dashboard-badge" style="background: #ef444418; color: #dc2626, borderColor:#ef444444;">
                                                {{item.status ? item.status : ""}}
                                            </span>
                                        </td>
                                    {% else %}
                                        <td class="text-center">
                                            <span class="dashboard-badge" style="background: #f59e0b18; color: #d97706, borderColor:#f59e0b44;">
                                                {{item.status ? item.status : ""}}
                                            </span>
                                        </td>
                                    {% endif %}
                                    
									<td style="font-size:0.85rem;">{{item.carres}}</td>
									<td style="font-size:0.85rem;">{{item.localisation}}</td>

                                    <td style="font-size:0.85rem;">{{item.province ? item.province.nom : ""}}</td>
                                    <td style="font-size:0.85rem;">{{item.dateOctroi ? item.dateOctroi|date('d/m/Y') : ""}}</td>
                                    <td style="font-size:0.85rem;">{{item.dateExpiration ? item.dateExpiration|date('d/m/Y') : ""}}</td>
                                    <td class="text-center;">
                                        {% if item.arrete is not null %}
                                            <a href="{{path('app_emine_cadre_juridique_arrete_show', {id: item.arrete.id, sp: 'ta'})}}" class="operators-action-btn" target="_blank">
                                               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-pdf-fill" viewBox="0 0 16 16">
                                                    <path d="M5.523 10.424q.21-.124.459-.238a8 8 0 0 1-.45.606c-.28.337-.498.516-.635.572l-.035.012a.3.3 0 0 1-.026-.044c-.056-.11-.054-.216.04-.36.106-.165.319-.354.647-.548m2.455-1.647q-.178.037-.356.078a21 21 0 0 0 .5-1.05 12 12 0 0 0 .51.858q-.326.048-.654.114m2.525.939a4 4 0 0 1-.435-.41q.344.007.612.054c.317.057.466.147.518.209a.1.1 0 0 1 .026.064.44.44 0 0 1-.06.2.3.3 0 0 1-.094.124.1.1 0 0 1-.069.015c-.09-.003-.258-.066-.498-.256M8.278 4.97c-.04.244-.108.524-.2.829a5 5 0 0 1-.089-.346c-.076-.353-.087-.63-.046-.822.038-.177.11-.248.196-.283a.5.5 0 0 1 .145-.04c.013.03.028.092.032.198q.008.183-.038.465z"/>
                                                    <path fill-rule="evenodd" d="M4 0h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2m.165 11.668c.09.18.23.343.438.419.207.075.412.04.58-.03.318-.13.635-.436.926-.786.333-.401.683-.927 1.021-1.51a11.6 11.6 0 0 1 1.997-.406c.3.383.61.713.91.95.28.22.603.403.934.417a.86.86 0 0 0 .51-.138c.155-.101.27-.247.354-.416.09-.181.145-.37.138-.563a.84.84 0 0 0-.2-.518c-.226-.27-.596-.4-.96-.465a5.8 5.8 0 0 0-1.335-.05 11 11 0 0 1-.98-1.686c.25-.66.437-1.284.52-1.794.036-.218.055-.426.048-.614a1.24 1.24 0 0 0-.127-.538.7.7 0 0 0-.477-.365c-.202-.043-.41 0-.601.077-.377.15-.576.47-.651.823-.073.34-.04.736.046 1.136.088.406.238.848.43 1.295a20 20 0 0 1-1.062 2.227 7.7 7.7 0 0 0-1.482.645c-.37.22-.699.48-.897.787-.21.326-.275.714-.08 1.103"/>
                                                </svg>
                                            </a>
                                        {% endif %}
                                    </td>
									<td class="text-center">
                                        <div class="dropdown nav-scroller-dropdown" style='position:relative;z-index:999999;'>
                                            <button
                                                class="operators-action-btn"
                                                type="button"
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false"
                                                title="Opérations sur le titre"
                                            >
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                                <circle cx="12" cy="12" r="1" /><circle cx="12" cy="5" r="1" /><circle cx="12" cy="19" r="1" />
                                                </svg>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-dark-mine" 
                                                style='position:fixed;top:20;left:20;z-index: 999999;background:#ffffff; border: 1px solid rgba(23, 65, 138, 0.15);border-radius: 0 0 10px 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.22), 0 0 0 1px rgba(23,65,138,0.1);padding:0.4rem;min-width: 220px;animation: dropdown-slide 0.2s ease-out;'>
                                                <div>
													<a class="dropdown-item titres-dropdown-item" href="#">
														👁️ Voir les détails
													</a>
                                                </div>
                                                <div><hr class="dropdown-divider" /></div>
                                                <div>
                                                    <a
                                                    class="dropdown-item titres-dropdown-item"
                                                    href="{{path('app_emine_autres_amodiation_permis', {id: item.id, page: page, sp: sp, sm: 'p'})}}"
                                                    >
                                                    📄 Amodiations
                                                    </a>
                                                </div>
                                                <div><hr class="dropdown-divider"/></div>
                                                <div>
                                                    <a
                                                    class="dropdown-item titres-dropdown-item"
                                                    href="{{path('app_emine_activite_cession_permis', {id: item.id, page: page, sp: sp, sm: 'p'})}}"
                                                    >
                                                    🔄 Cessions
                                                    </a>
                                                </div>
                                                <div><hr class="dropdown-divider"/></div>
                                                <div>
                                                    <a
                                                    class="dropdown-item titres-dropdown-item"
                                                    href="{{path('app_emine_activite_option_permis', {id: item.id, page: page, sp: sp, sm: 'p'})}}"
                                                    >
                                                    ⚙️ Options
                                                    </a>
                                                </div>
                                                <div><hr class="dropdown-divider"/></div>
                                                <div>
                                                    <a
                                                    class="dropdown-item titres-dropdown-item"
                                                    href="{{path('app_emine_activite_transformation_permis', {id: item.id, page: page, sp: sp, sm: 'p'})}}"
                                                    >
                                                    🔀 Transformations
                                                    </a>
                                                </div>
                                                <div><hr class="dropdown-divider"/></div>
                                                <div>
                                                    <a
                                                    class="dropdown-item titres-dropdown-item"
                                                    href="{{path('app_emine_activite_transfert_permis', {id: item.id, page: page, sp: sp, sm: 'p'})}}"
                                                    >
                                                    ➡️ Transferts
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
									</td>
								</tr>
							{% else %}
								<tr>
									<td colspan="13" class="text-center py-5 text-muted-mine">
										Aucun titre trouvé pour cette recherche.
									</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</main>
{% endblock %}