{# templates/admin/lot/_form_content.html.twig #}

<form
	action="{{ path('app_admin_lot_new', {'projet': projet.id}) }}" method="POST" novalidate>
	{# --- HEADER DE LA MODALE --- #}
	<div class="modal-header border-0 pb-0">
		<h5 class="modal-title fw-bold text-dark">
			<i class="fas fa-plus-circle text-primary me-2"></i>
			Nouveau Lot -
			{{ projet.nom }}
		</h5>
		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	</div>

	<div
		class="modal-body">
		{# --- PROTECTION CSRF --- #}
		{% if form is defined and form._token is defined %}
			{{ form_widget(form._token) }}
		{% endif %}

		{% set lotExists = (lot is defined and lot is not null and lot.id is not null) %}

		<div
			class="row g-3" id="lot-form-container" data-projet-type="{{ projet.typeBusiness.value|default('IMMOBILIER') }}">

			{# --- BLOC GÉNÉRATION EN MASSE --- #}
			{% if not lotExists %}
				<div class="col-12">
					<div class="alert alert-info border-info d-flex align-items-center shadow-sm">
						<i class="fas fa-layer-group fa-2x me-3"></i>
						<div>
							<label for="lot_nombre_a_creer" class="fw-bold mb-0">
								Nombre de biens identiques à générer
								<i class="fa-solid fa-circle-info ms-1 open-help" style="cursor:pointer;" data-help="<b>Génération automatique :</b><br>Si vous saisissez '10', le système créera 10 lots avec les mêmes caractéristiques. Les numéros de lots s'incrémenteront automatiquement à partir du numéro de départ."></i>
							</label>
							<div class="d-flex align-items-center gap-2 mt-1">
								<input type="number" id="lot_nombre_a_creer" name="lot[nombre_a_creer]" class="form-control form-control-sm w-25 border-info" value="1" min="1" max="100">
								<span class="small text-muted">Ex: Créez 10 villas identiques d'un coup.</span>
							</div>
						</div>
					</div>
				</div>
			{% endif %}

			{# --- IDENTIFICATION --- #}
			<div class="col-md-3">
				<label for="lot_ilot" class="form-label fw-bold small text-primary">
					Îlot / Zone
					<i class="fa-solid fa-circle-question help-icon" data-bs-toggle="tooltip" title="Référence de la zone ou de l'îlot sur le plan de masse."></i>
				</label>
				<div class="input-group shadow-sm">
					<span class="input-group-text bg-light">
						<i class="fas fa-th"></i>
					</span>
					<input type="text" id="lot_ilot" name="lot[ilot]" class="form-control" placeholder="Ex: A" value="{{ lotExists ? lot.ilot : '' }}">
				</div>
			</div>

			<div class="col-md-3">
				<label for="lot_numeroLot" class="form-label fw-bold small text-primary">
					N° du Lot
					{% if not lotExists %}(Départ)
					{% endif %}
					*
					<i class="fa-solid fa-circle-question help-icon" data-bs-toggle="tooltip" title="Numéro physique du lot. Sera incrémenté si vous générez plusieurs biens."></i>
				</label>
				<div class="input-group shadow-sm">
					<span class="input-group-text bg-light fw-bold">N°</span>
					<input type="text" id="lot_numeroLot" name="lot[numeroLot]" class="form-control" required placeholder="Ex: 101" value="{{ lotExists ? lot.numeroLot : '' }}">
				</div>
			</div>

			<div class="col-md-6">
				<label for="lot_nom" class="form-label fw-bold small text-primary">
					Nom du Bien / Racine commerciale *
				</label>
				<div class="input-group shadow-sm border-primary">
					<span class="input-group-text bg-primary text-white">
						<i class="fas fa-tag"></i>
					</span>
					<input type="text" id="lot_nom" name="lot[nomBien]" class="form-control" required placeholder="Ex: Villa Emeraude" value="{{ lotExists ? lot.nomBien : '' }}">
				</div>
			</div>

			<div class="col-md-6">
				<label for="lot_type" class="form-label fw-bold small text-primary">Type de bien *</label>
				<select id="lot_type" name="lot[typeBien]" class="form-select shadow-sm" required>
					<option value="">Choisir un type...</option>
					{% for type in typesBien %}
						<option value="{{ type.id }}" data-code="{{ type.code|default('') }}" {{ (lotExists and lot.typeBien and lot.typeBien.id == type.id) ? 'selected' : '' }}>
							{{ type.libelle }}
						</option>
					{% endfor %}
				</select>
			</div>

			<div class="col-md-6">
				<label for="lot_statut" class="form-label fw-bold small text-primary">État de disponibilité</label>
				<select id="lot_statut" name="lot[statut]" class="form-select shadow-sm">
					{% set currentStatut = lotExists ? (lot.statut.value|default(lot.statut)) : 'DISPONIBLE' %}
					{% for status in ['DISPONIBLE', 'RESERVE', 'VENDU', 'LIVRE'] %}
						<option value="{{ status }}" {{ currentStatut == status ? 'selected' : '' }}>
							{{ status|capitalize }}
						</option>
					{% endfor %}
				</select>
			</div>

			<hr
			class="my-2 opacity-25">

			{# --- SURFACES --- #}
			<div class="col-md-6 field-terrain">
				<label for="lot_surfaceTerrain" class="form-label fw-bold small text-primary">
					Surface Terrain (m²) *
					<i class="fa-solid fa-circle-question help-icon" data-bs-toggle="tooltip" title="Surface totale de la parcelle de terre."></i>
				</label>
				<div class="input-group shadow-sm">
					<input type="number" id="lot_surfaceTerrain" step="0.01" name="lot[surfaceTerrain]" class="form-control" placeholder="0.00" value="{{ lotExists ? lot.surfaceTerrain : '' }}">
					<span class="input-group-text">m²</span>
				</div>
			</div>

			<div class="col-md-6 field-construction">
				<label for="lot_surfaceBatie" class="form-label fw-bold small text-info">
					Surface Bâtie (m²)
					<i class="fa-solid fa-circle-question help-icon" data-bs-toggle="tooltip" title="Surface habitable ou couverte par la construction."></i>
				</label>
				<div class="input-group shadow-sm">
					<input type="number" id="lot_surfaceBatie" step="0.01" name="lot[surfaceBatie]" class="form-control border-info" placeholder="0.00" value="{{ lotExists ? lot.surfaceBatie : '' }}">
					<span class="input-group-text bg-info-subtle">m²</span>
				</div>
			</div>

			{# --- CARACTÉRISTIQUES --- #}
			<div class="col-12 field-construction">
				<div class="row g-2 m-0 p-3 bg-light rounded border border-info-subtle shadow-xs">
					<div class="col-md-4">
						<label class="form-label fw-bold small text-muted">Pièces</label>
						<input type="number" name="lot[nbPieces]" class="form-control shadow-sm" value="{{ lotExists ? lot.nbPieces : '' }}">
					</div>
					<div class="col-md-4">
						<label class="form-label fw-bold small text-muted">Chambres</label>
						<input type="number" name="lot[nbChambres]" class="form-control shadow-sm" value="{{ lotExists ? lot.nbChambres : '' }}">
					</div>
					<div class="col-md-4">
						<label class="form-label fw-bold small text-muted">Salles d'eau</label>
						<input type="number" name="lot[nbSallesEau]" class="form-control shadow-sm" value="{{ lotExists ? lot.nbSallesEau : '' }}">
					</div>

					<div class="col-md-6 mt-3 field-etage">
						<label class="form-label fw-bold small text-secondary">Bâtiment / Escalier</label>
						<input type="text" name="lot[batiment]" class="form-control shadow-sm" value="{{ lotExists ? lot.batiment : '' }}" placeholder="Ex: Bat A">
					</div>
					<div class="col-md-6 mt-3 field-etage">
						<label class="form-label fw-bold small text-secondary">Étage</label>
						<input type="number" name="lot[etage]" class="form-control shadow-sm" value="{{ lotExists ? lot.etage : '' }}">
					</div>

					<div class="col-12 mt-3">
						<label class="form-label fw-bold small text-muted">Commodités internes</label>
						<div class="d-flex flex-wrap gap-2">
							{% set currentCommodites = (lotExists and lot.commoditesInternes) ? lot.commoditesInternes : [] %}
							{% for commodite in ['Piscine', 'Garage', 'Jardin', 'Balcon', 'Climatisation'] %}
								<div class="form-check form-check-inline border rounded p-1 px-2 bg-white shadow-sm">
									<input class="form-check-input" type="checkbox" name="lot[commoditesInternes][]" id="comm_{{ loop.index }}" value="{{ commodite }}" {{ (currentCommodites is iterable and commodite in currentCommodites) ? 'checked' : '' }}>
									<label class="form-check-label small" for="comm_{{ loop.index }}">{{ commodite }}</label>
								</div>
							{% endfor %}
						</div>
					</div>
				</div>
			</div>

			{# --- FINANCIER --- #}
			<div class="col-12 mt-3">
				<div class="p-3 bg-success-subtle rounded border border-success shadow-sm">
					<label for="lot_prix" class="form-label fw-bold text-success">
						Prix de vente standard (FCFA) *
						<i class="fa-solid fa-circle-info help-icon open-help" style="cursor:pointer;" data-help="<b>Prix de vente :</b><br>Il s'agit du prix catalogue. Ce montant pourra être ajusté lors de la souscription client si une remise est accordée."></i>
					</label>
					<div class="input-group shadow-sm">

						<input type="text" id="lot_prix" name="lot[prixStandard]" class="form-control format-montant-js fw-bold text-success border-success" required placeholder="" value="{{ lotExists ? lot.prixStandard : '' }}">
						<span class="input-group-text bg-success text-white fw-bold border-success">FCFA</span>
					</div>
				</div>
			</div>
		</div>
	</div>

	{# --- FOOTER --- #}
	<div class="modal-footer border-0">
		<button type="button" class="btn btn-light fw-bold" data-bs-dismiss="modal">Annuler</button>
		<button type="submit" class="btn btn-primary px-4 shadow-sm">
			<i class="fas fa-save me-1"></i>
			{{ lotExists ? 'Mettre à jour' : 'Créer le(s) lot(s)' }}
		</button>
	</div>

	<script>
		(function () {
const container = document.getElementById('lot-form-container');
if (! container) 
return;



const projetType = container.getAttribute('data-projet-type');
const typeSelect = document.getElementById('lot_type');
const inputIlot = document.getElementById('lot_ilot');
const inputNumero = document.getElementById('lot_numeroLot');
const inputNom = document.getElementById('lot_nom');
const inputNombre = document.getElementById('lot_nombre_a_creer');

const constructionFields = document.querySelectorAll('.field-construction');
const etageFields = document.querySelectorAll('.field-etage');
const terrainFields = document.querySelectorAll('.field-terrain');

function suggestNom() {
if (inputNom.value === '' || inputNom.dataset.isAuto === 'true') {
const ilot = inputIlot.value ? ` ${
inputIlot.value
}` : '';
const numero = inputNumero.value ? ` ${
inputNumero.value
}` : '';

if (!(inputNombre && parseInt(inputNombre.value) > 1)) {
if (ilot || numero) {
inputNom.value = "Bien" + ilot + (numero ? " Lot" + numero : "");
inputNom.dataset.isAuto = 'true';
}
}
}
}

function toggleFields() {
const selectedOption = typeSelect.options[typeSelect.selectedIndex];
const bienCode = selectedOption ? selectedOption.getAttribute('data-code') : '';

const isLotissementProjet = (projetType === 'LOTISSEMENT');
const isTerrainNu = (bienCode === 'TERRAIN_NU' || bienCode === 'TERRAIN');
const isAppartement = ['APPARTEMENT', 'BUREAU', 'MAGASIN', 'STUDIO'].includes(bienCode);

if (isTerrainNu || isLotissementProjet) {
constructionFields.forEach(el => el.classList.add('d-none'));
} else {
constructionFields.forEach(el => el.classList.remove('d-none'));
} etageFields.forEach(el => {
isAppartement ? el.classList.remove('d-none') : el.classList.add('d-none');
});

terrainFields.forEach(el => {
isAppartement ? el.classList.add('d-none') : el.classList.remove('d-none');
});
}

typeSelect.addEventListener('change', toggleFields);
inputIlot.addEventListener('input', suggestNom);
inputNumero.addEventListener('input', suggestNom);
inputNom.addEventListener('input', () => {
inputNom.dataset.isAuto = 'false';
});

toggleFields();
})();
	</script>
</form>