{% set route_name = app.request.attributes.get('_route') %}
{% set hasLogo = delivery is defined and delivery.logo is not empty %}
{% if hasLogo %}
    {% if delivery.logo starts with 'http' %}
        {% set logoUrl = delivery.logo %}
    {% else %}
        {% set logoUrl = asset(delivery.logo) %}
    {% endif %}
{% else %}
    {% set logoUrl = asset('images/placeholders/logo-placeholder.png') %}
{% endif %}

{{ form_start(form, {
    action: (route_name == 'app_delivery_edit') ? path('app_delivery_edit', {'id': delivery.id}) : path('app_delivery_new'),
    method: 'POST',
    attr: {'class': 'm-form m-form--fit crm-delivery-modal'}
}) }}

<style>
    .crm-delivery-modal .modal-header {
        padding: .8rem 1rem;
    }

    .crm-delivery-modal .modal-body {
        max-height: calc(100vh - 135px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: .7rem .85rem;
        background: #f8fafc;
    }

    .crm-delivery-modal .form-label {
        display: block;
        margin-bottom: .2rem;
        font-size: .8rem;
        font-weight: 400;
        color: #495057;
    }

    .crm-delivery-modal .form-control,
    .crm-delivery-modal .form-select {
        min-height: 36px;
        font-size: .88rem;
    }

    .crm-delivery-modal .field-block {
        margin-bottom: .6rem;
    }

    .crm-delivery-modal .crm-section {
        border: 1px solid #dee2e6;
        background: #fff;
        border-radius: 10px;
        padding: .7rem .75rem;
        margin-bottom: .65rem;
    }

    .crm-delivery-modal .crm-section-title {
        margin: 0 0 .55rem 0;
        font-size: .88rem;
        font-weight: 400;
        color: #212529;
        display: flex;
        align-items: center;
        gap: .45rem;
    }

    .crm-delivery-modal .options-row {
        display: flex;
        flex-wrap: wrap;
        gap: .7rem 1rem;
        padding: .5rem .65rem;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        margin-bottom: .65rem;
    }

    .crm-delivery-modal .option-item {
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    .crm-delivery-modal .logo-wrapper {
        position: relative;
        width: 100%;
        height: 135px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        overflow: hidden;
    }

    .crm-delivery-modal .logo-spinner {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.75);
    }

    .crm-delivery-modal .logo-spinner.hidden {
        display: none;
    }

    .crm-delivery-modal .logo-preview {
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .crm-delivery-modal .logo-preview.loaded {
        opacity: 1;
    }

    .crm-delivery-modal .btn-logo-remove {
        position: absolute;
        top: .55rem;
        right: .55rem;
    }

    .crm-delivery-modal .modal-footer {
        padding: .65rem .85rem;
    }

    .crm-delivery-modal .compact-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem .7rem;
    }

    .crm-delivery-modal .compact-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .55rem .7rem;
    }

    @media (max-width: 768px) {
        .crm-delivery-modal .modal-body {
            max-height: calc(100vh - 120px);
            padding: .65rem;
        }

        .crm-delivery-modal .compact-grid-2,
        .crm-delivery-modal .compact-grid-3 {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title mb-0">
            <i class="fa fa-truck me-2"></i>
            {{ route_name == 'app_delivery_edit' ? 'Modifier la societe de livraison' : 'Ajouter une societe de livraison' }}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
    </div>

    <div class="modal-body">
        <div class="options-row">
            <div class="option-item">
                <span class="m-switch m-switch--icon-check m-switch--success">
                    <label class="mb-0">
                        {{ form_widget(form.isSelected) }}
                        <span></span>
                    </label>
                </span>
                <span>Par defaut</span>
            </div>

            <div class="option-item">
                <span class="m-switch m-switch--icon-check m-switch--success">
                    <label class="mb-0">
                        {{ form_widget(form.isActive, { 'attr': (route_name == 'app_delivery_new') ? {'checked':'checked'} : {} }) }}
                        <span></span>
                    </label>
                </span>
                <span>Livreur actif</span>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-lg-8">
                <section class="crm-section">
                    <h6 class="crm-section-title"><i class="fa fa-truck"></i> Details societe de livraison</h6>

                    <div class="compact-grid-2">
                        <div class="field-block">
                            <label class="form-label">Type</label>
                            {{ form_widget(form.type, {'attr': {'class': 'form-control form-control-sm m-input select2'}}) }}
                        </div>

                        <div class="field-block">
                            <label class="form-label">Nom</label>
                            {{ form_widget(form.name, {'attr': {'class':'form-control form-control-sm m-input','placeholder':'Nom de la societe'}}) }}
                        </div>

                        <div class="field-block">
                            <label class="form-label">TVA</label>
                            {{ form_widget(form.tva, {'attr': {'class':'form-control form-control-sm m-input','placeholder':'Matricule fiscal'}}) }}
                        </div>

                        <div class="field-block">
                            <label class="form-label">Telephone</label>
                            {{ form_widget(form.phone, {'attr': {'class':'form-control form-control-sm m-input','placeholder':'Numero de telephone'}}) }}
                        </div>
                    </div>

                    <div class="field-block">
                        <label class="form-label">Adresse</label>
                        {{ form_widget(form.address, {'attr': {'class':'form-control form-control-sm m-input','placeholder':'Adresse','rows': 3}}) }}
                    </div>

                    <div class="field-block mb-0">
                        <label class="form-label">Note</label>
                        {{ form_widget(form.note, {'attr': {'class': 'form-control form-control-sm m-input', 'rows': 2}}) }}
                    </div>
                </section>

                <section class="crm-section">
                    <h6 class="crm-section-title"><i class="fa fa-cubes"></i> Frais de livraison par colis</h6>

                    <div class="compact-grid-2">
                        <div class="field-block">
                            <label class="form-label">
                                Prix de vente
                                <i class="fa fa-info-circle text-muted" data-bs-toggle="tooltip" title="Prix paye par le client"></i>
                            </label>
                            {{ form_widget(form.price, {'attr': {'class': 'form-control form-control-sm m-input'}}) }}
                        </div>

                        <div class="field-block">
                            <label class="form-label">
                                Prix d'achat
                                <i class="fa fa-info-circle text-muted" data-bs-toggle="tooltip" title="Cout paye a la societe de livraison"></i>
                            </label>
                            {{ form_widget(form.totalPrice, {'attr': {'class': 'form-control form-control-sm m-input'}}) }}
                        </div>

                        <div class="field-block mb-0">
                            <label class="form-label">
                                Prix de retour
                                <i class="fa fa-info-circle text-muted" data-bs-toggle="tooltip" title="Prix paye pour les colis retour"></i>
                            </label>
                            {{ form_widget(form.returnPrice, {'attr': {'class': 'form-control form-control-sm m-input'}}) }}
                        </div>

                        <div class="field-block mb-0">
                            <label class="form-label">
                                Prix d'echange
                                <i class="fa fa-info-circle text-muted" data-bs-toggle="tooltip" title="Prix accorde a la societe de livraison pour un colis echange"></i>
                            </label>
                            {{ form_widget(form.exchangePrice, {'attr': {'class': 'form-control form-control-sm m-input'}}) }}
                        </div>
                    </div>
                </section>
            </div>

            <div class="col-lg-4">
                <section class="crm-section">
                    <h6 class="crm-section-title"><i class="fa fa-image"></i> Logo</h6>

                    <div class="logo-card">
                        <div class="logo-wrapper mb-2">
                            <div id="deliveryLogoSpinner" class="logo-spinner">
                                <div class="spinner-border spinner-border-sm text-secondary" role="status" aria-label="Chargement"></div>
                            </div>

                            <img
                                id="deliveryLogoPreview"
                                class="logo-preview{% if hasLogo %} loaded{% endif %}"
                                src="{{ logoUrl }}"
                                alt="Apercu logo">

                            <button type="button"
                                    class="btn btn-sm btn-danger btn-logo-remove {% if not hasLogo %}d-none{% endif %}"
                                    id="btnRemoveDeliveryLogo"
                                    title="Supprimer le logo">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>

                        <div class="small text-muted mb-2">PNG / JPG - max ~2 Mo</div>

                        {{ form_widget(form.logo, {
                            attr: {
                                class: 'form-control-file',
                                accept: 'image/*',
                                id: form.logo.vars.id
                            }
                        }) }}

                        <input type="hidden" name="remove_logo" id="removeDeliveryLogo" value="0">
                    </div>
                </section>

                <section class="crm-section">
                    <h6 class="crm-section-title"><i class="fa fa-file-import"></i> Configuration import paiements</h6>

                    <div class="compact-grid-3">
                        <div class="field-block mb-0">
                            <label class="form-label">
                                N suivi
                                <i class="fa fa-info-circle text-muted" data-bs-toggle="tooltip" title="Numero de colonne du numero de suivi dans le fichier"></i>
                            </label>
                            {{ form_widget(form.paymentTrackingColumn, {'attr': {'class': 'form-control form-control-sm m-input', 'min': 1}}) }}
                        </div>

                        <div class="field-block mb-0">
                            <label class="form-label">
                                Montant import
                                <i class="fa fa-info-circle text-muted" data-bs-toggle="tooltip" title="Numero de colonne du montant importe dans le fichier"></i>
                            </label>
                            {{ form_widget(form.paymentAmountColumn, {'attr': {'class': 'form-control form-control-sm m-input', 'min': 1}}) }}
                        </div>

                        <div class="field-block mb-0">
                            <label class="form-label">
                                Date paiement
                                <i class="fa fa-info-circle text-muted" data-bs-toggle="tooltip" title="Numero de colonne de la date de paiement dans le fichier"></i>
                            </label>
                            {{ form_widget(form.paymentPaidAtColumn, {'attr': {'class': 'form-control form-control-sm m-input', 'min': 1}}) }}
                        </div>
                    </div>

                    <div class="field-block mb-0 mt-2">
                        <div class="form-check form-switch">
                            {{ form_widget(form.paymentHasHeader, {'attr': {'class': 'form-check-input'}}) }}
                            <label class="form-check-label ms-2" for="{{ form.paymentHasHeader.vars.id }}">Le fichier paiement contient un entete</label>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <div class="modal-footer d-flex">
        <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Annuler et fermer</button>
        {{ form_widget(form.submit, {'attr': {'class': 'btn btn-primary'}, 'label': 'Enregistrer'}) }}
    </div>
</div>

{{ form_errors(form) }}
{{ form_rest(form) }}
{{ form_end(form) }}

<script>
(function(){
  var modalContent = document.querySelector('.crm-delivery-modal')?.closest('.modal-content');
  var modalDialog = modalContent ? modalContent.closest('.modal-dialog') : null;
  if (modalDialog) {
    modalDialog.style.maxWidth = '1180px';
    modalDialog.style.width = 'calc(100vw - 2rem)';
  }
})();

(function(){
  var input   = document.getElementById('{{ form.logo.vars.id }}');
  var img     = document.getElementById('deliveryLogoPreview');
  var spinner = document.getElementById('deliveryLogoSpinner');

  function hideSpinner(){ if (spinner) spinner.classList.add('hidden'); }
  function showSpinner(){ if (spinner) spinner.classList.remove('hidden'); }
  function reveal(){
    if (img) img.classList.add('loaded');
    hideSpinner();
  }

  if (img) {
    if (img.complete && img.naturalWidth) {
      reveal();
    } else {
      showSpinner();
      img.addEventListener('load', reveal, { once:true });
      img.addEventListener('error', hideSpinner, { once:true });
    }
  }

  if (input && img) {
    input.addEventListener('change', function(){
      var file = this.files && this.files[0];
      if (!file) return;
      var url = URL.createObjectURL(file);
      showSpinner();
      img.classList.remove('loaded');
      img.src = url;
      img.onload = function(){
        reveal();
        URL.revokeObjectURL(url);
      };
      img.onerror = function(){ hideSpinner(); };
    });
  }
})();

(function(){
  var inputId = '{{ form.logo.vars.id }}';
  var PLACEHOLDER = '{{ asset("images/placeholders/logo-placeholder.png") }}';

  function hideSpinner(spinner){ if (spinner) spinner.classList.add('hidden'); }

  function toggleRemoveBtn(container){
    var img = container.querySelector('#deliveryLogoPreview');
    var btn = container.querySelector('#btnRemoveDeliveryLogo');
    if (!img || !btn) return;

    if (img.src.indexOf('logo-placeholder.png') !== -1) {
      btn.classList.add('d-none');
    } else {
      btn.classList.remove('d-none');
    }
  }

  $(document).off('change.previewDeliveryLogo')
    .on('change.previewDeliveryLogo', '#' + inputId, function(){
      var box = this.closest('.logo-card');
      if (!box) return;

      var img = box.querySelector('#deliveryLogoPreview');
      var spinner = box.querySelector('#deliveryLogoSpinner');
      var remove = box.querySelector('#removeDeliveryLogo');
      var file = this.files && this.files[0];

      if (!file || !img) return;

      var url = URL.createObjectURL(file);
      img.classList.remove('loaded');
      img.src = url;
      if (remove) remove.value = '0';

      img.onload = function(){
        img.classList.add('loaded');
        hideSpinner(spinner);
        URL.revokeObjectURL(url);
        toggleRemoveBtn(box);
      };

      img.onerror = function(){
        hideSpinner(spinner);
      };
    });

  $(document).off('click.removeDeliveryLogo')
    .on('click.removeDeliveryLogo', '#btnRemoveDeliveryLogo', function(){
      var box = this.closest('.logo-card');
      if (!box) return;

      var img = box.querySelector('#deliveryLogoPreview');
      var spinner = box.querySelector('#deliveryLogoSpinner');
      var remove = box.querySelector('#removeDeliveryLogo');
      var input = document.getElementById(inputId);

      if (img) {
        img.classList.remove('loaded');
        img.src = PLACEHOLDER;
      }

      if (input) input.value = '';
      if (remove) remove.value = '1';

      hideSpinner(spinner);
      toggleRemoveBtn(box);
    });
})();
</script>