@php
// expected variables: title, subtitle (optional), total (optional), actions (HTML string optional)
$title = $title ?? 'قائمة';
$subtitle = $subtitle ?? '';
$total = $total ?? null;
$actions = $actions ?? null;
@endphp

{{-- <link rel="stylesheet" href="{{ asset('css/pages/list-header.css') }}"> --}}

<div class="mb-4">
  <div id="pageMessages" class="m-3"></div>
  <div class="card banner-card page-title-card-sommaires shadow-sm border-0 overflow-hidden" dir="rtl">
    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
      <div class="me-0 me-md-4 text-md-end">
        <h3 class="mb-1 fw-bolder banner-title">{{ $title }}</h3>
        @if($subtitle)
          <h4 class="banner-subtitle text-muted mt-1">{{ $subtitle }}</h4>
        @endif
      </div>

      <div class="list-banner-cta d-flex align-items-center">
        <div class="list-pill bg-white rounded-3 shadow-sm p-2 d-flex align-items-center">
          @if($total !== null)
            <small class="text-muted d-none d-md-inline me-2">مجموع</small>
            <span id="list-total" class="badge bg-primary rounded-pill px-3 py-2" aria-live="polite" aria-atomic="true" aria-label="عدد السجلات">{{ $total }}</span>
          @endif
          @if($actions)
            <span class="ms-2">{!! $actions !!}</span>
          @endif
        </div>
      </div>

      <div class="banner-graphic d-none d-md-block" aria-hidden="true"></div>
    </div>
  </div>
</div>

<script>
// small helper: update the numeric badge if a window client provides a getState
(function(){
  const el = document.getElementById('list-total');
  if (!el) return;
  function update(){
    try{
      if (window.__cheffesClient && typeof window.__cheffesClient.getState === 'function'){
        const s = window.__cheffesClient.getState();
        if (s && typeof s.total !== 'undefined'){
          el.textContent = String(s.total);
          el.setAttribute('aria-label','عدد السجلات ' + String(s.total));
        }
      }
    }catch(e){}
  }
  update();
  let attempts = 0;
  const iv = setInterval(()=>{ attempts++; update(); if (attempts>20 || (window.__cheffesClient && typeof window.__cheffesClient.getState === 'function')) clearInterval(iv); }, 300);
})();
</script>