{{-- resources/views/partials/sidebar.blade.php --}}
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme menu-rtl" aria-label="Sidebar navigation" dir="rtl">
  {{-- Brand area: text (left) + logo (right) --}}
  <div class="app-brand demo" role="banner" aria-label="Brand area" style="position:relative;">
    <a href="{{ route('dashboard.index') }}" class="brand-text-link" aria-label="Observatoire">
      <div class="brand-text">
        <div class="brand-title">الجمهورية التونسية</div>
        <div class="brand-small">وزارة الأسرة والمرأة والطفولة وكبار السنّ</div>
    
      </div>
    </a>

    <a href="{{ route('dashboard.index') }}" class="app-brand-link" aria-label="Logo">
      <span class="app-brand-logo demo" role="img" aria-hidden="true">
        <img src="{{ asset('images/logoobservatoire.png') }}" onerror="this.onerror=null;this.src='{{ asset('images/LogoObservatoire.png') }}';" alt="Logo Observatoire" class="app-brand-img" />
      </span>
    </a>

    <!-- Sidebar collapse toggle (desktop collapse only; mobile uses header hamburger) -->
    <button class="layout-menu-toggle btn btn-sm btn-outline-secondary d-none d-xl-inline-flex" aria-expanded="false" aria-label="Toggle sidebar" type="button">
      <i class="bx bx-chevron-left" aria-hidden="true"></i>
    </button>

    <!-- Mobile close button: placed inside sidebar header, reuses existing toggle handler -->
    <button class="layout-menu-toggle btn btn-sm btn-outline-light d-xl-none mobile-sidebar-close" aria-expanded="true" aria-label="Close sidebar" type="button" style="position:absolute; top:8px; left:8px; z-index:1102;">
      <i class="bx bx-chevron-right" aria-hidden="true"></i>
    </button>
  </div>

  {{-- menu --}}
  <nav class="menu-inner" aria-label="Main menu">
    <ul class="menu-list" role="menu">
      {{-- Dashboard --}}
      @permissionid(10)
      <li class="menu-item {{ request()->is('dashboard*') ? 'active' : '' }}" role="none">
        <a href="{{ route('dashboard.index') }}" class="menu-link" role="menuitem" title="لوحة القيادة" aria-current="{{ request()->is('dashboard*') ? 'page' : 'false' }}">
          <span class="menu-icon"><i class="tf-icons bx bx-home-circle" aria-hidden="true"></i></span>
          <span class="menu-label">لوحة القيادة</span>
        </a>
      </li>
      @endpermissionid

      {{-- separator --}}


      {{-- --- Title: إدارة حقوق الوصول (non clickable) --- --}}
      @permissionid([8,9])
      <li class="menu-title-row" role="presentation">
      
        <span class="menu-title">ادارة حقوق الوصول</span>
      </li>

      {{-- Roles --}}
      @permissionid(8)
      <li class="menu-item {{ request()->is('roles*') ? 'active' : '' }}" role="none">
        <a href="{{ url('roles') }}" class="menu-link" role="menuitem" title="ادارة الادوار">
          <span class="menu-icon"><i class="tf-icons bx bx-briefcase" aria-hidden="true"></i></span>
          <span class="menu-label">ادارة الادوار</span>
        </a>
      </li>
      @endpermissionid

      {{-- Users --}}
      @permissionid(9)
      <li class="menu-item {{ request()->is('Users*') ? 'active' : '' }}" role="none">
        <a href="{{ url('Users') }}" class="menu-link" role="menuitem" title="ادارة المستخدمين">
          <span class="menu-icon"><i class="tf-icons bx bx-user-circle" aria-hidden="true"></i></span>
          <span class="menu-label">ادارة المستخدمين</span>
        </a>
      </li>
      @endpermissionid
      @endpermissionid

      {{-- separator --}}
      @permissionid([8,9])
      <li class="menu-title-row" role="presentation">
      
        <span class="menu-title">ادارة الفهرس </span>
      </li>

{{-- قائمة رؤساء خدمات المرأة والأسرة في المناطق --}}
<li class="menu-item" role="none">
  <a href="{{ route('sommaires.cheffes.index') }}" class="menu-link" role="menuitem">
    <span class="menu-icon"><i class="tf-icons bx bx-female" aria-hidden="true"></i></span>
    <span class="menu-label">قائمة رؤساء خدمات المرأة والأسرة في المناطق</span>
  </a>
</li>


