{{-- resources/views/modals/commissaires-modal.blade.php --}}
<div class="modal fade" id="bureaux_commissairesModal" tabindex="-1" aria-labelledby="commissairesModalLabel" 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" >
        <div class="modal-title-wrapper">
          <h5 class="modal-title mb-1" id="commissairesModalLabel">قائمة المكاتب الجهوية لمندوبي حماية الطفولة</h5>
          {{-- <small class="text-muted d-block">جهات الاتصال — ابحث، انسخ أو اتصل مباشرة</small> --}}
        </div>

        <!-- close button (RTL -> on the right) -->
        <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">
      <div class="mb-3">
          <div class="search-wrapper" style="position:relative; max-width:700px;">
            <input id="commissaires-search" type="search" class="form-control search-input" placeholder="ابحث بالاسم، المؤسسة أو الهاتف..." aria-label="بحث" />
            <span class="search-icon" aria-hidden="true" title="بحث" >
              <!-- svg -->
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
                <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <button id="commissaires-clear" class="btn btn-sm btn-outline-secondary clear-btn" type="button" title="مسح البحث" aria-label="مسح البحث" style="position:absolute; left:8px; top:50%; transform:translateY(-50%); display:none; padding:0 8px; border-radius:6px;">×</button>
          </div>
        </div>

        <div id="commissaires-loading" class="text-center py-4">
          <div class="spinner-border" role="status" aria-hidden="true"></div>
          <div class="mt-2 text-muted">جارٍ التحميل...</div>
        </div>

        <div id="commissaires-error" class="alert alert-danger d-none" role="alert"></div>

        <div id="commissaires-table-wrap" class="table-responsive d-none">
                <table class="table table-hover mb-0">
            <thead class="table-light sticky-top">
              <tr>
                <th style="width:60px">الرقم</th>
                <th>الولاية</th>
                <th>عنوان المكتب </th>
                <th style="width:140px">الهاتف </th>
                <th style="width:120px">الفاكس</th>
                
                <th style="width:240px">البريد الإلكتروني</th>
              </tr>
            </thead>
            <tbody id="commissaires-tbody" class="table-body-rows">
              <!-- rows injected by JS -->
            </tbody>
          </table>
        </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>
    /* === Search input + icon inside === */
    .search-wrapper { display:block; }
    .search-input {
      direction: rtl;
      padding-right: 2.6rem;    /* space for icon */
      padding-left: 0.9rem;
      height: 40px;
    
      border-radius: 10px;
      box-shadow:#fad8bf !important;
      /* border: 0px  #fad8bf !important; */
    }
    .search-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: #f97316;
      opacity: 0.95;
    }
    .clear-btn {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      line-height: 1;
      padding: 0 8px;
      border-radius: 6px;
      
    }

    /* --- NEW: ensure title wrapper has space from the close button --- */
    /* Increase this value to push the title further away from the close button */
#bureaux_commissairesModal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important; /* push items to right edge */
  gap: 0.6rem !important;
  padding: 0.75rem 1rem !important;
  position: relative;
  box-shadow: 0 6px 6px rgba(82,155,250,0.08), 0 2px 8px rgba(28,101,238,0.06) !important;
  z-index: 5;
}
.modal-title{
    color: #f97316;
    font-family: "Noto Naskh Arabic";
    font-size: 23px;
}
    /* slightly adjust close button so it aligns visually (optional) */
#bureaux_commissairesModal .btn-close {
  position: static !important;    /* <-- important: remove absolute positioning */
  margin: 0 !important;
  padding: 0.35rem;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  flex: 0 0 auto;
  order: 2;                       /* keep button at the visual right */
}

#bureaux_commissairesModal .modal-title-wrapper {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;                   /* allow truncation when needed */
  padding-right: 0.8rem;          /* distance between title and button; change to taste */
}
#bureaux_commissairesModal .modal-title {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: right;
  font-size: 23px;
  color: #f97316;
  font-family: "Noto Naskh Arabic";
}
    /* phone / email simple inline links (no borders) */
    .tel-link, .email-link {
      display:inline-block;
      padding:0;
      margin-left:0.5rem;
      color: #070707;
      text-decoration: none;
      font-size: 0.95rem;
    }
    .tel-link:hover, .email-link:hover {
      text-decoration: underline;
      color: #000000;
    }

    .sticky-top { z-index: 5; top: 0; background: #fff; }

    /* small devices */
    @media (max-width: 576px) {
      .modal-dialog { max-width: 95%; margin: 1.25rem; }
      .modal-title { font-size: 1rem; }
      .search-input { height: 36px; }
      .modern-table tbody td { padding: 8px 10px; font-size: 13px; }
      /* reduce right padding on very small screens so title doesn't wrap too much */
      #bureaux_commissairesModal .modal-header .modal-title-wrapper { padding-right: 1.2rem; }
    }
    .btn-secondary {
          display: inline-block;
  align-self: center;
  font-size: 18px;
  padding: 8px 20px;
  font-weight: 700;
  font-family: "Noto Naskh Arabic";
  background: rgba(255,122,0,0.06);           /* same soft orange tint */
  color: #f97316;            /* same orange text */
  border: 1px solid rgba(255,122,0,0.12);
  /* border-radius: 60px; */
  box-shadow: 0 8px 20px rgba(6,10,30,0.04);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .06s ease;
  text-decoration: none;
}
.btn-secondary:hover {
  color: #fff!important;
  background-color: #f97316 !important;
  border-color: #f97316!important;
  transform: translateY(-1px)!important;
}
/* ===== soft-blue box-shadow for modal header (cheffes modal) ===== */
#bureaux_commissairesModal .modal-header {
  /* keep original layout but apply a soft blue shadow under the header */
  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;

}

