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

{% block title %}{{parent()}}-La législation minière-Les titres miniers (Permis){% 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 class="active">Titres miniers et des carrières</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;">
						📋 Liste des titres miniers et des carrières
					</h1>
					<p class="text-muted-mine mb-0" style="font-size: 0.9rem">
						Registre complet des titres miniers et des carrières ({{statut}}) publiés
					</p>
				</div>
				<div class="d-flex gap-2 flex-wrap">
					<a class="operators-btn operators-btn-primary btn" href="{{path('app_emine_activite_titre_minier_download_statut', {statut: statut})}}">
						<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="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">
					<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 numéro, type ou opérateur..." name="search" hx-post="{{path('app_emine_activite_titre_minier_search_statut', {statut: statut, page: p})}}" 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-status-chip btn" href='{{path('app_emine_activite_titre_minier_index')}}'>
							Tous
						</a>

						<a class="operators-status-chip btn {% if statut == 'Actif' %} active {% endif %}" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif'})}}">
							Actif
						</a>

						<a class="operators-status-chip btn {% if statut == 'Actif en convention' %} active {% endif %}" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif en convention'})}}">
							Actif en convention
						</a>

                        <a class="operators-status-chip btn {% if statut == 'Renouvellement octroi' %} active {% endif %}" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Renouvellement octroi'})}}">
							Renouvellement octroi
						</a>

                        <a class="operators-status-chip btn {% if statut == 'Actif en renouvellement' %} active {% endif %}" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif en renouvellement'})}}">
							Actif en renouvellement
						</a>

						<div class="dropdown nav-scroller-dropdown" style='position:relative;z-index:9;'>
							<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="{{path('app_emine_activite_titre_minier_statut', {statut: 'A déchoir pour non paiement'})}}">
										A déchoir pour non paiement
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-En Déchéance_NonPaiement'})}}">
										Actif-En Déchéance_NonPaiement
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Droit Déchu'})}}">
										Droit Déchu
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-En Force Majeure'})}}">
										Actif-En Force Majeure
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-Transformation PEPM en PE'})}}">
										Actif-Transformation PEPM en PE
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-En cours de Cession Partielle'})}}">
										Actif-En cours de Cession Partielle
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-En cours de Transformation Partielle'})}}">
										Actif-En cours de Transformation Partielle
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-Transformation PR en PE'})}}">
										Actif-Transformation PR en PE
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-Transformation PR en PEPM'})}}">
										Actif-Transformation PR en PEPM
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-En cours de Cession Totale'})}}">
										Actif-En cours de Cession Totale
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-En cours de Renonciation totale'})}}">
										Actif-En cours de Renonciation totale
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-Levée de Force Majeure'})}}">
										Actif-Levée de Force Majeure
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-Transformation ARPC en AECP'})}}">
										Actif-Transformation ARPC en AECP
									</a>
								</div>
								<div><hr class="dropdown-divider"/></div>
								<div>
									<a class="dropdown-item titres-dropdown-item" href="{{path('app_emine_activite_titre_minier_statut', {statut: 'Actif-Report de Déchéance'})}}">
										Actif-Report de Déchéance
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="dashboard-card">
				<div class="dashboard-table-wrap" style='position: relative;width:100%;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 permis %}
								{% set compter  = compter + 1 %}
								{% set compter1 = (compter + ((p - 1) * 10)) %}

								<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);">
											{{compter1}}
										</span>
									</td>
									<td class="fw-medium">
										{% if item.operateur is not null %}
											<a href="{{path('app_emine_operateur_operateur_show', {id: item.operateur.id, sp: 'all'})}}">
												{{item.operateur ? item.operateur.denomination : ''}}
											</a>
										{% endif %}
									</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 arrêté trouvé pour cette recherche.
									</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>

			<div class="d-flex align-items-center justify-content-between mt-3 mb-4">
				<p class="text-muted-mine mb-0" style="font-size: 0.83rem;"></p>
				<div class="d-flex gap-1">
					{{ pagerfanta(permis, 'twitter_bootstrap5') }}
				</div>
			</div>
		</div>
	</main>
{% endblock %}