{{-- قائمة المفوضين الإقليميين لشؤون المرأة --}}
<li class="menu-item" role="none">
  <a href="{{ route('sommaires.commissaires.index') }}" class="menu-link" role="menuitem">
    <span class="menu-icon"><i class="tf-icons bx bx-id-card" aria-hidden="true"></i></span>
    <span class="menu-label">قائمة المفوضين الإقليميين لشؤون المرأة</span>
  </a>
</li>

   
 {{-- المكاتب الجهوية لمندوبي حماية الطفولة --}}
<li class="menu-item" role="none">
  <a href="{{ route('bureauxcommissaires.index') }}" class="menu-link" role="menuitem" id="">
    <span class="menu-icon"><i class="tf-icons bx bx-building-house" aria-hidden="true"></i></span>
    <span class="menu-label">المكاتب الجهوية لمندوبي حماية الطفولة</span>
  </a>
</li>


{{-- ارقام ومقرات الفرق المختصة بالبحث في جرائم العنف ضد المرأة والطفل --}}
<li class="menu-item" role="none">
  <a href="{{ route('equipes.index') }}" class="menu-link" role="menuitem" >
    <span class="menu-icon"><i class="tf-icons bx bx-shield-quarter" aria-hidden="true"></i></span>
    <span class="menu-label">ارقام ومقرات الفرق المختصة بالبحث في جرائم العنف ضد المرأة والطفل</span>
  </a>
</li>
     @endpermissionid
      {{-- --- Title: الاستمارات (non clickable) --- --}}
      @permissionid([5,6])
      <li class="menu-title-row" role="presentation">
       
        <span class="menu-title">الاستمارات</span>
      </li>

      {{-- 1899 --}}
      @permissionid(5)
      <li class="menu-item {{ request()->is('list*') ? 'active' : '' }}" role="none">
        <a href="{{ url('list') }}" class="menu-link" role="menuitem" title="1899 اشعارالرقم الاخضر">
          <span class="menu-icon"><i class="tf-icons bx bx-phone" aria-hidden="true"></i></span>
          <span class="menu-label">1899 اشعارالرقم الاخضر</span>
        </a>
      </li>
      @endpermissionid

      {{-- Brouillons --}}
      @permissionid(6)
      <li class="menu-item {{ request()->is('brouillons*') ? 'active' : '' }}" role="none">
        <a href="{{ url('brouillons') }}" class="menu-link" role="menuitem" title="قائمة المسودات">
          <span class="menu-icon"><i class="tf-icons bx bx-file" aria-hidden="true"></i></span>
          <span class="menu-label">قائمة المسودات</span>
        </a>
      </li>
      @endpermissionid
      @endpermissionid

      {{-- separator --}}


      {{-- --- Title: الفهرس (non clickable) --- --}}
      <li class="menu-title-row" role="presentation">
    
        <span class="menu-title">الفهرس</span>
      </li>

      {{-- Unités --}}
      @auth
{{-- قائمة رؤساء خدمات المرأة والأسرة في المناطق --}}
<li class="menu-item" role="none">
  <a href="#" class="menu-link" role="menuitem"
     data-bs-toggle="modal" data-bs-target="#cheffesModal"
     id="open-cheffes-modal">
    <span class="menu-icon"><i class="tf-icons bx bx-female" aria-hidden="true"></i></span>
    <span class="menu-label">قائمة رؤساء خدمات المرأة والأسرة في المناطق</span>
  </a>
</li>

{{-- قائمة المفوضين الإقليميين لشؤون المرأة --}}
<li class="menu-item" role="none">
  <a href="#" class="menu-link" role="menuitem"
     data-bs-toggle="modal" data-bs-target="#commissairesModal"
     id="open-commissaires-modal">
    <span class="menu-icon"><i class="tf-icons bx bx-id-card" aria-hidden="true"></i></span>
    <span class="menu-label">قائمة المفوضين الإقليميين لشؤون المرأة</span>
  </a>
</li>

{{-- المكاتب الجهوية لمندوبي حماية الطفولة --}}
<li class="menu-item" role="none">
  <a href="#" class="menu-link" role="menuitem"
     data-bs-toggle="modal" data-bs-target="#bureaux_commissairesModal"
     id="open-bureaux_commissaires-modal">
    <span class="menu-icon"><i class="tf-icons bx bx-building-house" aria-hidden="true"></i></span>
    <span class="menu-label">المكاتب الجهوية لمندوبي حماية الطفولة</span>
  </a>
