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


 {% block stylesheets %}
    {{ parent() }}
    <style>
        .cell-ellipsis{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}

        .crm-delivery-switch{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.18rem .55rem;
            border-radius:999px;
            border:1px solid transparent;
            min-height:34px;
            background:#f8fafc;
        }
        .crm-delivery-switch.is-active{
            background:rgba(22,163,74,.10);
            border-color:rgba(22,163,74,.18);
        }
        .crm-delivery-switch.is-inactive{
            background:rgba(220,38,38,.10);
            border-color:rgba(220,38,38,.18);
        }
        .crm-delivery-switch.is-selected{
            background:rgba(245,158,11,.12);
            border-color:rgba(245,158,11,.22);
        }
        .crm-delivery-switch.is-unselected{
            background:rgba(100,116,139,.10);
            border-color:rgba(100,116,139,.18);
        }
        .crm-delivery-switch .form-check-input{
            width:2.15rem;
            height:1.15rem;
            margin-top:0;
            cursor:pointer;
            box-shadow:none !important;
        }
        .crm-delivery-switch.is-active .form-check-input{
            background-color:#16a34a;
            border-color:#16a34a;
        }
        .crm-delivery-switch.is-inactive .form-check-input{
            background-color:#dc2626;
            border-color:#dc2626;
        }
        .crm-delivery-switch.is-selected .form-check-input{
            background-color:#f59e0b;
            border-color:#f59e0b;
        }
        .crm-delivery-switch.is-unselected .form-check-input{
            background-color:#94a3b8;
            border-color:#94a3b8;
        }
        .crm-delivery-switch-label{
            font-size:.77rem;
            font-weight:700;
            color:#1f2937;
        }

        .delivery-usage-badges{
            display:inline-flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:center;
            gap:.35rem;
        }
        .delivery-usage-badge{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.22rem .55rem;
            border-radius:999px;
            font-size:.76rem;
            font-weight:700;
            line-height:1.1;
            border:1px solid transparent;
            white-space:nowrap;
        }
        .delivery-usage-badge--client{
            background:#eff6ff;
            color:#1d4ed8;
            border-color:#bfdbfe;
        }
        .delivery-usage-badge--supplier{
            background:#ecfdf5;
            color:#047857;
            border-color:#a7f3d0;
        }
        .delivery-usage-badge--both{
            background:#fff7ed;
            color:#c2410c;
            border-color:#fdba74;
        }
        .delivery-usage-badge--unknown{
            background:#f8fafc;
            color:#475569;
            border-color:#cbd5e1;
        }

        @media (max-width: 991.98px) {
            #DeliveryTable { border: 0; background: transparent; }
            #DeliveryTable thead { display: none; }
            #DeliveryTable tbody tr {
                display: block;
                margin: 0 0 .55rem;
                border: 0;
                background: transparent;
                box-shadow: none;
            }
            #DeliveryTable tbody tr.deliv-mobile-ready td {
                display: none !important;
                border: 0 !important;
                padding: 0 !important;
                background: transparent !important;
            }
            #DeliveryTable tbody tr.deliv-mobile-ready td.deliv-mobile-host {
                display: block !important;
            }

            .dlv-card{
              border:1px solid #e5e7eb;
              border-radius:12px;
              background:#fff;
              padding:.65rem .75rem;
              margin-bottom:.55rem;
            }
            .dlv-head{
              display:flex;
              align-items:flex-start;
              justify-content:space-between;
              gap:.6rem;
            }
            .dlv-left{
              display:flex;
              gap:.55rem;
              min-width:0;
              flex:1;
            }
            .dlv-logo{
              width:44px;height:44px;border-radius:10px;border:1px solid rgba(15,23,42,.08);
              object-fit:contain;background:#fff;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
              color:#64748b;overflow:hidden;
            }
            .dlv-logo img{width:100%;height:100%;object-fit:contain;background:#fff;}
            .dlv-name{
              font-size:.95rem;font-weight:700;color:#111827;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;
            }
            .dlv-phone{
              font-size:.8rem;color:#64748b;margin-top:.12rem;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            }
            .dlv-actions{ display:flex; gap:.35rem; }
            .dlv-actions .btn{
              width:34px;height:34px;border-radius:10px;border:1px solid rgba(15,23,42,.10);background:#fff;
              padding:0;display:inline-flex;align-items:center;justify-content:center;
            }
            .dlv-badges{
              margin-top:.45rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
            }
            .badge-pill{
              font-size:.78rem;padding:.18rem .5rem;border-radius:999px;border:1px solid rgba(15,23,42,.10);
              background:#f8fafc;white-space:nowrap;line-height:1.2;color:#1f2937;
            }
            .badge-pill.ok{ background:#ecfdf5;border-color:rgba(16,185,129,.25);color:#065f46; }
            .badge-pill.off{ background:#fef2f2;border-color:rgba(220,38,38,.2);color:#991b1b; }
            .badge-pill.star{ background:#fff7ed;border-color:rgba(245,158,11,.25);color:#7c2d12; }
            .chip{
              font-size:.78rem;padding:.18rem .5rem;border-radius:999px;background:#f1f5f9;color:#334155;white-space:nowrap;
            }
            .dlv-prices{
              margin-top:.45rem;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:.4rem;
            }
            .dlv-prices .p{
              border:1px solid rgba(15,23,42,.08);border-radius:10px;padding:.4rem .5rem;background:#fff;
            }
            .dlv-prices .p span{
              display:block;font-size:.72rem;color:#64748b;line-height:1.1;
            }
            .dlv-prices .p b{
              font-size:.85rem;font-weight:600;color:#111827;white-space:nowrap;
            }
            .dlv-note-toggle{
              margin-top:.35rem;background:transparent;border:0;padding:0;font-size:.8rem;color:#64748b;text-decoration:underline;
              text-underline-offset:2px;
            }
            .dlv-note{
              margin-top:.4rem;padding-top:.45rem;border-top:1px solid #eef2f7;font-size:.82rem;color:#334155;
            }
        }
    </style>

{% endblock %}

{% block extra_scripts %}
    <script src="{{ asset('js/admin/delivery-functions.js') }}"></script>
{% endblock %}

{% block subheader %}

   <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
      <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
        <span class="crm-badge me-2">
          <i class="fa fa-truck"></i>
        </span>
        <div>
          <h3 class="badge-title-main mb-0" style="font-size:1.23rem;">
            LISTE DES SOCIETES DE LIVRAISON
          </h3>
        </div>
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <a href="javascript:void(0);" class="btn btn-success btn-sm modalNewDelivrey" data-bs-toggle="modal" data-bs-target="#m_modal_delivery">
          <i class="fa fa-plus-circle me-1"></i> Ajouter une societe de livraison
        </a>
      </div>
    </div>

{% endblock %}

{% block breadcrumb %}{% endblock %}
{% block stat %}{% endblock %}
{% block bodycontent %}
    <div class="row">

        <div class="col-lg-12">

            <div class="contentMargin">
                <div class="card shadow-sm">

                    <div class="card-body px-2 py-2">


                        {# Tableau dynamique #}

                        <div class="table-responsive">
                            <table id="DeliveryTable" class="table table-striped table-hover w-100">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Logo</th>
                                        <th>Etat</th>
                                        <th>Defaut</th>
                                        <th>Nom</th>
                                        <th>Telephone</th>
                                        <th>Utilise avec</th>
                                        <th>Prix de vente</th>
                                        <th>Prix d'achat</th>
                                        <th>Prix de retour</th>
                                        <th>Prix d'echange</th>
                                        <th>Note</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

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

    {# Modal pour creation/edition #}
    <div class="modal fade" id="m_modal_delivery" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document" style="max-width: 1320px; width: calc(100vw - 1rem);">
            <div class="modal_content" id="modal_content"></div>
        </div>
    </div>


    {# Modal pour voir le profil : list_delivery.html.twig #}
    <div class="modal fade" id="deliveryModalContainer" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal_content" id="modal_content"></div>
        </div>
    </div>





{% endblock %}
{% block js %}
    {{ parent() }}

    <script>
      (function () {
        function htmlOfCell(td) { return td ? String(td.innerHTML || '').trim() : ''; }
        function textOfCell(td) { return td ? String(td.textContent || '').replace(/\s+/g, ' ').trim() : ''; }
        function esc(s) {
          return String(s || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
        }

        function applyDeliveryCards() {
          var table = document.getElementById('DeliveryTable');
          if (!table) return;

          var isMobile = window.matchMedia('(max-width: 991.98px)').matches;
          var rows = table.querySelectorAll('tbody tr');

          rows.forEach(function (tr, index) {
            if (tr.classList.contains('child')) return;
            var tds = Array.from(tr.querySelectorAll('td'));
            if (!tds.length) return;
            if (tr.querySelector('td.dataTables_empty')) return;

            tds.forEach(function (td) {
              if (!td.dataset.origHtml) td.dataset.origHtml = td.innerHTML;
              td.classList.remove('deliv-mobile-host');
              td.style.removeProperty('display');
            });
            tr.classList.remove('deliv-mobile-ready');

            if (!isMobile) {
              tds.forEach(function (td) { td.innerHTML = td.dataset.origHtml || td.innerHTML; });
              return;
            }

            var logoHtml = htmlOfCell(tds[1]) || '<i class="fa fa-truck"></i>';
            var stateHtml = htmlOfCell(tds[2]) || '';
            var stateText = textOfCell(tds[2]) || '';
            var defaultHtml = htmlOfCell(tds[3]) || '';
            var nameText = textOfCell(tds[4]) || 'Transporteur';
            var phoneText = textOfCell(tds[5]) || '-';
            var typeHtml = htmlOfCell(tds[6]) || '<span class="delivery-usage-badge delivery-usage-badge--unknown"><i class="fas fa-question-circle"></i> Inconnu</span>';
            var sellText = textOfCell(tds[7]) || '-';
            var buyText = textOfCell(tds[8]) || '-';
            var retText = textOfCell(tds[9]) || '-';
            var exchText = textOfCell(tds[10]) || '-';
            var noteText = textOfCell(tds[11]) || '';
            var actionsHtml = htmlOfCell(tds[12]) || '';

            var isActive = /success|actif/i.test(stateHtml + ' ' + stateText);
            var stateBadgeClass = isActive ? 'ok' : 'off';
            var stateBadgeText = isActive ? 'Actif' : 'Inactif';
            var hasDefault = /fa-star text-warning|defaut|défaut/i.test(defaultHtml);
            var defaultBadge = hasDefault ? '<span class="badge-pill star">Defaut</span>' : '';
            var noteId = 'delivery_note_' + index + '_' + Math.floor(Math.random() * 1000000);
            var notePart = '';

            if (noteText && noteText !== '-' && noteText !== '—') {
              notePart =
                '<button class="dlv-note-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#' + noteId + '" aria-expanded="false" aria-controls="' + noteId + '">Voir note</button>' +
                '<div id="' + noteId + '" class="collapse"><div class="dlv-note">' + esc(noteText) + '</div></div>';
            }

            var host = tds[0];
            if (!host) return;
            host.classList.add('deliv-mobile-host');
            host.innerHTML =
              '<div class="dlv-card">' +
                '<div class="dlv-head">' +
                  '<div class="dlv-left">' +
                    '<span class="dlv-logo">' + logoHtml + '</span>' +
                    '<div style="min-width:0;flex:1;">' +
                      '<div class="dlv-name">' + esc(nameText) + '</div>' +
                      '<div class="dlv-phone">' + esc(phoneText) + '</div>' +
                    '</div>' +
                  '</div>' +
                  '<div class="dlv-actions">' + actionsHtml + '</div>' +
                '</div>' +
                '<div class="dlv-badges">' +
                  '<span class="badge-pill ' + stateBadgeClass + '">' + stateBadgeText + '</span>' +
                  defaultBadge +
                  typeHtml +
                '</div>' +
                '<div class="dlv-prices">' +
                  '<div class="p"><span>Vente</span><b>' + esc(sellText) + '</b></div>' +
                  '<div class="p"><span>Achat</span><b>' + esc(buyText) + '</b></div>' +
                  '<div class="p"><span>Retour</span><b>' + esc(retText) + '</b></div>' +
                  '<div class="p"><span>Echange</span><b>' + esc(exchText) + '</b></div>' +
                '</div>' +
                notePart +
              '</div>';

            tds.forEach(function (td) {
              if (td === host) return;
              td.style.setProperty('display', 'none', 'important');
            });
            tr.classList.add('deliv-mobile-ready');
          });
        }

        function initDeliveryCardsBindings() {
          applyDeliveryCards();
          var $table = $('#DeliveryTable');
          $(document).off('draw.dt.deliveryCards', '#DeliveryTable').on('draw.dt.deliveryCards', '#DeliveryTable', applyDeliveryCards);
          $table.off('init.dt.deliveryCards xhr.dt.deliveryCards draw.dt.deliveryCardsLocal').on('init.dt.deliveryCards xhr.dt.deliveryCards draw.dt.deliveryCardsLocal', applyDeliveryCards);
          window.addEventListener('resize', applyDeliveryCards);
          setTimeout(applyDeliveryCards, 150);
          setTimeout(applyDeliveryCards, 500);
          setTimeout(applyDeliveryCards, 1100);
          window.forceDeliveryCards = applyDeliveryCards;
        }

        document.addEventListener('DOMContentLoaded', initDeliveryCardsBindings);
      })();
    </script>

{% endblock %}