{#--Fenêtre modale détails expédition--#}
    <div class="modal fade" id="m_modal_expider" tabindex="-1" role="dialog" aria-labelledby="modalExpeditionLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-sm rounded-3 overflow-hidden">
                <form name="auto_document"
                    method="post"
                    action="{{ path('auto_document', {'category': document.category,'id': document.client.id ,'idCommande': document.id }) }}"
                    enctype="multipart/form-data"
                    onsubmit="return confirmExpedition();">
                    <div class="modal-header text-white">
                        <h5 class="modal-title fw-bold" id="modalExpeditionLabel">
                            Détails du Colis
                        </h5>
                        <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>

                    <div class="modal-body row px-4 py-3">
                        <div class="mb-3 col-md-6">
                            <label for="auto_document_delivery_id" class="fw-bold">
                                Société de livraison
                            </label>
                            <select id="auto_document_delivery_id"
                                    class="form-control"
                                    name="auto_document[delivery_id]">
                                {% for delivery in deliverys %}
                                    <option value="{{ delivery.id }}"
                                            unitamount="{{ delivery.price }}"
                                            {% if document.delivery and document.delivery.id == delivery.id %}selected{% elseif delivery.id == 1 %}selected{% endif %}>
                                        {{ delivery.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="n_suivi_colis" class="fw-bold">
                                N° suivi colis
                            </label>
                            <input id="n_suivi_colis"
                                type="text"
                                class="form-control"
                                name="auto_document[parcelTrackingNbr]"
                                value="{{ document.parcelTrackingNbr ?? '' }}">
                        </div>
                    </div>

                    <div class="modal-body row px-4 pt-0">
                        <div class="mb-3 col-md-6">
                            <label for="url_suivi" class="fw-bold">
                                URL de suivi
                            </label>
                            <input id="url_suivi"
                                type="text"
                                class="form-control"
                                name="auto_document[urlTracking]"
                                placeholder="https://exemple.com/suivi"
                                value="{{ document.urlTracking ?? '' }}">
                        </div>
                        <div class="mb-3 col-md-6">
                            <label for="nbr_colis" class="fw-bold">
                                Nombre de colis
                            </label>
                            <input id="nbr_colis"
                                type="number"
                                class="form-control form-control-sm"
                                name="auto_document[packagesNbr]"
                                value="1">
                        </div>
                    </div>

                    <div class="modal-footer d-flex justify-content-center gap-3 pb-4">
                        <button type="submit"
                            id="auto_document_pending"
                            name="auto_document[pending]"
                            class="btn btn-info btn-lg px-5 loader-submit-modal d-none">
                            <i class="fa fa-clock me-2"></i> prêt à expédier
                        </button>
                        <button type="submit"
                            id="auto_document_save"
                            name="auto_document[save]"
                            class="btn btn-primary btn-lg px-5 loader-submit-modal">
                            <i class="fa fa-truck me-2"></i> Expédier
                        </button>
                    </div>


                </form>
            </div>
        </div>
    </div>

    {#--Fenêtre modale Date Livraison--#}
    <div class="modal fade" id="m_modal_livraison" tabindex="-1" role="dialog" aria-labelledby="modalLivraisonLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form method="post" action="{{ path('success_expedition_commande', {'id': document.id }) }}">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="modalLivraisonLabel">Confirmer la livraison</h5>
                <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Fermer">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                <label for="delivered_at">Date de livraison :</label>
                <input type="date" name="delivered_at" id="delivered_at" class="form-control"
                        value="{{ "now"|date('Y-m-d') }}" required>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="submit" class="btn btn-success">Valider la livraison</button>
                </div>
            </div>
            </form>
        </div>
    </div>

    {#--Fenêtre modale Date de payement--#}
    <div class="modal fade" id="m_modal_payment" tabindex="-1" role="dialog" aria-labelledby="modalPaymentLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form id="formMarkPaid" method="post" action="{{ path('document_mark_paid', {'id': document.id }) }}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalPaymentLabel"><i class="fa fa-money-bill"></i> Saisir la date de paiement</h5>
                    <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="date_paid" class="mb-2">Date de paiement :</label>
                    <input type="date" class="form-control" id="date_paid" name="date_paid" required value="{{ "now"|date("Y-m-d") }}">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-success">Valider</button>
                </div>
            </div>
            </form>
        </div>
    </div>

    {#--Fenêtre modale Création Avoir--#}
    <div class="modal fade" id="m_modal_avoir" tabindex="-1" role="dialog" aria-labelledby="modalAvoirLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-sm rounded-3 overflow-hidden">
                <form method="post" action="{{ path('create_avoir_document', {'id': document.id }) }}">
                    <div class="modal-header text-dark">
                        <h5 class="modal-title fw-bold" id="modalAvoirLabel">
                            Créer un avoir (remboursement)
                        </h5>
                        <button type="button" class="close text-dark" data-bs-dismiss="modal" aria-label="Fermer">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body bg-light">
                        {# --- Note explicative --- #}
                        <div class="alert alert-info d-flex align-items-start gap-2 mb-3" style="font-size: 0.97rem;">
                            <i class="fa fa-info-circle me-2 mt-1" style="font-size:1.4rem;"></i>
                            <div>
                                <strong>Important&nbsp;:</strong>
                                <ul class="mb-1 ps-3">
                                    <li>La création d’un <strong>avoir</strong> n’affecte <u>pas</u> le stock ni les quantités d’articles.</li>
                                    <li>Pour signaler un remboursement à la comptabilité ou au client, il est nécessaire de&nbsp;:
                                        <ol class="mb-0 ps-3">
                                            <li>
                                                <b>Créer un avoir</b> pour garder une trace officielle du remboursement (facture d’avoir).
                                            </li>
                                            <li>
                                                <b>Rembourser ensuite le bon de commande</b> pour remettre les articles en stock
                                                &nbsp;
                                                {% if document.document %}
                                                    <a href="{{ path('document_show', {'id': document.document.id}) }}" target="_blank" class="badge badge-primary ms-1" style="font-size:0.97em;">
                                                        Voir le bon n°{{ document.document.internalNbr ?? '?' }}
                                                    </a>
                                                {% else %}
                                                    <span class="badge badge-secondary ms-1" style="font-size:0.97em;">Aucun bon lié</span>
                                                {% endif %}

                                            </li>

                                        </ol>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="mb-3 mb-3">
                            <label for="avoir_reason_select" class="form-label fw-bold">
                                Motif de remboursement
                            </label>
                            <select id="avoir_reason_select"
                                    name="avoir_document[reason_id]"
                                    class="form-control"
                                    required>
                                <option value="">-- Sélectionnez un motif --</option>
                                {% for reason in refundReasons %}
                                    <option value="{{ reason.id }}">{{ reason.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3 mb-3">
                            <label for="avoir_note" class="form-label fw-bold">
                                Détails complémentaires (note)
                            </label>
                            <textarea id="avoir_note"
                                    class="form-control"
                                    name="avoir_document[note]"
                                    rows="4"
                                    placeholder="Décrivez la raison du remboursement, s'il y a lieu."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn btn-secondary" data-bs-dismiss="modal">
                            Annuler
                        </button>
                        <button type="submit" class="btn btn-primary loader-submit-modal">
                            <i class="fa fa-recycle me-1"></i> Générer l'avoir
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {#--Fenêtre modale Retour colis--#}
    <div class="modal fade" id="m_modal_retour" tabindex="-1" role="dialog" aria-labelledby="modalRetourLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-sm rounded-3 overflow-hidden">
                <form name="retour_document"
                    method="post"
                    action="{{ path('retour_document', {'id': document.id }) }}"
                    enctype="multipart/form-data">
                    <div class="modal-header text-dark">
                        <h5 class="modal-title fw-bold" id="modalRetourLabel">
                            Créer un Avoir (Retour)
                        </h5>
                        <button type="button" class="close text-dark" data-bs-dismiss="modal" aria-label="Fermer">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body bg-light">
                        <div class="mb-3 mb-3">
                            <label for="retour_note" class="form-label fw-bold">
                                Raison du retour
                            </label>
                            <textarea id="retour_note"
                                    class="form-control"
                                    name="retour_document[note]"
                                    rows="4"
                                    placeholder="Décrivez brièvement la raison du retour...">{{ document.note|e }}</textarea>
                        </div>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn btn-secondary" data-bs-dismiss="modal">
                            Annuler
                        </button>
                        <button type="submit"
                                name="retour_document[save]"
                                class="btn btn-primary loader-submit-modal">
                            <i class="fa fa-undo me-1"></i> Rembourser cette facture
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {#--Fenêtre modale Remboursement commande--#}
    <div class="modal fade" id="modalRefundFull" tabindex="-1" role="dialog" aria-labelledby="modalRefundLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <form method="post" action="{{ path('document_refund', {id: document.id, mode: 'pending'}) }}">
                <div class="modal-content border-0 shadow-sm rounded-3 overflow-hidden">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalRefundLabel">
                            <i class="fa fa-undo text-danger"></i>
                            Préparer un remboursement
                        </h5>
                        <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Fermer">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body bg-light">
                        <div class="alert alert-info mb-3">
                            <i class="fa fa-info-circle"></i>
                            Cette étape marque le bon de commande comme <b>“à rembourser”</b>.
                            <br><strong>Le stock ne sera pas remis ? jour tant que le remboursement n'est pas finalis?.</strong>
                            <br>Pour finaliser, utilisez l’action “Finaliser le remboursement”.
                        </div>
                        <div class="mb-3">
                            <label for="refund_reason_select" class="fw-bold">Motif du remboursement :</label>
                            <select id="refund_reason_select"
                                    name="refund_reason_id"
                                    class="form-control"
                                    required>
                                <option value="">-- Sélectionnez un motif --</option>
                                {% for reason in refundReasons %}
                                    <option value="{{ reason.id }}">{{ reason.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="refund_reason" class="fw-bold">Détails complémentaires (note) :</label>
                            <textarea id="refund_reason"
                                    name="refund_reason_note"
                                    class="form-control"
                                    rows="4"
                                    placeholder="Décrivez le motif...">{{ document.note|e }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger loader-submit-modal">
                            <i class="fa fa-undo me-1"></i> Marquer comme à rembourser
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {#--Fenetre modale Annuler document--#}
    <div class="modal fade" id="m_modal_annuled" tabindex="-1" role="dialog" aria-labelledby="modalAnnuleLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-sm rounded-3 overflow-hidden">
                <form name="annuled_document"
                    method="post"
                    action="{{ path('annulled_commande', {'id': document.id }) }}"
                    enctype="multipart/form-data">
                    <div class="modal-header bg-light border-bottom">
                        <h5 class="modal-title fw-semibold text-dark d-flex align-items-center gap-2" id="modalAnnuleLabel">
                            <i class="fa fa-ban text-secondary"></i>
                            Annulation du document
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>

                    <div class="modal-body px-4 py-3">

                        <div class="mb-3">
                            <label for="select_cancel_reason" class="form-label fw-semibold text-dark mb-2">Motif d’annulation</label>
                            <select id="select_cancel_reason"
                                    name="annuled_document[cancelReason]"
                                    class="form-control"
                                    required>
                                <option value="">-- Sélectionnez un motif --</option>
                                {% for reason in cancelReasons %}
                                    <option value="{{ reason.id }}">{{ reason.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="raison_annulation" class="form-label fw-semibold text-dark mb-2">
                                Détails complémentaires (note)
                            </label>
                            <textarea id="raison_annulation"
                                    class="form-control"
                                    name="annuled_document[note]"
                                    rows="4"
                                    placeholder="Merci d’indiquer la raison de cette annulation..."></textarea>
                        </div>

                        <input type="hidden" name="annuled_document[category]" value="{{ document.category }}">
                    </div>

                    <div class="modal-footer d-flex justify-content-end gap-2 py-3 px-4 bg-white border-top">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Fermer
                        </button>
                        <button type="submit"
                                id="auto_document_save"
                                name="annuled_document[save]"
                                class="btn btn-primary loader-submit-modal">
                            <i class="fa fa-times-circle me-2"></i> Confirmer l’annulation
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {#--fen?tre modale Modifier la raison d'annulation ou de retour #}
    <div class="modal fade" id="m_modal_update_raison" tabindex="-1" role="dialog" aria-labelledby="modalTitleUpdateRaison" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content border shadow-sm">
                <form name="raison_document" method="post" action="{{ path('update_raison', {'id': document.id }) }}">
                    <div class="modal-header">
                        <h5 class="modal-title fw-semibold text-dark" id="modalTitleUpdateRaison">
                            {% if document.status == 'annule' %}
                                Modifier la raison d’annulation
                            {% elseif document.status in ['retourne', 'retour-en-cours'] %}
                                Modifier la raison de retour
                            {% else %}
                                Modifier la raison
                            {% endif %}
                        </h5>
                        <button type="button" class="close text-dark" data-bs-dismiss="modal" aria-label="Fermer">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3 mb-0">
                            <label for="raison-textarea" class="form-label fw-semibold">
                                Raison :
                            </label>
                            <textarea id="raison-textarea" class="form-control m-input m-input--solid" rows="5" name="raison_document[note]" placeholder="Saisissez ici la nouvelle raison...">{{ document.note }}</textarea>

                        </div>
                    </div>

                    <div class="modal-footer d-flex justify-content-center">
                        <button type="submit" id="auto_document_save" name="raison_document[save]" class="btn btn-primary loader-submit-modal px-4">
                            <i class="fa fa-save me-2"></i> Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {#-- Modal : Rappel #}
    <div class="modal fade" id="callScheduleModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fa fa-clock me-2"></i> Programmer un appel
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-2">
                        <label class="form-label">Date & heure</label>
                        <input type="datetime-local" class="form-control" id="scheduledAt">
                    </div>

                    <div class="mb-2">
                        <label class="form-label">Note</label>
                        <textarea class="form-control" id="callNote" rows="2"></textarea>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
                    <button class="btn btn-primary btn-sm" id="saveScheduledCall">
                        Enregistrer
                    </button>
                </div>

            </div>
        </div>
    </div>

        {# -- Panneau : Appel unifié -- #}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="callPanelOffcanvas" aria-labelledby="callPanelOffcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
        <div class="offcanvas-header py-3">
            <div>
                <h5 class="offcanvas-title mb-0" id="callPanelOffcanvasLabel">
                    <i class="fa fa-phone-volume text-primary me-2"></i>Suivi d'appel
                </h5>
                <div class="small text-muted">Le panneau reste accessible pendant vos modifications sur le document.</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
        </div>

        <div class="offcanvas-body pt-0">
            <div class="alert alert-info py-2 px-3 d-flex align-items-center justify-content-between">
                <span class="small text-muted">Durée d'appel</span>
                <span id="callTimer" class="fw-semibold">00:00</span>
            </div>

            <div class="mb-3">
                <label class="form-label mb-2">État de l'appel</label>
                <div class="d-flex gap-2 flex-wrap" id="callStatusSwitch">
                    <button type="button" class="btn btn-sm btn-outline-success call-status-option active" data-status="joignable">
                        <i class="fa fa-phone me-1"></i> Joignable
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger call-status-option" data-status="non_joignable">
                        <i class="fa fa-phone-slash me-1"></i> Non joignable
                    </button>
                </div>
            </div>

            <div class="mb-3 d-none" id="callReasonGroup">
                <label class="form-label mb-1">Motif</label>
                <select class="form-select form-select-sm" id="callReason">
                    <option value="pas_reponse">Pas de réponse</option>
                    <option value="occupe">Occupé</option>
                    <option value="eteint">Téléphone éteint</option>
                    <option value="hors_zone">Hors zone</option>
                    <option value="numero_invalide">Numéro invalide</option>
                    <option value="autre">Autre</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label mb-1">Note</label>
                <textarea class="form-control form-control-sm" id="callNoteUnified" rows="3" placeholder="Résumé de l'appel, réponse du client, actions à faire..."></textarea>
            </div>

            <input type="hidden" id="callCreateUrlUnified" value="{{ path('document_call_create') }}">

            <div class="alert alert-danger py-2 px-2 d-none mb-3" id="callErrorUnified"></div>

            <div class="d-flex justify-content-between align-items-center gap-2 pt-2 border-top">
                <button type="button" class="btn btn-sm btn-light" id="btnCancelCallPanel">Annuler l'appel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSubmitCallUnified">
                    <span class="btn-text">Enregistrer l'appel</span>
                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>