</li>

{{-- ارقام ومقرات الفرق المختصة بالبحث في جرائم العنف ضد المرأة والطفل --}}
<li class="menu-item" role="none">
  <a href="#" class="menu-link" role="menuitem"
     data-bs-toggle="modal" data-bs-target="#equipesModal"
     id="open-equipes-modal">
    <span class="menu-icon"><i class="tf-icons bx bx-shield-quarter" aria-hidden="true"></i></span>
    <span class="menu-label">ارقام ومقرات الفرق المختصة بالبحث في جرائم العنف ضد المرأة والطفل</span>
  </a>
</li>


@endauth
 
   

    </ul>
  </nav>
</aside>

{{-- Sidebar toggle behavior is handled centrally in header.blade.php --}}
<!-- =========================
  Sidebar: hovered item shows full label on second line (no sidebar width change)
  Paste CSS into your <style> or a CSS file. Remove previous "#layout-menu:hover { width: ... }" rules if present.
========================= -->
<style>
/* base truncation for labels: single-line with ellipsis */
.layout-menu .menu-link .menu-label {
  display: inline-block;
  max-width: calc(100% - var(--icon-width) - 18px); /* 18px = internal gap/padding allowance */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  transition: all .14s ease;
}
/* keep li compact by default */
.layout-menu .menu-item {
  transition: padding .16s ease, background .12s ease;
  padding: 0.18rem 0; /* vertical spacing for single-line */
}

/* On hover/focus: reveal up to two lines only for the hovered item.
   This does not change sidebar width; it increases this li's height to fit two lines. */
.layout-menu .menu-item:hover,
.layout-menu .menu-link:focus,
.layout-menu .menu-link:focus-within {
  /* increase vertical spacing for hovered item so two lines fit comfortably */
  padding: 0.35rem 0;
}

/* convert label to two-line clamped block on hover/focus of the parent li */
.layout-menu .menu-item:hover .menu-link .menu-label,
.layout-menu .menu-link:focus .menu-label,
.layout-menu .menu-link:focus-within .menu-label {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* clamp to 2 lines */
  overflow: hidden;
  max-width: calc(100% - var(--icon-width) - 12px); /* slightly more room when wrapped */
  line-height: 1.16;
}

/* Align text top on hover so multiline looks natural (icon stays vertically centered) */
.layout-menu .menu-item:hover .menu-link {
  align-items: flex-start;
  gap: .5rem;
}

/* Make sure icon stays centered vertically even when label wraps */
.layout-menu .menu-item .menu-icon {
  align-self: flex-start; /* visually sits next to the top of the two-line label */
  margin-top: .22rem;
}

/* For keyboard accessibility: show same two-line behavior on focus-within */
.layout-menu .menu-link:focus,
.layout-menu .menu-link:focus-within {
  outline: none;
  background: rgba(11,13,16,0.03);
  box-shadow: none;
}

/* Small screens: keep single-line as before (no auto-wrap on mobile) */
@media (max-width: 767.98px) {
  .layout-menu .menu-link .menu-label {
    white-space: nowrap;
    max-width: 10rem;
  }
}

.menu-inner {
  overflow-y: auto;
  overflow-x: hidden;                 /* avoid horizontal scrollbar */
  -webkit-overflow-scrolling: touch;  /* smooth scrolling on iOS */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* IE 10+ */
  padding-inline-end: 6px;            /* reserve tiny breathing room (logical property) */
}
.menu-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.menu-list {
  box-sizing: border-box;
  width: 100%;
  padding-inline-start: 0;
  padding-inline-end: 0;
}
.layout-menu .menu-link {
  min-height: 44px;       /* baseline height for single-line items */
  box-sizing: border-box;
}
.layout-menu .menu-item:hover .menu-link,
.layout-menu .menu-link:focus,
.layout-menu .menu-link:focus-within {
  align-items: flex-start;
  gap: .5rem;
}

