{% extends '@admin/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/admin/document_client_shared.css') }}">


{% endblock %}

{% block subheader %}

{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block stat %}

{% endblock %}

{# --- Body Content --- #}
{% block bodycontent %}
 <div id="legacy-container" class="mt-3">
	<div id="form" >
		<form id="docForm" class="container-big"  name="form_document" method="POST" action="{{ path('new_document_commande', {'category' : category,'type':type, 'id' : id }) }}"  enctype="multipart/form-data">
			{#Titre document#}
			<div class="alert w-100 d-flex align-items-center py-3 px-4 mb-4" style="background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724;">
				<i class="fas fa-edit me-3 fa-lg"></i>
				<h3 class="m-subheader__title m-0 p-0" style="font-size: 1.25rem;">
					VENTES - CREATION DU BON DE COMMANDE CLIENT
				</h3>
			</div>

			<div class="docFormContent card p-3 fs-3" >

				<div id="formErrors" class="alert alert-danger" style="display:none;"></div>
				<div class="topDocForm row d-flex gx-0" >

					{#--Partie gauche--#}
					<div id="corpInfo" class="col-12 col-lg-9" >

						{% if cmdEnAttente is defined and cmdEnAttente >= 2 %}
							<div class="alert alert-warning d-flex align-items-start gap-2 mb-4 crm-alert-pulse-5s" role="alert">
								<i class="fa fa-hourglass-half mt-1 text-warning"></i>
								<div>
									<div class="fw-semibold">Attention sur l'historique client</div>
									<div class="small">
										Ce client a
										<strong>{{ cmdEnAttente }}</strong>
										commande{% if cmdEnAttente > 1 %}s{% endif %}
										en attente ou acceptée{% if cmdEnAttente > 1 %}s{% endif %}.
									</div>
									{% if cmdPendingDocs is defined and cmdPendingDocs is not empty %}
										<div class="d-flex flex-wrap gap-2 mt-2">
											{% for pendingDoc in cmdPendingDocs %}
												<a href="{{ path('document_show', {'id': pendingDoc.id}) }}"
												   target="_blank"
												   class="btn btn-sm btn-outline-warning">
													{{ pendingDoc.internalNbr }}
													<span class="ms-1 text-lowercase">({{ pendingDoc.status|replace({'-':' '}) }})</span>
												</a>
											{% endfor %}
										</div>
									{% endif %}
								</div>
							</div>
						{% endif %}

						<div class="mb-0 bg-light border rounded-3 p-2">

							<div class="d-flex align-items-center gap-2">

								{# Select d'abord #}
								<select id="source"
										class="form-select no-select2 flex-grow-1"
										name="form_document[source][id]"
										required>
									<option value=""
											{% if document.source is null %}selected{% endif %}
											disabled>
									-- Sélectionnez la source de la commande --
									</option>

									{% for source in sources %}
									<option value="{{ source.id }}"
											{% if document.source is not null and document.source.id == source.id %}selected{% endif %}>
										{{ source.name }}
									</option>
									{% endfor %}
								</select>

								{# Icônes ensuite (même ligne) #}
								<div class="d-flex align-items-center gap-1 flex-shrink-0">
									<button type="button" class="btn btn-light shadow-sm p-2"
											onclick="selectSource('Facebook')" title="Facebook">
									<i class="fab fa-facebook-square fa-lg text-primary"></i>
									</button>

									<button type="button" class="btn btn-light shadow-sm p-2"
											onclick="selectSource('Instagram')" title="Instagram">
									<i class="fab fa-instagram fa-lg text-danger"></i>
									</button>

									<button type="button" class="btn btn-light shadow-sm p-2"
											onclick="selectSource('WhatsApp')" title="WhatsApp">
									<i class="fab fa-whatsapp fa-lg text-success"></i>
									</button>

									<button type="button" class="btn btn-light shadow-sm p-2"
											onclick="selectSource('TikTok')" title="TikTok">
									<i class="fab fa-tiktok fa-lg text-dark"></i>
									</button>

									<button type="button" class="btn btn-light shadow-sm p-2"
											onclick="selectSource('Téléphone')" title="Téléphone">
									<i class="fas fa-phone-alt fa-lg text-info"></i>
									</button>
								</div>

							</div>

						</div>

						<div class="mb-3 mb-3-32" id="subject" style="display: none;">
							<label for="subject" class="form-label label-block">Objet du document</label>
							<div class="form-input width-100">
								<div class="">
									<textarea rows="1" name="form_document[object]" class="width-100" size="15" dir="ltr"></textarea>
								</div>
							</div>
						</div>





						{# Contenu de la commande #}
						<div id="formLimiter" class="card border-0 shadow-sm">
							<div class="delivery-box delivery-inline mt-3">
								<div class="row g-2 align-items-center">
									<div class="col-auto d-none d-md-flex align-items-center">
										<i class="fa fa-truck text-primary" style="font-size:1.2rem;"></i>
									</div>
									<div class="col-6 col-md-1 delivery-free-field">
										<label class="form-label mb-1 text-center w-100">Gratuit</label>
										<div class="form-check form-switch d-flex justify-content-center align-items-center m-0">
											<input type="checkbox"
													id="form_document_free_delivery"
													name="form_document[isFreedelivery]"
													class="form-check-input"
													data-bs-toggle="tooltip"
													data-bs-placement="top"
													title="Activer pour mettre les frais de livraison à 0"
													{% if document.isFreedelivery is not null and document.isFreedelivery == true %}checked{% endif %}>
										</div>
									</div>
									<div class="col-12 col-md-3">
										<label class="form-label mb-1">Livraison</label>
										<select id="form_document_delivery_id" name="form_document[delivery][id]" class="form-select form-select-sm shipping">
											{% for delivery in deliverys %}
												<option value="{{ delivery.id }}"
														unitamount="{{ delivery.price }}"
														{% if document.delivery is not null and document.delivery.id == delivery.id %}
															selected
														{% elseif document.delivery is null and delivery.isSelected == 1 %}
															selected
														{% endif %}>
													{{ delivery.name }}
												</option>
											{% endfor %}
										</select>
									</div>
									<div class="col-6 col-md-2">
										<label class="form-label mb-1">Prix HT</label>
										<input id="form_document_delivery_price_ht"
												class="form-control form-control-sm unitAmountDisplay updateRow price_ht-input"
												type="number"
												step="any"
												value="{{ document.deliveryPrice ?? '' }}"
												name="form_document[delivery][price_ht]">
									</div>
									<div class="col-6 col-md-1">
										<label class="form-label mb-1">Nb colis</label>
										<input type="number"
												step="1"
												min="1"
												id="form_document_packagesNbr"
												name="form_document[packagesNbr]"
												class="form-control form-control-sm updateRow quantity quantity-input"
												value="{{ document.packagesNbr ?? 1 }}">
									</div>
									<div class="col-6 col-md-2">
										<label class="form-label mb-1">TVA</label>
										<select class="updateRow tva-input form-select form-select-sm" name="form_document[delivery][tva]">
											<option value="0" selected>0</option>
											{% for tva in tvas %}
												<option {% if document.deliveryTva and document.deliveryTva.id == tva.id %}selected{% endif %} value="{{ tva.id }}">{{ tva.number }}</option>
											{% endfor %}
										</select>
									</div>
									<div class="col-6 col-md-2">
										<label class="form-label mb-1">Total</label>
										<div class="form-control form-control-sm bg-light d-flex align-items-center justify-content-between">
											<span id="form_document_delivery_total">{{ document.deliveryTotal ?? 0 }}</span><sup>TND</sup>
										</div>
										<input id="form_document_delivery_totalAmount"
												class="withPrecision totalAmountTtc totalAmountTtc-input"
												type="hidden"
												value="{{ document.deliveryTotal ?? 0 }}"
												name="form_document[delivery][total_amount_ttc]">
									</div>
									<div class="col-12 d-none">
										<input class="discountValue updateRow discount-input"
												type="number" step="any"
												value="{% if document.deliveryDiscount is not null %}{{ document.deliveryDiscount }}{% else %}0{% endif %}"
												name="form_document[delivery][discount]">
										<select class="discountUnit updateRow discount-type-input"
												name="form_document[delivery][discount_type]">
											<option {% if document.deliveryDiscountType == "percent" %}selected{% endif %} value="percent">%</option>
											<option {% if document.deliveryDiscountType == "amount" %}selected{% endif %} value="amount" class="currency">TND</option>
										</select>
									</div>
								</div>
							</div>
								<div id="formContent" class="ui-sortable">

									<input id="form_document_count" value="{{ document.documentDeclinationProduits|length }}" type="hidden">
									<input id="form_document_comment_count" value="{{ document.documentComments|length }}" type="hidden">

									<div class="table-responsive">

										<table id="tableContent" class="table table-hover align-middle mb-0">
											<thead class="table-light">
												<tr class="small text-uppercase">
													<th class="d-none">#</th>
													<th class="image">Image</th>
													<th class="name">Référence</th>
													<th class="notes">Description</th>
													<th class="unit text-nowrap">P.U HT</th>
													<th class="discount">Remise</th>
													<th class="tax col-disabled">TVA</th>
													<th class="qt">Qt</th>
													<th class="amount col-disabled text-nowrap">Net à payer (TTC)</th>
													<th></th>
												</tr>
											</thead>

											<tbody>
												{# Template ligne produit #}
												<tr class="tr-produit d-none">
													<td class="image">
														<img class="image-item rounded border" src="{{ asset('/images/galery_placeholder_200.png') }}" alt="Produit">
														<input class="item-id" type="hidden">
														<input class="type-input" type="hidden">
														<input class="statut-input" type="hidden">
														<input class="row-index" type="hidden">
														<input class="pack-id-input" type="hidden">
														<input class="pack-group-input" type="hidden">
														<input class="pack-qty-input" type="hidden">
													</td>
													<td class="name">
														<input type="text" class="reference-input w-100 form-control" placeholder="Référence">
													</td>
													<td class="notes">
														<textarea rows="1" class="description-textarea form-control"></textarea>
													</td>
													<td class="unit">
														<input class="unitAmountDisplay updateRow price_ht-input form-control" onchange="calculateTotalPrice($(this))" type="number" step="any" value="0">
													</td>
													<td class="discount">
														<div class="d-flex gap-1">
															<input class="discountValue updateRow discount-input form-control" onchange="calculateTotalPrice($(this))" type="number" step="any" value="0.00">
															<select class="discountUnit updateRow discount-type-input form-select" onchange="calculateTotalPrice($(this))">
																<option value="percent">%</option>
																<option value="amount" class="currency">TND</option>
															</select>
														</div>
													</td>
													<td class="tax taxesvalueslist valueslist col-disabled">
														<select class="updateRow tva-input form-select" onchange="calculateTotalPrice($(this));">
															{% for tva in tvas %}
																<option value="{{ tva.id }}">{{ tva.number }}</option>
															{% endfor %}
														</select>
													</td>
													<td class="qt">
														<input type="number" step="any" onchange="calculateTotalPrice($(this));" class="updateRow quantity quantity-input form-control" value="1">
													</td>
													<td class="amount amountTotal col-disabled text-end">
														<span class="currencyleft"></span>
														<span class="total"></span>
														<span class="currencyright"></span>
														<input class="withPrecision totalAmountTtc totalAmountTtc-input" type="hidden" value="">
													</td>
													<td class="acenter text-center">
														<a href="javascript:void(0);" onclick="removeItem($(this));" class="text-danger">
															<i class="fa fa-trash fs-5 cpointer"></i>
														</a>
													</td>
												</tr>

												{# Template ligne commentaire #}
												<tr class="tr-comment d-none">
													<td class="d-none"></td>

													<td class="text-center align-middle" style="width:42px;">
														<i class="fa fa-comment-dots text-info"></i>
													</td>

													<td colspan="7" class="title">
														<textarea rows="2"
																placeholder="Taper votre commentaire..."
																class="comment-textarea form-control"></textarea>
													</td>

													<td class="acenter text-center">
														<a href="javascript:void(0);" onclick="removeItem($(this));" class="text-danger">
														<i class="fa fa-trash fs-5 cpointer"></i>
														</a>
													</td>
												</tr>

												<tr class="delivery-style d-none"><td colspan="10"></td></tr>

												{# Lignes existantes #}
												{% if document.documentDeclinationProduits is not empty %}
													{% for key, documentDeclinationProduit in document.documentDeclinationProduits %}
														<tr auto_mousehoaver="true" class="tr-produit">
															<td class="alfet ps-0">
																<input class="item-id" type="hidden" name="form_document[content][{{ key+1 }}][id]" value="{% if documentDeclinationProduit.produitDeclinationValue is defined and documentDeclinationProduit.produitDeclinationValue is not null %}{{ documentDeclinationProduit.produitDeclinationValue.id }}{% endif %}">
																<input class="type-input" type="hidden" name="form_document[content][{{ key+1 }}][type]" value="produitDeclination">
																<input class="statut-input" type="hidden" name="form_document[content][{{ key+1 }}][statut]" value="update">
																<input class="row-index" type="hidden" value="{{ key+1 }}">
																<input class="pack-id-input" type="hidden" name="form_document[content][{{ key+1 }}][pack_id]" value="{{ documentDeclinationProduit.pack ? documentDeclinationProduit.pack.id : '' }}">
																<input class="pack-group-input" type="hidden" name="form_document[content][{{ key+1 }}][pack_group]" value="{{ documentDeclinationProduit.packGroup ?? '' }}">
																<input class="pack-qty-input" type="hidden" name="form_document[content][{{ key+1 }}][pack_qty]" value="{{ documentDeclinationProduit.packQty ?? '' }}">
															</td>
															<td class="image">
																{% set picture = asset('/images/galery_placeholder_200.png') %}
																{% for image in documentDeclinationProduit.produitDeclinationValue.picture %}
																	{% if image.isSelected %}
																		{% set picture = app.request.getSchemeAndHttpHost() ~ vich_uploader_asset(image, 'file') %}
																	{% endif %}
																{% endfor %}
																<img class="img-produit rounded border" src="{{ picture }}" alt="Produit">
															</td>
															<td class="name">
																<input type="text" class="reference-input w-100 form-control" placeholder="Référence" name="form_document[content][{{ key+1 }}][reference]" value="{{ documentDeclinationProduit.reference }}">
															</td>
															<td class="notes">
																<textarea rows="2" class="description-textarea form-control" name="form_document[content][{{ key+1 }}][description]">{{ documentDeclinationProduit.description }}</textarea>
															</td>
															<td class="unit">
																<input class="unitAmountDisplay updateRow price_ht-input form-control" onchange="calculateTotalPrice($(this))" type="number" step="any" name="form_document[content][{{ key+1 }}][price_ht]" value="{{ documentDeclinationProduit.priceHt }}">
															</td>
															<td class="discount">
																<div class="d-flex gap-1">
																	<input class="discountValue updateRow discount-input form-control" onchange="calculateTotalPrice($(this))" type="number" step="any" value="{{ documentDeclinationProduit.discount }}" name="form_document[content][{{ key+1 }}][discount]">
																	<select class="discountUnit updateRow discount-type-input form-select" onchange="calculateTotalPrice($(this))" name="form_document[content][{{ key+1 }}][discount_type]">
																		<option {% if documentDeclinationProduit.discountType == "percent" %}selected{% endif %} value="percent">%</option>
																		<option {% if documentDeclinationProduit.discountType == "amount" %}selected{% endif %} value="amount" class="currency">TND</option>
																	</select>
																</div>
															</td>
															<td class="tax taxesvalueslist valueslist col-disabled">
																<select class="updateRow tva-input form-select" onchange="calculateTotalPrice($(this));" name="form_document[content][{{ key+1 }}][tva]">
																	{% for tva in tvas %}
																		<option {% if documentDeclinationProduit.tva.id == tva.id %}selected{% endif %} value="{{ tva.id }}">{{ tva.number }}</option>
																	{% endfor %}
																</select>
															</td>
															<td class="qt">
																<input type="number" step="any" onchange="calculateTotalPrice($(this));" class="updateRow quantity quantity-input form-control" min="1" max="{{ documentDeclinationProduit.quantity }}" value="{{ documentDeclinationProduit.quantity }}" name="form_document[content][{{ key+1 }}][quantity]">
															</td>
															<td class="amount amountTotal col-disabled text-end">
																<span class="currencyleft"></span>
																<span class="total">{{ documentDeclinationProduit.totalAmountTtc }}</span>
																<span class="currencyright"><sup>TND</sup></span>
																<input class="withPrecision totalAmountTtc totalAmountTtc-input" type="hidden" value="{{ documentDeclinationProduit.totalAmountTtc }}" name="form_document[content][{{ key+1 }}][total_amount_ttc]">
															</td>
															<td class="acenter text-center">
																<a href="javascript:void(0);" onclick="removeItem($(this));" class="text-danger">
																	<i class="fa fa-trash fs-5 cpointer"></i>
																</a>
															</td>
														</tr>
													{% endfor %}
												{% endif %}

												{% if document.documentComments is not empty %}
                                                    {% for key, documentComment in document.documentComments %}
                                                        <tr>
                                                        <td class="d-none"></td>

                                                        <td class="text-center align-middle" style="width:42px;">
                                                            <i class="fa fa-comment-dots text-info"></i>
                                                        </td>

                                                        <td colspan="7" class="title">
                                                            <textarea rows="1"
                                                                    name="form_document[comment][{{ key+1 }}]"
                                                                    placeholder="Commentaire"
                                                                    class="comment-textarea form-control">{{ documentComment.description }}</textarea>
                                                        </td>

                                                        <td class="acenter text-center">
                                                            <a href="javascript:void(0);" onclick="removeItem($(this));" class="text-danger">
                                                            <i class="fa fa-trash fs-5 cpointer"></i>
                                                            </a>
                                                        </td>
                                                        </tr>
                                                    {% endfor %}
                                                {% endif %}
											</tbody>
										</table>
									</div>

									{% if document.documentProduits is empty and document.documentDeclinationProduits is empty %}
										<div class="placeholder mt-3 noDocument">
											<div class="alert alert-warning text-center mb-0">
												<strong>Ajoutez une ligne pour commencer votre document</strong>
											</div>
										</div>
									{% endif %}
								</div>

								<div class="formFooter row g-3 mt-3">
									<div class="col-12 col-lg-7">
										{% if type in ['commande','achat','retour','reception'] %}
											<div class="mb-3 mt-1">
												<a href="javascript:void(0);" onclick="addComment($(this));" class="btn btn-secondary btn-sm mb-2">
													<i class="fa flaticon-chat-1 me-1"></i> Ajouter un commentaire
												</a>

												<div class="input-group">
													<span class="input-group-text" data-bs-toggle="tooltip" title="Recherche en stock réel">
														<div class="form-check mb-0">
															<input class="form-check-input" name="is_available" value="1" type="checkbox" checked>
														</div>
													</span>
													<input id="searchItem" type="text" class="form-control" placeholder="Tapez ici pour ajouter un produit..." autocomplete="off" data-category="{{ document.category }}" autofocus>
													<button type="button" class="btn btn-outline-primary" id="btnAddPackToDocument">
														<i class="fa fa-box-open me-1"></i> Pack
													</button>
												</div>

												<div class="token-input-dropdown position-relative" style="display: none;">
													<button type="button"
															class="btn-close search-dropdown-close"
															aria-label="Fermer"></button>
													<ul id="content"></ul>
												</div>

											</div>
										{% endif %}
									</div>

									{# --- Totaux (style BS5 comme ton exemple) --- #}
									<div class="col-12 col-lg-5 ms-lg-auto">
									<div class="border rounded-3 p-2 bg-light">

										<table class="table table-sm table-borderless mb-0 align-middle">
										<tbody>

											<tr id="totalAmountTaxEcl">
											<td class="text-muted">
												<i class="fa fa-calculator me-2"></i>Total HT
											</td>
											<td class="text-end text-muted">
												<input type="hidden" id="form_documentTotalAmountHt" name="form_document[totalAmountHt]" value="0">
												<span class="currencyleft"></span><span id="totalHt" class="total">0.000</span> <sup>TND</sup>
											</td>
											</tr>

											<tr id="totalTax_3014919" class="totalTaxes">
											<td class="text-muted">
												<i class="fa fa-percent me-2 text-warning"></i>Total TVA
											</td>
											<td class="text-end text-muted override-totals-no-editable">
												<input type="hidden" id="form_documentTotalTva" name="form_document[totalTva]" value="0">
												<span class="currencyleft"></span><span id="totalTva" class="total">0.000</span> <sup>TND</sup>
											</td>
											</tr>

											<tr id="totalAmountTtc">
											<td class="text-dark fw-semibold">
												<i class="fa fa-file-invoice-dollar me-2"></i>Total TTC
											</td>
											<td class="text-end fw-semibold">
												<input type="hidden" id="form_documentTotalAmountTtc" name="form_document[totalAmountTtc]" value="0">
												<span class="currencyleft"></span><span id="totalTtc">0.000</span> <sup>TND</sup>
											</td>
											</tr>

											<tr id="totalDiscount">
											<td class="text-muted">
												<i class="fa fa-tag me-2 text-info"></i>Remise
												{% if document.discountType == 'percent' %}
												({{ document.discount is null ? '0' : document.discount ~ '%' }})
												{% endif %}
											</td>
											<td class="text-end text-muted">
												<span id="totalDisc" class="total">
												{% if document.discount is null %}0.000{% else %}{{ document.discount }}{% endif %}
												</span>
												<span id="typetotalDisc">
												{% if document.discountType == "percent" %}%{% else %}<sup>TND</sup>{% endif %}
												</span>
											</td>
											</tr>

											<tr id="totalNetBeforeShipping">
											<td class="text-muted">
												<i class="fa fa-wallet me-2 text-secondary"></i>Net à payer (hors frais)
											</td>
											<td class="text-end text-muted">
												<span id="totalNetBeforeDelivery">0.000</span> <sup>TND</sup>
											</td>
											</tr>

											<tr id="totalShipping">
											<td class="text-muted">
												<i class="fa fa-truck me-2 text-primary"></i>Frais de port
											</td>
											<td class="text-end text-muted">
												<span class="total-frais"></span> <sup>TND</sup>
											</td>
											</tr>

											<tr><td colspan="2" class="py-2"></td></tr>

											<tr id="totalAllInc" class="border-top">
											<td class="pt-3 fw-bold">
												<i class="fa fa-wallet me-2 text-success"></i>Net à payer
											</td>
											<td class="text-end pt-3 fw-bold text-success">
												<span id="totalNet">0.000</span> <sup>TND</sup>
											</td>
											</tr>

										</tbody>
										</table>

									</div>
									</div>

									<div class="note mt-2">
										<textarea rows="1" name="form_document[note]" class="d-none" placeholder="Notes" dir="ltr"></textarea>
									</div>
								</div>
						</div>

					</div> {#--Fin corpInfo--#}

					{# -- Partie droite : Client + Détail livraison + Détail payement -- #}
					<div class="col-12 col-lg-3 mt-4 mt-lg-0 doc-sidebar">

						{# == N° + DATE (fieldset + compact) == #}

						<fieldset class="crm-fieldset p-3">
							<legend class="crm-legend">
								<i class="fa fa-file-alt text-primary me-2"></i> Document
							</legend>

							<div class="ps-2"> {# ou ps-3 si tu veux plus d’air #}

								<div class="row gx-1 gy-1 align-items-center mb-1">
									<label for="document-internalNbr" class="col-4 form-label mb-0 text-start">N°</label>
									<div class="col-8">
										<input type="text" class="form-control form-control-sm"
											id="document-internalNbr" name="form_document[internalNbr]"
											value="{{ document.internalNbr }}" readonly>
									</div>
								</div>

								<div class="row gx-1 gy-1 align-items-center">
									<label for="document-createdAt" class="col-4 form-label mb-0 text-start">Date</label>
									<div class="col-8">
										<input type="text" class="form-control form-control-sm"
											id="document-createdAt" name="form_document[createdAt]"
											value="{{ document.createdAt|date('d/m/Y') }}" readonly>
									</div>
								</div>

								<div class="row gx-1 gy-1 align-items-center mt-1">
									<label for="document-promisedAt" class="col-4 form-label mb-0 text-start">Date prévue</label>
									<div class="col-8">
										<input type="datetime-local"
											id="document-promisedAt"
											name="form_document[promisedAt]"
											class="form-control form-control-sm datetimepicker-width"
											autocomplete="off"
											{% if document.promisedAt %}value="{{ document.promisedAt|date('Y-m-d\\TH:i') }}"{% endif %}>
									</div>
								</div>

							</div>
						</fieldset>


						{# Créé par (caché) #}
						<div class="d-none">
							<input type="text"
								id="currentUser"
								class="form-control"
								name="form_document[currentUser]"
								value="{{ document.user.username }}"
								disabled>
						</div>

						{# === INFO CLIENT === #}

						<fieldset class="crm-fieldset p-3">
							<legend class="crm-legend">
							<i class="fa fa-user text-primary me-2"></i> Info Client
							</legend>

							{# Nom + lien profil #}
							<div class="d-flex justify-content-between align-items-center mb-2">
							<div class="fw-semibold">
								{{ document.client.civility }} {{ document.client.firstName }}
							</div>

							<a href="{{ path('user_show', {'id': document.client.id }) }}"
								class="text-decoration-none"
								title="{{ document.client.civility }} {{ document.client.firstName }}"
								target="_blank">
								{{ document.client.username }}
							</a>
							</div>

							{# Téléphones (compact) #}
							<div class="small mb-2">
							<i class="fa fa-phone me-1 text-muted"></i>
							<a href="tel:{{ document.client.phone }}" class="text-decoration-none">
								{{ document.client.phone }}
							</a>

							{% if document.client.secondPhone %}
								<span class="text-muted mx-1">|</span>
								<a href="tel:{{ document.client.secondPhone }}" class="text-decoration-none">
								{{ document.client.secondPhone }}
								</a>
							{% endif %}
							</div>

							{# Adresse #}
							{% if document.client.adress %}

							{# 3) cacher la zone document.region #}
							<input type="text"
									id="doc_region"
									name="form_document[region]"
									class="d-none"
									value="{% if document.region %}{{ document.region }}{% else %}{{ document.client.region }}{% endif %}">

							<div class="d-flex align-items-start justify-content-between gap-2 mb-2">
								<div id="thirdAddress_toHTML" class="small text-muted lh-sm">
								<i class="fa fa-map-marker me-1"></i>
								{% if document.adress %}
									{{ document.adress|replace({'Tunisie': ""}) }}
								{% else %}
									{{ document.client.adress|replace({'Tunisie': ""}) }}
								{% endif %}
								, {{ document.client.city }} {{ document.client.region }}
								</div>

								{% if document.client.multiAddress is not empty %}
								<button id="btn-multiaddress"
										title="Le client a plusieurs adresses"
										type="button"
										class="btn btn-sm btn-danger rounded-pill px-2 py-1 blinking">
									<i class="fa fa-map-marker me-1"></i>
									<span class="badge bg-light text-danger">
									{{ (document.client.multiAddress | length) + 1 }}
									</span>
								</button>
								{% endif %}
							</div>

							{% if document.client.multiAddress is not empty %}
								<select id="select_adress"
										onchange="selectAdress($(this));"
										class="form-select form-select-sm w-100 mb-2">
								<option
									{% if document.client.adress == document.adress %} selected {% endif %}
									value="0"
									data-address="{{ document.client.adress|replace({'Tunisie': ""}) }}"
									data-city="{{ document.client.city }}"
									data-region="{{ document.client.region }}">
									{{ document.client.adress }} - {{ document.client.city }} - {{ document.client.region }}
								</option>

								{% for addres in document.client.multiAddress %}
									<option
									value="{{ addres.id }}"
									data-address="{{ addres.address|replace({'Tunisie': ""}) }}"
									data-city="{{ addres.city }}"
									data-region="{{ addres.region }}">
									{{ addres.address }} - {{ addres.city }} - {{ addres.region }}
									</option>
								{% endfor %}
								</select>
							{% endif %}

							<input type="hidden"
									id="doc_adress"
									name="form_document[adress]"
									value="{% if document.adress %}{{ document.adress }}{% else %}{{ document.client.adress }} {{ document.client.city }} {{ document.client.region }} {{ document.client.country }}{% endif %}">

							{% else %}
							<div class="small text-muted">
								<i class="fa fa-map-marker me-1"></i> Pas d'adresse !
							</div>
							{% endif %}

						</fieldset>

						{# == INFOS PAIEMENT (fieldset + compact) == #}

						<fieldset class="crm-fieldset p-3">
							<legend class="crm-legend">
								<i class="fa fa-wallet text-primary me-2"></i> Infos Paiement
							</legend>

							<div class="ps-2"> {# décale tout le contenu à droite #}

								{# ... ton bloc promoAlert inchangé ... #}

								<input type="hidden" name="form_document[promotion_id]" id="promotion_id" value="">

								{# Remise globale (compact) #}
								<div class="row gx-1 gy-1 align-items-center mb-2">
								<label class="col-4 form-label mb-0 text-start">Remise</label>

								<div class="col-4">
									<input type="number"
										step="any"
										class="form-control form-control-sm discountValue updateRow discountTotalValue"
										name="form_document[discount]"
										value="{{ document.discount ?? 0 }}"
										onchange="calculateTotal()">
								</div>

								<div class="col-4">
									<input type="hidden"
										name="form_document[discountType]"
										id="discountTypeHidden"
										value="{{ document.discountType ?? 'amount' }}">
									<select class="form-select form-select-sm discountUnit updateRow discountTotalUnit"
											name="form_document[discountType]"
											onchange="calculateTotal()">
									<option value="amount" {% if document.discountType == 'amount' or document.discountType is null %}selected{% endif %}>TND</option>
									<option value="percent" {% if document.discountType == 'percent' %}selected{% endif %}>%</option>
									</select>
								</div>
								</div>

								{# Acompte (compact) #}
								<div class="row gx-1 gy-1 align-items-center mb-2">
								<label class="col-4 form-label mb-0 text-start">Acompte</label>

								<div class="col-4">
									<input type="number"
										step="any"
										class="form-control form-control-sm discountValue updateRow"
										name="form_document[advancePayment]"
										value="{{ document.advancePayment ?? 0 }}">
								</div>

								<div class="col-4">
									<select class="form-select form-select-sm discountUnit updateRow"
											name="form_document[advancePaymentType]">
									<option value="percent" {% if document.advancePaymentType == "percent" %}selected{% endif %}>%</option>
									<option value="amount" {% if document.advancePaymentType == "amount" %}selected{% endif %}>TND</option>
									</select>
								</div>
								</div>

								{# Moyen de paiement (compact) #}
								<div class="row gx-1 gy-1 align-items-center">
								<label for="paymentMethod" class="col-4 form-label mb-0 text-start">Moyen</label>

								<div class="col-8">
									<select id="paymentMethod"
											name="form_document[paymentMethod]"
											class="form-select form-select-sm">
									<option value="especes" {% if document.paymentMethod == "especes" or document.paymentMethod is null %}selected{% endif %}>Espèces</option>
									<option value="cheque" {% if document.paymentMethod == "cheque" %}selected{% endif %}>Chèque</option>
									<option value="virement" {% if document.paymentMethod == "virement" %}selected{% endif %}>Virement</option>
									<option value="carte" {% if document.paymentMethod == "carte" %}selected{% endif %}>Carte</option>
									<option value="prelevement" {% if document.paymentMethod == "prelevement" %}selected{% endif %}>Prélèvement</option>
									</select>
								</div>

								<input type="hidden" id="paymentDeadline" name="form_document[paymentDeadline]" value="onorder">
								<input type="hidden" id="paymentRef" name="form_document[paymentRef]" value="">
								</div>

							</div>
						</fieldset>


						<input type="hidden" name="form_document[parcelTrackingNbr]" value="{{ document.parcelTrackingNbr }}">
						<input type="hidden" name="form_document[urlTracking]" value="{{ document.urlTracking }}">

					</div>

					{#--Fin partie droite--#}
				</div>
            </div>

            <div class="clear"></div>


            <div class="fixed bottom-right zi-100 white-bkg py-3 px-5 shadow fixed-block">
				<div class="container-big m-auto d-flex justify-content-end align-items-center">
					<a href="{{ path('document_index', {'type': 'commande', 'category': 'client', 'date': 'today'}) }}"
					class="btn btn-light border  me-2">
						<i class="fa fa-times me-1"></i> Annuler et Fermer
					</a>
					<button type="submit" name="form_document[save]" class="btn btn-dark">
						<i class="fa fa-save me-1"></i> Enregistrer
					</button>
				</div>
			</div>




		</form>
	</div>
</div>
    {{ include('@admin/includes/modals/_modal_edit_user.html.twig') }}
    {{ include('@admin/includes/modals/_modal_catalogue_produit.html.twig') }}

	{{ include('@admin/includes/modals/_modal_pack_document.html.twig') }}

{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
		$(function () {

			const $form = $('form#docForm');
			if (!$form.length) return;

			$form.on('submit', function (e) {
				e.preventDefault();

				$.ajax({
					url: Routing.generate('verify_cond_document', { client: '{{ document.client.id }}' }),
					type: 'POST',
					data: $form.serialize(),
					dataType: 'json',

					// Loader simple BS5 (remplace mApp.block)
					beforeSend: function () {
						document.body.classList.add('crm-loading');
					},

					success: function (response) {
						const alerts = [];

						if (response.statusCheck && response.statusCheck.length > 0) {
							let html = '<ul class="text-start ps-3 mb-0">';
							response.statusCheck.forEach(doc => {
								html += `
									<li>
										- ${doc.createdAt} :
										<strong>${doc.status}</strong>
										<a href="${doc.link}" target="_blank" class="ms-2">Voir</a>
									</li>`;
							});
							html += '</ul>';
							alerts.push(`<p>Commande(s) avec statut "En attente" ou "Accepté" :</p>${html}`);
						}

						if (response.dateCheck && response.dateCheck.length > 0) {
							let html = '<ul class="text-start ps-3 mb-0">';
							response.dateCheck.forEach(doc => {
								html += `
									<li>
										- ${doc.createdAt} :
										<strong>${doc.status}</strong>
										<a href="${doc.link}" target="_blank" class="ms-2">Voir</a>
									</li>`;
							});
							html += '</ul>';
							alerts.push(`<p>Commande(s) passées il y a moins de 3 jours :</p>${html}`);
						}

						// Aucun blocage → submit réel
						if (alerts.length === 0) {
							$form.off('submit').trigger('submit');
							return;
						}

						// Avertissement
						Swal.fire({
							title: 'Avertissement',
							html: alerts.join('<hr>'),
							icon: 'warning',
							showCancelButton: true,
							confirmButtonText: 'Continuer',
							cancelButtonText: 'Annuler'
						}).then(result => {
							if (result.isConfirmed) {
								$form.off('submit').trigger('submit');
							}
						});
					},

					error: function () {
						$('#error-message')
							.text('Une erreur est survenue.')
							.removeClass('d-none')
							.show();
					},

					complete: function () {
						document.body.classList.remove('crm-loading');
						$("[name='form_document[save]']").prop('disabled', false).show();
					}
				});
			});

		});




        function selectSource(sourceName) {
            var select = document.getElementById('source');
            var options = select.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].text.trim() === sourceName) {
                    select.selectedIndex = i;
                    break;
                }
            }
        }

        document.getElementById('form_document_free_delivery')?.addEventListener('change', function () {
            var label = document.getElementById('free-delivery-label');
            if (this.checked) {
                label.style.color = '#ff8000';
            } else {
                label.style.color = '#333';
            }
        });

		document.addEventListener('DOMContentLoaded', function () {
			var promoAlert = document.getElementById('promoAlert');
			if (!promoAlert) return;

			setTimeout(function () {
				promoAlert.classList.remove('promo-blink');
			}, 3000);
		});


document.addEventListener('DOMContentLoaded', function () {

    var applyBtn   = document.getElementById('applyPromoBtn');
    var removeBtn  = document.getElementById('removePromoBtn');

    var discountInput = document.querySelector('.discountTotalValue');
    var discountType  = document.querySelector('.discountTotalUnit');
    var discountTypeHidden = document.getElementById('discountTypeHidden');
    var promoInput    = document.getElementById('promotion_id');

    /* ===============================
       APPLIQUER LA PROMO
       =============================== */
    if (applyBtn) {
        applyBtn.addEventListener('click', function () {

            var promoId = this.dataset.id;
            var value   = this.dataset.value;
            var type    = this.dataset.type; // percent | amount

            if (!discountInput || !discountType || !promoInput || !discountTypeHidden) return;

            // Appliquer valeurs
            discountInput.value = value || 0;
            discountType.value  = type || 'amount';
            discountType.dispatchEvent(new Event('change'));

            discountTypeHidden.value = type || 'amount';

            // Enregistrer la promo
            promoInput.value = promoId;

            // Verrouiller
            discountInput.readOnly = true;
            discountType.disabled  = true;

            // Boutons
            applyBtn.classList.add('d-none');
            removeBtn.classList.remove('d-none');

            calculateTotal();
        });
    }

    /* ===============================
       ENLEVER LA PROMO
       =============================== */
    if (removeBtn) {
        removeBtn.addEventListener('click', function () {

            if (!discountInput || !discountType || !promoInput || !discountTypeHidden) return;

            discountInput.value = 0;
            discountType.value  = 'amount';
            discountType.dispatchEvent(new Event('change'));


            discountTypeHidden.value = 'amount';

            promoInput.value = '';

            discountInput.readOnly = false;
            discountType.disabled  = false;

            removeBtn.classList.add('d-none');
            applyBtn.classList.remove('d-none');

            calculateTotal();
        });
    }
});

    </script>
{% endblock %}