{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Finaliser le Dossier -
	{{ souscription.client.nom }}
{% endblock %}

{% block content %}
	<div
		class="container-fluid py-4">
		{# En-tête : Titre & Actions #}
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb mb-1 small">
						<li class="breadcrumb-item">
							<a href="{{ path('app_commercial_portefeuille_index') }}" class="text-decoration-none text-muted">
								<i class="fas fa-users me-1"></i>Portefeuille
							</a>
						</li>
						<li class="breadcrumb-item active">Finalisation dossier</li>
					</ol>
				</nav>
				<h3 class="page-header page-header-top mb-0">
					Dossier
					<span class="text-primary">#{{ souscription.id }}</span>
				</h3>
			</div>

			<div
				class="d-flex gap-2 align-items-center">
				{# BOUTON RETOUR #}
				<a href="{{ path('app_commercial_portefeuille_index') }}" class="btn btn-light border shadow-sm px-3 d-flex align-items-center">
					<i class="fas fa-arrow-left me-2 text-secondary"></i>
					<span>Retour</span>
				</a>

				{% if souscription.statutDossier.value == 'BROUILLON' %}
					{# BOUTON SUPPRIMER (Icône seule avec ombre) #}
					<form action="{{ path('app_commercial_souscription_delete', {id: souscription.id}) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer définitivement ce dossier ?');" class="m-0">
						<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ souscription.id) }}">
						<button type="submit" class="btn btn-outline-danger shadow-sm d-flex align-items-center justify-content-center" style="width: 42px; height: 38px;">
							<i class="fas fa-trash-alt"></i>
						</button>
					</form>

					{# BOUTON SOUMETTRE (Action principale) #}
					<form action="{{ path('app_commercial_souscription_submit', {id: souscription.id}) }}" method="POST" class="m-0">
						<button type="submit" class="btn btn-success shadow-sm px-4 d-flex align-items-center">
							<i class="fas fa-paper-plane me-2"></i>
							<span>Soumettre pour approbation</span>
						</button>
					</form>
				{% endif %}
			</div>
		</div>

		{# Carte de Statut #}
		<div class="card border-0 shadow-sm mb-4">
			<div class="card-body p-3">
				<div class="d-flex align-items-center justify-content-between">
					<div class="d-flex align-items-center">
						<div class="avatar-sm {% if souscription.statutDossier.value == 'BROUILLON' %}bg-soft-warning text-warning{% else %}bg-soft-info text-info{% endif %} rounded-circle d-flex align-items-center justify-content-center me-3">
							<i class="fas {% if souscription.statutDossier.value == 'BROUILLON' %}fa-edit{% else %}fa-spinner fa-spin{% endif %}"></i>
						</div>
						<div>
							<div class="small text-muted text-uppercase fw-bold">Statut actuel</div>
							<div class="fw-bold text-dark">{{ souscription.statutDossier.getLabel }}</div>
						</div>
					</div>
					{% if souscription.statutDossier.value == 'BROUILLON' %}
						<div class="text-warning small italic">
							<i class="fas fa-info-circle me-1"></i>
							Veuillez vérifier les 3 onglets avant la soumission.
						</div>
					{% endif %}
				</div>
			</div>
		</div>

		{# Carte de Financement #}
		<div class="card border-0 shadow-sm mb-4">
			<div class="card-body p-3">
				<div class="d-flex align-items-center justify-content-between mb-3">
					<div
						class="d-flex align-items-center">
						{# Utilisation de l'énumération ModeFinancement #}
						{% set isEcheancier = souscription.modeFinancement.value == 'ECHEANCIER' %}
						<div class="avatar-sm {{ isEcheancier ? 'bg-soft-primary text-primary' : 'bg-soft-success text-success' }} rounded-circle d-flex align-items-center justify-content-center me-3">
							<i class="fas {{ isEcheancier ? 'fa-calendar-alt' : 'fa-money-bill-wave' }}"></i>
						</div>
						<div>
							<div class="small text-muted text-uppercase fw-bold">Mode de règlement</div>
							<div class="fw-bold text-dark">{{ souscription.modeFinancement.getLabel }}</div>
						</div>
					</div>

					<div class="text-end">
						<div class="small text-muted text-uppercase fw-bold">Prix Final</div>
						<div class="fw-bold text-dark">{{ souscription.prixFinal|number_format(0, ',', ' ') }}
							FCFA</div>
					</div>
				</div>

				{% if isEcheancier %}
					<hr class="text-light">
					<div
						class="row g-3">
						{# Apport Initial #}
						<div class="col-md-3 border-end">
							<div class="small text-muted">Apport Initial</div>
							<div class="fw-bold text-dark">
								{{ (souscription.echeancierApportInitial ?? 0)|number_format(0, ',', ' ') }}
								FCFA
							</div>
						</div>

						{# Durée #}
						<div class="col-md-2 border-end text-center">
							<div class="small text-muted">Durée</div>
							<div class="fw-bold text-primary">{{ souscription.echeancierDureeMois|default(0) }}
								mois</div>
						</div>

						{# Montant Échéance (Calculé via le prix final et l'apport initial de l'entité) #}
						<div class="col-md-3 border-end text-center">
							<div class="small text-muted">Mensualité estimée</div>
							<div class="fw-bold text-info">
								{% set resteFinancement = (souscription.prixFinal - souscription.echeancierApportInitial) %}
								{% if souscription.echeancierDureeMois > 0 %}
									{{ (resteFinancement / souscription.echeancierDureeMois)|number_format(0, ',', ' ') }}
									FCFA
								{% else %}
									-
								{% endif %}
							</div>
						</div>

						{# Reste à solder (Utilise la méthode getResteAPayer() de l'entité) #}
						<div class="col-md-4 text-end">
							<div class="small text-muted">Reste à solder</div>
							<div class="fw-bold text-danger">
								{{ resteFinancement |number_format(0, ',', ' ') }}
								FCFA
							</div>
						</div>
					</div>

					{# Optionnel : Date de début #}
					{% if souscription.dateDebutPaiement %}
						<div class="mt-2 pt-2 border-top">
							<small class="text-muted">
								<i class="fas fa-info-circle me-1"></i>
								Début des prélèvements :
								<strong>{{ souscription.dateDebutPaiement|date('d/m/Y') }}</strong>
							</small>
						</div>
					{% endif %}
				{% else %}
					<div class="alert alert-soft-success d-flex align-items-center mb-0 p-2 mt-2">
						<i class="fas fa-check-circle me-2"></i>
						<small>Paiement intégral à la signature du contrat.</small>
					</div>
				{% endif %}

				<div class="text-end mt-3">
					<button class="btn btn-sm btn-warning border btn-ajax-modal" data-url="{{ path('shared_souscription_edit_financement_modal', {id: souscription.id}) }}">
						<i class="fas fa-user-edit me-1"></i>
						Modifier mode de reglement
					</button>
				</div>
			</div>
		</div>


		<div class="row g-4">
			<div
				class="col-lg-12">
				{# Système d'onglets #}
				<div class="card border-0 shadow-sm">
					<div class="card-header bg-white border-bottom-0 pt-3">
						<ul class="nav nav-tabs nav-tabs-custom card-header-tabs" id="dossierTab" role="tablist">
							<li class="nav-item" role="presentation">
								<button class="nav-link active fw-bold" id="client-tab" data-bs-toggle="tab" data-bs-target="#client-info" type="button" role="tab">
									<i class="fas fa-user-circle me-2"></i>Informations du Client
								</button>
							</li>
							<li class="nav-item" role="presentation">
								<button class="nav-link fw-bold" id="lot-tab" data-bs-toggle="tab" data-bs-target="#lot-info" type="button" role="tab">
									<i class="fas fa-map-marked-alt me-2"></i>Lot souhaité
								</button>
							</li>
							<li class="nav-item" role="presentation">
								<button class="nav-link fw-bold d-flex align-items-center" id="docs-tab" data-bs-toggle="tab" data-bs-target="#docs-info" type="button" role="tab">
									<i class="fas fa-file-invoice me-2"></i>Pièces Justificatives
								</button>
							</li>
						</ul>
					</div>

					<div class="card-body p-4">
						<div
							class="tab-content" id="dossierTabContent">
							{# ONGLET 1 : INFORMATIONS CLIENT #}
							<div class="tab-pane fade show active" id="client-info" role="tabpanel">
								<div class="d-flex justify-content-between align-items-center mb-4">
									<h5 class="fw-bold mb-0">Profil du Souscripteur</h5>
									<button class="btn btn-sm btn-light border btn-ajax-modal" data-url="{{ path('shared_user_edit_modal', {id: souscription.client.id}) }}">
										<i class="fas fa-user-edit me-1"></i>
										Modifier les coordonnées
									</button>
								</div>
								<div class="row">
									{{ include('_shared/user/show.html.twig', {'user': souscription.client}) }}
								</div>
							</div>

							{# ONGLET 2 : LOT SOUHAITÉ #}
							<div class="tab-pane fade" id="lot-info" role="tabpanel">
								<div class="row">
									{{ include('_shared/lot/show.html.twig', {'lot': souscription.lot}) }}
								</div>
							</div>

							{# ONGLET 3 : PIÈCES JUSTIFICATIVES #}
							<div class="tab-pane fade" id="docs-info" role="tabpanel">
								<div class="d-flex justify-content-between align-items-center mb-4">
									<h5 class="fw-bold mb-0">Documents au dossier</h5>
								</div>
								<div id="documents-container" class="bg-light rounded p-2">
									{{ render(controller('App\\Controller\\Shared\\DocumentSharedController::renderInlineManager', {
                                    'targetType': 'CLIENT',
                                    'targetId': souscription.client.id
                                })) }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<style>
		.nav-tabs-custom .nav-link {
			border: none;
			padding: 1.2rem 1.5rem;
			color: #6c757d;
			border-bottom: 3px solid transparent;
			transition: all 0.3s ease;
		}
		.nav-tabs-custom .nav-link.active {
			color: #0d6efd;
			background: transparent;
			border-bottom-color: #0d6efd;
		}
		.nav-tabs-custom .nav-link:hover:not(.active) {
			border-bottom-color: #dee2e6;
		}
		.bg-soft-warning {
			background-color: rgba(255, 193, 7, 0.15);
		}
		.bg-soft-info {
			background-color: rgba(13, 202, 240, 0.15);
		}
		.avatar-sm {
			width: 45px;
			height: 45px;
			font-size: 1.2rem;
		}
		.card {
			border-radius: 15px;
			overflow: hidden;
		}
	</style>
{% endblock %}