</style>
<!-- Apply login-like translucent blue background to sidebar -->
<style>
  #layout-menu, .layout-menu.menu-vertical {
    background: rgba(15, 25, 95, 0.55) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border-right: 1px solid rgba(100,181,246,0.18) !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.35), 0 0 40px rgba(26,35,126,0.25) !important;
    color: #ffffff !important;
  }
  /* Menu links and labels use white/soft-white for readability */
  #layout-menu .menu-link, #layout-menu .menu-label, #layout-menu .menu-title { color: rgba(255,255,255,0.94) !important; }
  /* Brand area tweaks to match login visual */
  #layout-menu .app-brand-link .app-brand-img {
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 3px;
    height: 58px !important;
    width: auto !important;
    max-height: 58px !important;
    max-width: 102px !important;
    object-fit: contain;
  }
  /* Ensure hovered items still show accent clearly */
  #layout-menu .menu-link:hover, #layout-menu .menu-item.active .menu-link { background: linear-gradient(90deg, rgba(100,181,246,0.06), rgba(255,112,67,0.03)) !important; }

  /* Brand layout: logo right (larger), text left */
  #layout-menu .app-brand.demo {
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding-inline: .35rem !important;
  }

  #layout-menu .app-brand.demo .app-brand-link {
    order: 1;
    flex: 0 0 auto;
  }

  #layout-menu .app-brand.demo .brand-text-link {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #layout-menu .app-brand.demo .layout-menu-toggle {
    order: 3;
    flex: 0 0 auto;
    margin-inline-start: .25rem;
  }

  #layout-menu .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.28;
    gap: 2px;
    margin: 0;
  }

  #layout-menu .brand-text .brand-title {
    font-size: .86rem;
    font-weight: 800;
    white-space: nowrap;
  }

  #layout-menu .brand-text .brand-small {
    font-size: .72rem;
    font-weight: 700;
    max-width: 170px;
    white-space: normal;
  }

  /* Ensure the brand title and small text are white for contrast */
  #layout-menu .brand-text .brand-title,
  #layout-menu .brand-text .brand-small {
    color: #ffffff !important;
  }
</style>

<!-- =========================
  Tiny JS: ensure each menu-link has title and aria-label with full text
  Paste near the end of your Blade file (after menu HTML).
========================= -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Ensure full-text tooltip (title) and aria-label are present for accessibility.
  document.querySelectorAll('#layout-menu .menu-link').forEach(function(link){
    try {
      const labelEl = link.querySelector('.menu-label');
      if (!labelEl) return;
      const full = labelEl.getAttribute('data-full') || labelEl.textContent.trim();

      // If we detect that the label is already visually truncated (via CSS),
      // store the original full text in data-full so future operations can restore.
      if (!labelEl.getAttribute('data-full')) {
        labelEl.setAttribute('data-full', full);
      }

      // Set title and aria-label on the link, but do not mutate visible text.
      if (!link.getAttribute('title')) link.setAttribute('title', full);
      if (!link.getAttribute('aria-label')) link.setAttribute('aria-label', full);
    } catch (e) { /* ignore */ }
  });

  // Optional enhancement: when hovering a truncated label, ensure its scroll area is visible.
  // (no-op if not needed; safe to keep)
  document.querySelectorAll('#layout-menu .menu-item').forEach(function(item){
    item.addEventListener('mouseenter', function(){
      // if item is partially out of scroll viewport, gently scroll it into view
      const menuInner = document.querySelector('#layout-menu .menu-inner');
      if (!menuInner) return;
      const itemRect = item.getBoundingClientRect();
      const containerRect = menuInner.getBoundingClientRect();
      // item top above container -> scroll up; bottom below -> scroll down
      if (itemRect.top < containerRect.top) {
        menuInner.scrollBy({ top: itemRect.top - containerRect.top - 8, behavior: 'smooth' });
      } else if (itemRect.bottom > containerRect.bottom) {
        menuInner.scrollBy({ top: itemRect.bottom - containerRect.bottom + 8, behavior: 'smooth' });
      }
    });
  });
});
</script>


