{{-- resources/views/modals/equipes-modal.blade.php --}}
<div class="modal fade" id="equipesModal" tabindex="-1" aria-labelledby="equipesModalLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">

      <div class="modal-header align-items-start" style="position:relative; padding-right:1.5rem; padding-left:1.5rem;">
        <div class="modal-title-wrapper" style="flex:1">
          <h5 class="modal-title mb-1" id="equipesModalLabel">ارقام ومقرات الفرق المختصة بالبحث في جرائم العنف ضد المرأة والطفل</h5>
          <div class="d-flex gap-2 align-items-center">
            {{-- <small class="text-muted">عرض حسب الهيكل — ابحث بالهيكل، الفرقة، المقر أو الهاتف</small> --}}
            {{-- <span id="equipes-count" class="badge bg-light text-muted" aria-hidden="true" style="font-size:12px; border:1px solid rgba(0,0,0,0.04);">جاري التحميل...</span> --}}
          </div>
        </div>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق" style="position:absolute; right:1rem; top:1rem;"></button>
      </div>

      <div class="modal-body">
        <!-- Search / controls (sticky) -->
        <div class="mb-3" style="top:0; background:transparent; z-index:5; padding-top:8px;">
          <div class="d-flex gap-2 align-items-center">
            <div style="position:relative; flex:1; max-width:900px;">
              <input id="equipes-search" type="search" class="form-control search-input" placeholder="ابحث..." aria-label="بحث" autocomplete="off" />
              <span class="search-icon" aria-hidden="true"><i class="bx bx-search"></i></span>
              <button id="equipes-clear" class="btn btn-sm btn-outline-secondary clear-btn" type="button" title="مسح البحث" aria-label="مسح البحث" style="display:none">×</button>
            </div>

            <div class="ms-auto d-flex gap-2">
              {{-- <button id="equipes-refresh" type="button" class="btn btn-sm" title="تحديث" aria-label="تحديث البيانات" style="background:transparent; border:1px solid rgba(11,20,30,0.06);">
                <i class="bx bx-refresh"></i>
              </button> --}}
              <button id="equipes-collapseAll" type="button" class="btn btn-sm btn-outline-secondary" title="طي/توسيع الكل" aria-label="طي/توسيع الكل">
                <i class="bx bx-collapse"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Loading skeleton -->
        <div id="equipes-loading" class="py-3">
          <div class="d-flex flex-column gap-3" id="equipes-skeleton">
            <!-- skeleton items injected by JS -->
          </div>
        </div>

        <div id="equipes-error" class="alert alert-danger d-none" role="alert" aria-live="assertive"></div>

        <div id="equipes-wrap" class="d-none" aria-live="polite">
          <!-- grouped structures injected here -->
        </div>
      </div>

      <div class="modal-footer">
        {{-- <small class="text-muted me-auto">المصدر: قاعدة بيانات داخلية</small> --}}
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
      </div>
    </div>
  </div>

  <style>
    :root {
  --structure-name-color: #0d6efd; /* افتراضي: أزرق (يمكن تغييره) */
  --structure-name-hover: #0b5ed7; /* لون عند hover */
}

    /* base */
    .search-input { direction: rtl; padding-right:2.6rem; padding-left:2.4rem; height:44px; border-radius:10px; }
    .search-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:#f97316; font-size:18px; }
    .clear-btn { position:absolute; left:8px; top:50%; transform:translateY(-50%); padding:0 .6rem; border-radius:7px; }

    /* structure card */
    .structure-card {
  margin-bottom:14px;
  border-radius:12px;
  background:#fff;
  /* keep a thin border around the card */
  border:1px solid rgba(11,20,30,0.04);
  /* allow header shadow to show outside the body */
  overflow: visible; /* IMPORTANT: allow header shadow to show */
  position: relative;
}
  .modal-header {
  padding:14px 16px;
  border-bottom:1px solid rgba(11,20,30,0.04);
  font-weight:700;
  background: linear-gradient(90deg,#fff 0,#fbfbfd 100%);
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  cursor:pointer;

  /* elevated shadow so header stands out */

  border-radius: 12px;        /* keep same rounding so shadow looks natural */
  
  position: relative;

  z-index: 5; /* ensure header sits above decorative pseudo-elements */
   box-shadow: 0 6px 6px rgba(82, 155, 250, 0.08), 0 2px 8px rgba(28, 101, 238, 0.06) !important;

}

/* add spacing between close button and title (RTL) */
.modal-header .modal-title-wrapper {
  padding-right: 3.6rem; /* increase to taste: 3.6rem works well */
}
.structure-header .left {
  order: -1;               /* moves it before the .left block */
  margin-inline-start: 0;  /* reset any previous start margin */
  margin-inline-end: .6rem;/* small gap between controls and title */
  display: flex;
  align-items: center;
  gap: .5rem;
}
.structure-header {
  padding:14px 16px;
  border-bottom:1px solid rgba(11,20,30,0.04);
  font-weight:700;
  background: linear-gradient(90deg,#fff 0,#fbfbfd 100%);
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  cursor:pointer;

  /* elevated shadow so header stands out */
  box-shadow: 0 8px 28px rgba(11,20,30,0.08);
  border-radius: 12px;        /* keep same rounding so shadow looks natural */
  z-index: 3;
  position: relative;
}
/* small responsive tweak so it doesn't push too far on tiny screens */
@media (max-width: 576px) {
  .modal-header .modal-title-wrapper { padding-right: 1.4rem; }
}

    .structure-header .right { display:flex; align-items:center; gap:10px; }
    .structure-title {
  color: var(--structure-name-color);
  font-size: 16px;
  font-weight: 700;
  transition: color .12s ease, transform .08s ease;
  display: inline-block;
  line-height: 1.05;
}
.structure-header .bx-building {
  color: var(--structure-name-color) !important;
}
    .structure-meta { font-size:12px; color:#6b7280; }
.structure-header:hover .structure-title,
.structure-header:focus .structure-title,
.structure-header[aria-expanded="false"] .structure-title {
  color: var(--structure-name-hover);
  transform: translateY(-1px);
}

    /* equipes table */
    .equipes-table { border-collapse:separate; width:100%; }
    .equipes-table thead th { font-weight:600; border-bottom: none; padding:10px 12px; text-align:right; color:#374151; }
    .equipes-table tbody td { padding:10px 12px; border-top:1px solid rgba(15,23,42,0.03); vertical-align:middle; }
    .equipes-table tbody tr:hover { background:linear-gradient(90deg,rgba(13,110,253,0.03), rgba(13,110,253,0.01)); }

    .tel-link { color:#0d6efd; text-decoration:none; display:inline-block; margin-bottom:2px; }
    .copy-btn { margin-inline-start:8px; font-size:13px; padding:3px 8px; border-radius:6px; border:1px solid rgba(13,110,253,0.12); background:rgba(13,110,253,0.06); color:#0d6efd; cursor:pointer; }

    /* collapse */
    .structure-body { padding:10px 12px 14px 12px; }
    .structure-body.collapsed { display:none; }
.tel-cell {
  text-align: right !important;        /* phone numbers right-aligned */
  vertical-align: middle!important;
  white-space: nowrap !important;
}


/* helper wrap for multiple phone lines (keeps them stacked on the right) */
.tel-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end ; /* align to right edge */
  gap: 4px;
}

/* keep individual phone links neat */
.tel-link { color:#0d6efd; text-decoration:none; display:inline-block; }
    /* skeleton */
    .skeleton-card { height:86px; border-radius:10px; background:linear-gradient(90deg,#f3f4f6 0,#ffffff 50%,#f3f4f6 100%); box-shadow:0 6px 18px rgba(11,20,30,0.02); opacity:.9; }

    /* responsive */
    @media (max-width:576px) {
      .search-input { max-width:100%; }
      .structure-header { padding:10px 12px; }
      .structure-title { font-size:15px; }
    }
  </style>

  <script>
  (function(){
    const modal = document.getElementById('equipesModal');
    if (!modal) return;

    const searchInput = modal.querySelector('#equipes-search');
    const clearBtn = modal.querySelector('#equipes-clear');
    const refreshBtn = modal.querySelector('#equipes-refresh');
    const collapseAllBtn = modal.querySelector('#equipes-collapseAll');
    const loadingWrap = modal.querySelector('#equipes-loading');
    const skeletonContainer = modal.querySelector('#equipes-skeleton');
    const errorBox = modal.querySelector('#equipes-error');
    const wrap = modal.querySelector('#equipes-wrap');
    // const countBadge = modal.querySelector('#equipes-count');

    const meta = document.querySelector('meta[name="equipes-endpoint"]');
    const ENDPOINT = meta ? meta.getAttribute('content') : '/summary/equipes';

    let cached = null;
    let inflight = null;
    let collapseState = false; // false = expanded

    // small helpers
    function setCounts(structures){
      const sCount = (structures || []).length;
      const tCount = (structures || []).reduce((acc,s)=> acc + ((s.equipes && s.equipes.length) || 0), 0);
    //   countBadge.textContent = `${sCount} هيكل — ${tCount} فرقة`;
    //   countBadge.setAttribute('aria-hidden','false');
    }

    function skeletonFill(n=4){
      skeletonContainer.innerHTML = '';
      for (let i=0;i<n;i++){
        const div = document.createElement('div');
        div.className = 'skeleton-card';
        skeletonContainer.appendChild(div);
      }
    }

    function ui(state){
      if (state === 'loading'){
        loadingWrap.classList.remove('d-none');
        errorBox.classList.add('d-none');
        wrap.classList.add('d-none');
      } else if (state === 'error'){
        loadingWrap.classList.add('d-none');
        errorBox.classList.remove('d-none');
        wrap.classList.add('d-none');
      } else {
        loadingWrap.classList.add('d-none');
        errorBox.classList.add('d-none');
        wrap.classList.remove('d-none');
      }
    }

    function safe(v){ return (v === null || v === undefined) ? '' : String(v); }

    function phoneLinks(tel){
      if (!tel) return '';
      const parts = String(tel).split(/[,\n\/؛;]/).map(s=>s.trim()).filter(Boolean);
      return parts.map(p => `<div style="display:flex; align-items:right; gap:8px; justify-content:flex-end;">
          <a class="tel-link" href="tel:${p}">${p}</a>
         
        </div>`).join('');
    }

    function escapeHtml(s){
      return String(s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    }

    function render(data){
      if (!Array.isArray(data) || data.length === 0){
        wrap.innerHTML = '<div class="text-center text-muted py-4">لا توجد بيانات</div>';
        return;
      }

      setCounts(data);

      const html = data.map((struct, sidx) => {
        const equipesRows = (struct.equipes || []).map((e, idx) => {
          return `<tr>
            <td style="width:60px">${idx+1}</td>
            <td style="white-space:nowrap;">${escapeHtml(safe(e.nom))}</td>
            <td>${escapeHtml(safe(e.siege))}</td>
            <td style="min-width:160px">${phoneLinks(e.tel)}</td>
          </tr>`;
        }).join('');

        // header shows count and toggle icon
        return `<section class="structure-card" data-structure="${escapeHtml(struct.nom)}" role="region" aria-labelledby="struct-${sidx}-title">
          <header class="structure-header" id="struct-${sidx}-title" tabindex="0" role="button" aria-expanded="true">
            <div class="left">
              <i class="bx bx-building" aria-hidden="true" style="color:#f97316;font-size:18px;"></i>
              <div>
                <div class="structure-title">${escapeHtml(struct.nom)}</div>
               
              </div>
            </div>
            <div class="right d-flex align-items-center gap-2">
              <small class="text-muted" aria-hidden="true">عرض</small>
              <i class="bx bx-chevron-down toggle-icon" aria-hidden="true" style="font-size:20px;"></i>
            </div>
          </header>

          <div class="structure-body">
            <div style="overflow:auto">
              <table class="equipes-table table table-borderless">
                <thead><tr><th style="width:60px">#</th><th>الفرقة المختصة</th><th>مقر الفرقة المختصة</th><th>الرقم الهاتف</th></tr></thead>
                <tbody>${equipesRows || '<tr><td colspan="4" class="text-center text-muted py-2">لا توجد فرق</td></tr>'}</tbody>
              </table>
            </div>
          </div>
        </section>`;
      }).join('');

      wrap.innerHTML = html;

      // attach collapse toggles & copy button handlers
      wrap.querySelectorAll('.structure-header').forEach(h => {
        const body = h.nextElementSibling;
        h.addEventListener('click', function(){
          const expanded = h.getAttribute('aria-expanded') === 'true';
          h.setAttribute('aria-expanded', expanded ? 'false' : 'true');
          if (expanded) {
            body.classList.add('collapsed'); // hide
            h.querySelector('.toggle-icon').classList.remove('bx-chevron-down');
            h.querySelector('.toggle-icon').classList.add('bx-chevron-up');
          } else {
            body.classList.remove('collapsed');
            h.querySelector('.toggle-icon').classList.remove('bx-chevron-up');
            h.querySelector('.toggle-icon').classList.add('bx-chevron-down');
          }
        });
        // keyboard toggling
        h.addEventListener('keydown', function(e){
          if (e.key === 'Enter' || e.key === ' '){
            e.preventDefault();
            h.click();
          }
        });
      });

      // copy buttons
      wrap.querySelectorAll('.copy-btn').forEach(b => {
        b.addEventListener('click', async function(ev){
          ev.stopPropagation();
          const val = decodeURIComponent(b.getAttribute('data-copy')||'');
          try {
            await navigator.clipboard.writeText(val);
            b.innerHTML = '<i class="bx bx-check"></i>';
            setTimeout(()=> b.innerHTML = '<i class="bx bx-copy"></i>', 1200);
          } catch (err) {
            console.error('copy failed', err);
            // fallback: select temporary input
            const tmp = document.createElement('input');
            tmp.value = val;
            document.body.appendChild(tmp);
            tmp.select();
            document.execCommand('copy');
            tmp.remove();
            b.innerHTML = '<i class="bx bx-check"></i>';
            setTimeout(()=> b.innerHTML = '<i class="bx bx-copy"></i>', 1200);
          }
        });
      });
    }

    // Debounce helper for search
    let searchTimer = null;
    function applyFilterImmediate(q){
      if (!cached) return;
      const term = String(q||'').toLowerCase().trim();
      if (!term) {
        render(cached); return;
      }
      const filtered = cached.map(s => {
        const matched = (s.equipes || []).filter(e => {
          const hay = `${s.nom} ${e.nom} ${e.siege} ${e.tel}`.toLowerCase();
          return hay.indexOf(term) !== -1;
        });
        return { id: s.id, nom: s.nom, equipes: matched };
      }).filter(s => (s.equipes && s.equipes.length) || s.nom.toLowerCase().indexOf(term) !== -1);
      render(filtered);
    }
    function applyFilterDebounced(q){
      clearTimeout(searchTimer);
      searchTimer = setTimeout(()=> applyFilterImmediate(q), 180);
    }

    // Load data
    function showSkeleton(){
      wrapper = skeletonContainer;
      skeletonFill(4);
      ui('loading');
    }

    async function loadEquipes(force=false){
      if (!force && cached) { render(cached); ui('ready'); return cached; }
      if (inflight) return inflight;
      showSkeleton();
      inflight = fetch(ENDPOINT, { credentials:'same-origin', headers:{ 'X-Requested-With':'XMLHttpRequest' }})
        .then(async res => {
          if (!res.ok) {
            const ct = res.headers.get('content-type') || '';
            const body = await res.text().catch(()=>'');
            throw new Error(ct.includes('application/json') ? `HTTP ${res.status}` : 'Non-JSON response (possible redirect to login)');
          }
          const json = await res.json();
          if (!json || json.success !== true || !Array.isArray(json.data)) throw new Error('Invalid JSON from endpoint');
          cached = json.data;
          return cached;
        })
        .catch(err => {
          console.error('[equipes] fetch error', err);
          errorBox.textContent = /login|redirect|401|403/i.test(String(err)) ? 'يبدو أنك غير مسجل الدخول — أعد تسجيل الدخول.' : 'حدث خطأ أثناء تحميل البيانات. حاول لاحقًا.';
          ui('error');
          return null;
        })
        .finally(()=>{ inflight = null; });

      const data = await inflight;
      if (data) { render(data); ui('ready'); }
      return data;
    }

    // events
    modal.addEventListener('shown.bs.modal', function(){
      try { searchInput.focus({preventScroll:true}); } catch(e){ searchInput.focus(); }
      loadEquipes(false);
    });

    searchInput.addEventListener('input', function(){ clearBtn.style.display = this.value ? 'inline-block' : 'none'; applyFilterDebounced(this.value); });
    clearBtn.addEventListener('click', function(){ searchInput.value=''; clearBtn.style.display='none'; applyFilterImmediate(''); searchInput.focus(); });

    refreshBtn && refreshBtn.addEventListener('click', function(){ cached = null; loadEquipes(true); });

    // collapse toggle: collapse/expand all
    collapseAllBtn.addEventListener('click', function(){
      collapseState = !collapseState;
      wrap.querySelectorAll('.structure-header').forEach(h => {
        const body = h.nextElementSibling;
        h.setAttribute('aria-expanded', collapseState ? 'false' : 'true');
        if (collapseState) {
          body.classList.add('collapsed');
          h.querySelector('.toggle-icon').classList.remove('bx-chevron-down');
          h.querySelector('.toggle-icon').classList.add('bx-chevron-up');
        } else {
          body.classList.remove('collapsed');
          h.querySelector('.toggle-icon').classList.remove('bx-chevron-up');
          h.querySelector('.toggle-icon').classList.add('bx-chevron-down');
        }
      });
    });



    // initial skeleton fill so user sees immediate feedback
    skeletonFill(4);

    window.__equipes_modal = { load: ()=> loadEquipes(true), cached: ()=> cached, filter: (q)=>{ searchInput.value=q; applyFilterImmediate(q); } };

  })();
  </script>
</div>