/* Slight stronger effect when modal is visible/active (subtle) */


/* Optional: a thin blue bottom glow to match the decorative underline */
#bureaux_commissairesModal .modal-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  pointer-events: none;
  z-index: 0;
}

  </style>


<script>
(function(){
  // guard: initialize only once
  if (window.__commissaires_modal_initialized) return;
  window.__commissaires_modal_initialized = true;

  const modal = document.getElementById('bureaux_commissairesModal');
  if (!modal) return;

  const searchInput = modal.querySelector('#commissaires-search');
  const clearBtn = modal.querySelector('#commissaires-clear');
  const tbody = modal.querySelector('#commissaires-tbody');
  const loading = modal.querySelector('#commissaires-loading');
  const errorBox = modal.querySelector('#commissaires-error');
  const tableWrap = modal.querySelector('#commissaires-table-wrap');

  function ui(state){
    loading.classList.toggle('d-none', state !== 'loading');
    errorBox.classList.toggle('d-none', state !== 'error');
    tableWrap.classList.toggle('d-none', state !== 'ready');
  }

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

  function renderRows(items){
    if (!Array.isArray(items) || items.length === 0){
      tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">لا توجد بيانات</td></tr>';
      return;
    }

    function get(v, ...alts){
      for (const a of [v, ...alts]) {
        if (a !== undefined && a !== null && String(a).trim() !== '') return a;
      }
      return '';
    }

    tbody.innerHTML = items.map((it, i) => {
      const gouvernorat = get(it.gouvernorat, it.structure_mffpa, it.structure, it.adresse_bureau);
      const name = get(it.prenom_nom, it.nom, it.adresse_bureau, it.structure_mffpa);
      const telephoneRaw = get(it.telephone, it.telephone_fixe, it.telephone_mobile, it.phone);
      const tel_portable_raw = get(it.tel_portable, it.mobile, it.portable);
      const fax = get(it.fax);
      const email = get(it.mail, it.courriel, it.email);

      const telArr = String(telephoneRaw||'').split(/[,\n\/;]/).filter(Boolean).map(s=>s.trim());
      const telHtml = telArr.map(t=>`<a class="tel-link" href="tel:${t}">${t}</a>`).join(' ');

      const mobArr = String(tel_portable_raw||'').split(/[,\n\/;]/).filter(Boolean).map(s=>s.trim());
      const mobHtml = mobArr.map(t=>`<a class="tel-link" href="tel:${t}">${t}</a>`).join(' ');

      return `<tr>
        <td>${i+1}</td>
        <td>${safe(gouvernorat)}</td>
        <td>${safe(name)}</td>
        <td style="min-width:140px">${telHtml || '<span class="text-muted">—</span>'}</td>
        <td style="min-width:120px">${safe(fax)}</td>
        <td style="min-width:220px">${email ? `<a class="email-link" href="mailto:${email}">${email}</a>` : ''}</td>
      </tr>`;
    }).join('');
  }

  const meta = document.querySelector('meta[name="commissaires-endpoint"]');
  const ENDPOINT = meta ? meta.getAttribute('content') : "{{ route('summary.bureaux_commissaires') }}";
  let cached = null;
  let inflight = null;

  async function loadCommissaires(force=false){
    if (!force && cached) { renderRows(cached); ui('ready'); return cached; }
    if (inflight) return inflight;
    ui('loading');
    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('[commissaires] 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) { renderRows(data); ui('ready'); }
    return data;
  }

  function normalize(text){ return (text||'').toString().trim().toLowerCase(); }
  function applyFilter(){
    const q = normalize(searchInput.value);
    clearBtn.style.display = q ? 'inline-block' : 'none';
    if (!q) {
      tbody.querySelectorAll('tr').forEach(r=> r.style.display = '');
      return;
    }
    tbody.querySelectorAll('tr').forEach(tr=>{
      const txt = normalize(tr.textContent);
      tr.style.display = txt.indexOf(q) !== -1 ? '' : 'none';
    });
  }

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

  searchInput.addEventListener('input', applyFilter);
  clearBtn.addEventListener('click', function(){ searchInput.value=''; applyFilter(); searchInput.focus(); });

  // SAFE hidden handler: do not unconditionally remove bootstrap backdrops.
  modal.addEventListener('hidden.bs.modal', function(){
    searchInput.value = '';
    if (cached) renderRows(cached);


  });

  window.__commissaires_modal = { load: ()=> loadCommissaires(true), cached: ()=> cached };
})();
</script>


</div>