@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  try {
    const meta = document.querySelector('meta[name="cheffes-endpoint"]');
    if (!meta) { console.error('cheffes endpoint meta missing'); return; }
    const ENDPOINT = meta.getAttribute('content');

    const modal = document.getElementById('cheffesModal');
    if (!modal) { console.error('[cheffes] modal not found'); return; }

    // find nodes **inside** the modal (scoped)
    const tbody = modal.querySelector('#cheffes-tbody');
    const loading = modal.querySelector('#cheffes-loading');
    let errorBox = modal.querySelector('#cheffes-error');
    const tableWrap = modal.querySelector('#cheffes-table-wrap');

    // if the error box is unexpectedly missing, create one (prevents null errors)
    if (!errorBox) {
      console.warn('[cheffes] errorBox not found — creating fallback inside modal');
      errorBox = document.createElement('div');
      errorBox.id = 'cheffes-error';
      errorBox.className = 'alert alert-danger d-none';
      errorBox.setAttribute('role','alert');
      // insert at top of modal body
      const body = modal.querySelector('.modal-body') || modal;
      body.insertBefore(errorBox, body.firstChild);
    }

    if (!tbody || !loading || !tableWrap) {
      console.error('[cheffes] required DOM nodes missing', { tbody, loading, tableWrap });
      return;
    }

    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="5" class="text-center text-muted">لا توجد بيانات</td></tr>';
        return;
      }
      tbody.innerHTML = items.map(item=>{
        const tel = safe(item.telephone).split(/[,\n\/;]/).filter(Boolean).map(t=>t.trim());
        const emailSafe = safe(item.email);
        return `<tr>
          <td>${safe(item.numero)}</td>
          <td>${safe(item.prenom_nom)}</td>
          <td>${safe(item.structure)}</td>
          <td style="min-width:150px">${tel.map(t=>`<a href="tel:${t}" class="d-block">${t}</a>`).join('')}</td>
          <td style="min-width:220px">${emailSafe?`<a href="mailto:${emailSafe}">${emailSafe}</a>`:''}</td>
        </tr>`;
      }).join('');
    }

    let cached = null;
    let inflight = null;

    async function loadCheffes(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 contentType = res.headers.get('content-type') || '';
            const body = await res.text().catch(()=>'');
            throw new Error(contentType.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('[cheffes] fetch error', err);
          const msg = /login|redirect|401|403/i.test(String(err)) ? 'يبدو أنك غير مسجل الدخول — أعد تسجيل الدخول.' : 'خطأ في تحميل البيانات. حاول لاحقًا.';
          errorBox.textContent = msg;
          ui('error');
          return null;
        })
        .finally(()=>{ inflight = null; });

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

    // attach to modal show event (Bootstrap triggers it on the element)
    modal.addEventListener('shown.bs.modal', function () {
      loadCheffes(false);
    });

    // prefetch on link click to improve perceived speed
    const openBtn = document.getElementById('open-cheffes-modal');
    if (openBtn) openBtn.addEventListener('click', ()=> loadCheffes(false));

    // debug helpers
    window.__cheffes_debug = {
      load: (f=false)=>loadCheffes(!!f).then(d=>console.log('loaded', d && d.length)),
      clear: ()=>{ cached = null; console.log('cache cleared'); }
    };

    console.log('[cheffes] init OK, endpoint=', ENDPOINT);
  } catch (e) {
    console.error('[cheffes] unexpected error', e);
  }
});
</script>

@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Robust cleanup when any modal is hidden
  document.addEventListener('hidden.bs.modal', function (ev) {
    try {
      // remove any leftover backdrops
      document.querySelectorAll('.modal-backdrop').forEach(function(b){ b.remove(); });

      // remove class and inline overflow hidden on body (scroll lock)
      document.body.classList.remove('modal-open');
      if (document.body.style.overflow === 'hidden') document.body.style.overflow = '';
      if (document.documentElement.style.overflow === 'hidden') document.documentElement.style.overflow = '';

      // remove any modal-specific padding leftover (optional)
      ['paddingRight','paddingLeft'].forEach(function(prop){
        if (document.body.style[prop] && /px$/.test(document.body.style[prop])) {
          document.body.style[prop] = '';
        }
      });

      // restore focus to something sensible (avoid focus trap)
      try {
        // focus the first focusable in page or body
        const focusable = document.querySelector('a, button, input, [tabindex]:not([tabindex="-1"])');
        if (focusable) focusable.focus({preventScroll:true});
      } catch(e){ /* ignore */ }

      console.debug('[modal-cleanup] cleaned stray backdrop and restored body scroll.');
    } catch (err) {
      console.error('[modal-cleanup] error during cleanup', err);
    }
  });

  // Defensive: if a backdrop exists while no modal has .show, clean it periodically (handles edge cases)
  setInterval(function(){
    try {
      const backdrops = document.querySelectorAll('.modal-backdrop');
      const anyModalOpen = !!document.querySelector('.modal.show');
      if (backdrops.length && !anyModalOpen) {
        backdrops.forEach(b=>b.remove());
        document.body.classList.remove('modal-open');
        document.body.style.overflow = '';
        console.debug('[modal-cleanup] periodic cleanup removed leftover backdrops.');
      }
    } catch(e){ /* ignore */ }
  }, 1500);
});
</script>
@endpush