{{ form_start(form, {
    action: path('edit_info_livarison', { document: document.id }),
    method: 'POST'
}) }}

<style>
  .crm-delivery-modal .modal-header{
    padding:.7rem .9rem;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
  }
  .crm-delivery-modal .modal-title{
    font-size:1rem;
    color:#111827;
    margin:0;
  }
  .crm-delivery-modal .modal-body{
    background:#f8fafc;
    padding:.85rem;
    max-height:calc(100vh - 190px);
    overflow-y:auto;
  }
  .crm-delivery-modal .crm-card{
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    padding:.85rem;
  }
  .crm-delivery-modal .form-label{
    display:block;
    font-size:.82rem;
    color:#475569;
    margin-bottom:.2rem;
  }
  .crm-delivery-modal .form-control,
  .crm-delivery-modal .form-select{
    min-height:38px;
    font-size:.9rem;
    border-radius:8px;
    border-color:#dbe3ea;
  }
  .crm-delivery-modal .form-control:focus,
  .crm-delivery-modal .form-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .18rem rgba(37,99,235,.14);
  }
  .crm-delivery-modal .crm-grid{
    --bs-gutter-x:.75rem;
    --bs-gutter-y:.65rem;
  }
  .crm-delivery-modal .crm-divider{
    height:1px;
    background:#eef2f7;
    margin:.75rem 0;
  }
  .crm-delivery-modal .crm-help{
    font-size:.78rem;
    color:#64748b;
    margin-top:.25rem;
  }
  .crm-delivery-modal .crm-tracking-feedback{
    font-size:.78rem;
    margin-top:.3rem;
    display:none;
  }
  .crm-delivery-modal .crm-tracking-feedback.is-error{ color:#dc2626; display:block; }
  .crm-delivery-modal .crm-tracking-feedback.is-warning{ color:#b45309; display:block; }
  .crm-delivery-modal .modal-footer{
    border-top:1px solid #e5e7eb;
    background:#fff;
    padding:.65rem .9rem;
    display:flex;
    justify-content:space-between;
    gap:.5rem;
  }
  @media (max-width: 768px){
    .crm-delivery-modal .modal-body{ padding:.7rem; max-height:calc(100vh - 150px); }
    .crm-delivery-modal .modal-footer{ flex-direction:column; }
    .crm-delivery-modal .modal-footer .btn{ width:100%; }
  }
</style>

<div class="crm-delivery-modal">
  <div class="modal-header">
    <h5 class="modal-title">Modifier les informations de livraison</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  </div>

  <div class="modal-body">
    <div class="crm-card">

      <div class="row crm-grid">
        <div class="col-12 col-md-6">
          <label class="form-label">Societe de livraison</label>
          {{ form_widget(form.delivery, { attr: { class: 'form-control', id: 'delivery_info_select' } }) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">N suivi colis</label>
          {{ form_widget(form.parcelTrackingNbr, { attr: { class: 'form-control', id: 'n_suivi_colis', 'data-document-id': document.id, 'data-check-url': path('document_tracking_check') } }) }}
          <div id="tracking_duplicate_feedback" class="crm-tracking-feedback"></div>
          {{ form_errors(form.parcelTrackingNbr) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Date livraison prevue</label>
          {{ form_widget(form.promisedAt, { attr: { class: 'form-control' } }) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">URL de suivi</label>
          {{ form_widget(form.urlTracking, { attr: { class: 'form-control' } }) }}
          <div class="crm-help">Ex: https://... (lien de tracking transporteur)</div>
        </div>
      </div>

      <div class="crm-divider"></div>

      <div class="row crm-grid {{ document.category == 'client' ? 'd-none' : '' }}">
        <div class="col-12 col-md-6">
          <label class="form-label">Date bon livraison F.</label>
          {{ form_widget(form.shippedAt, { attr: { class: 'form-control' } }) }}
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Date bon recu F.</label>
          {{ form_widget(form.bonrecuAt, { attr: { class: 'form-control' } }) }}
        </div>
      </div>

      <div class="row crm-grid">
        <div class="col-12 col-md-6">
          <label class="form-label">Nombre de colis</label>
          {{ form_widget(form.packagesNbr, { attr: { class: 'form-control' } }) }}
        </div>
      </div>

    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
    <button type="submit" class="btn btn-primary px-4">Enregistrer</button>
  </div>
</div>

{{ form_widget(form.save, { attr: { class: 'd-none', tabindex: '-1', 'aria-hidden': 'true' } }) }}
{{ form_end(form) }}

<script>
  setTimeout(function () {
    var select = document.getElementById('delivery_info_select');
    if (select) {
      select.focus();
    }
  }, 150);
</script>