@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('css/pages/users_index.css') }}">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

<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">
        <h4 class="mb-1 fw-bold banner-title">قائمة المسودات  </h4>
        <p class="mb-3 banner-subtitle">عرض المسودات : الضحية، رقم الهاتف، التاريخ، المكان، والمستمع.</p>
        <div class="d-flex flex-wrap gap-2 justify-content-md-end">
          {{-- <span class="banner-badge" title="إجمالي البلاغات">
            <i class="bx bx-phone align-middle ms-1"></i>
            إجمالي البلاغات: <strong>{{ $signalements->total() ?? 0 }}</strong>
          </span> --}}
        </div>
      </div>
      <div class="banner-graphic d-none d-md-block" aria-hidden="true"></div>
    </div>
  </div>
</div>

{{-- ===== Card des filtres ===== --}}
<div class="card mb-3 shadow-sm border-0">
  <div class="card-header bg-white py-2 d-flex align-items-center justify-content-between" dir="rtl">
    <div class="fw-bold">فلتر البحث</div>
    {{-- <div class="text-muted small">صفّ النتائج حسب معايير مختلفة</div> --}}
  </div>

  <div class="card-body">
    <form id="filtersForm" method="GET" action="{{ route('form.index') }}" class="row g-2" dir="rtl">
      {{-- champ texte recherche (nom / téléphone / identifiant) --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold">بحث (اسم / رقم )</label>
        <input type="text" name="q" value="{{ request('q') }}" class="form-control form-control-sm" placeholder="اسم الضحية أو رقم الهاتف أو ID">
      </div>

      {{-- date from --}}
      <div class="col-6 col-md-2">
        <label class="form-label small fw-semibold">من تاريخ</label>
        <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control form-control-sm">
      </div>

      {{-- date to --}}
      <div class="col-6 col-md-2">
        <label class="form-label small fw-semibold">إلى تاريخ</label>
        <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control form-control-sm">
      </div>

      {{-- gouvernorat --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold">الولاية</label>
        <select name="gouver_id" id="gouverSelect" class="form-select form-select-sm">
          <option value="">— الكل —</option>
          @foreach($gouvernorats as $g)
            <option value="{{ $g->id_gouver }}" {{ (string)request('gouver_id') === (string)$g->id_gouver ? 'selected' : '' }}>
              {{ $g->nom_ar ?? $g->nom }}
            </option>
          @endforeach
        </select>
      </div>

      {{-- delegation (municipalite) --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold"> المعتمدية</label>
        <select name="delegation_id" id="delegationSelect" class="form-select form-select-sm">
          <option value="">— الكل —</option>
          @if(!empty($delegations) && $delegations->count())
            @foreach($delegations as $d)
              <option value="{{ $d->id_delegation }}" {{ (string)request('delegation_id') === (string)$d->id_delegation ? 'selected' : '' }}>
                {{ $d->nom_ar ?? $d->nom }}
              </option>
            @endforeach
          @endif
        </select>
      </div>

      {{-- ecoutante --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold">المستمعة</label>
        <select name="ecoutante_id" class="form-select form-select-sm">
          <option value="">— الكل —</option>
          @foreach($ecoutantes as $u)
            <option value="{{ $u->id }}" {{ (string)request('ecoutante_id') === (string)$u->id ? 'selected' : '' }}>
              {{ $u->name }}
            </option>
          @endforeach
        </select>
      </div>

      {{-- boutons --}}
      <div class="col-12 d-flex gap-2 filters-actions">
        <!-- Bulk export of current filtered resultset (preserve query string) -->


        <button type="submit" class="btn btn-filter btn-sm">
          <i class="bx bx-filter-alt me-1"></i> تطبيق الفلتر
        </button>

        <a href="{{ route('form.index') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bx bx-reset me-1"></i> إعادة تعيين
        </a>
      </div>

    </form>
  </div>
</div>
{{-- ===== fin card filtres ===== --}}

{{-- ===== table card (inchangée sauf petites adaptations) ===== --}}
<div class="card shadow-sm border-0">
  <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
    <div class="d-flex align-items-center gap-3">
      <h4 class="mb-0 fw-bold">البلاغات</h4>
      <small class="text-muted">عرض البلاغات المسجّلة</small>
    </div>

    <div class="d-flex align-items-center gap-2">
      @php
  // pick the query keys you want preserved
  $qs = request()->only(['q','date_from','date_to','gouver_id','delegation_id','ecoutante_id','etat']);
@endphp

<a href="{{ route('form.export', $qs) }}"
     class="btn-download-signalement btn btn-sm d-flex align-items-center"
   title="تحميل Excel">
  <i class="bx bx-download align-middle me-1"></i>  
</a>
      {{-- <a href="{{ route('form.add') ?? route('signalement.create') }}" class="btn btn-success btn-sm d-flex align-items-center">
        <i class="bx bx-plus align-middle me-1"></i> إضافة بلاغ
      </a> --}}
    </div>
  </div>

  <div class="card-body">
    @if(session('success'))
      <div class="m-3">
        <div class="alert alert-success mb-0">{{ session('success') }}</div>
      </div>
    @endif

    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>الضحية</th>
            <th>تاريخ الاتصال</th>
            <th>هاتف الضحية</th>
            <th>الولاية</th>
            <th>المعتمدية</th>
            <th>المستمعة</th>
            <th style="width:150px">إجراءات</th>
          </tr>
        </thead>
        <tbody>
      @forelse($signalements as $s)
<tr>
  <td>{{ optional($s->victime)->nom_prenom ?? '—' }}</td>
  <td>{{ $s->date_appel ? \Carbon\Carbon::parse($s->date_appel)->format('Y-m-d') : '—' }}</td>
  <td>{{ optional($s->victime)->num_tel ?? optional($s->victime)->num_tel_suivi ?? '—' }}</td>
  <td>{{ optional(optional($s->victime)->gouvernorat)->nom_ar ?? optional(optional($s->victime)->gouvernorat)->nom ?? '—' }}</td>
  <td>{{ optional(optional($s->victime)->municipalite)->nom_ar ?? optional(optional($s->victime)->municipalite)->nom ?? '—' }}</td>
  <td>{{ optional($s->ecoutante)->name ?? ($s->id_ecoutante ? 'ID: '.$s->id_ecoutante : '—') }}</td>
  <td class="text-end">
    <div class="actions-cell d-flex gap-1 justify-content-end">
	      <a href="{{ route('signalement.show', $s->id_signalement) }}" class="btn btn-icon btn-icon-success" title="عرض">
                    <i class="bx bx-show-alt"></i>
                  </a>
      <a href="{{ route('signalement.edit', $s->id_signalement) }}" class="btn btn-icon btn-icon-outline" title="تعديل"><i class="bx bx-edit"></i></a>

<form action="{{ route('signalement.destroy', $s->id_signalement) }}"
      method="POST"
      class="delete-signalement-form"
      data-id="{{ $s->id_signalement }}"
      style="display:inline-block">
  @csrf
  @method('DELETE')
  <!-- make button type="button" so native form submit does NOT happen -->
  <button type="button" class="btn btn-icon btn-icon-danger delete-btn" title="حذف">
    <i class="bx bx-trash"></i>
  </button>
</form>


    </div>
  </td>
</tr>
@empty
<tr><td colspan="7" class="text-center py-4"><div class="text-muted">لا يوجد بلاغات حالياً.</div></td></tr>
@endforelse

        </tbody>
      </table>
    </div>

    <div class="card-footer d-flex justify-content-between align-items-center flex-row-reverse">
      <div>
        <small class="text-muted">عرض {{ $signalements->firstItem() ?? 0 }} - {{ $signalements->lastItem() ?? 0 }} من {{ $signalements->total() ?? 0 }}</small>
      </div>

      <div>
        {{ $signalements->withQueryString()->links('pagination::bootstrap-5') }}
      </div>
    </div>
  </div>
</div>
<!-- Delete confirmation modal (paste near end of Blade, once per page) -->
<!-- Delete confirmation modal -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content text-start" dir="rtl">

      <div class="modal-header border-0 justify-content-between align-items-center">
        <!-- Close button on the left -->
        <button type="button" class="btn-close me-2" data-bs-dismiss="modal" aria-label="إغلاق"></button>
        <!-- Title -->
        <h5 class="modal-title ms-auto me-3">تأكيد الحذف</h5>
      </div>

      <div class="modal-body">
        <p class="mb-1">هل أنت متأكد أنك تريد حذف هذا البلاغ؟</p>
        <p class="small text-muted mb-0" id="confirmDeleteDetail">هذا الإجراء نهائي ولا يمكن التراجع عنه.</p>
        <input type="hidden" id="confirmDeleteUrl" value="">
      </div>

      <div class="modal-footer border-0">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">إلغاء</button>
        <button id="confirmDeleteBtn" type="button" class="btn btn-danger btn-sm">
          <span id="confirmDeleteBtnText">حذف</span>
          <span id="confirmDeleteBtnSpinner" class="ms-2" style="display:none;"><i class="bx bx-loader bx-spin"></i></span>
        </button>
      </div>
    </div>
  </div>
</div>




@push('scripts')
<script>
(function(){
  // prevent loading twice
  if (window.__signalementDeleteInit) return;
  window.__signalementDeleteInit = true;

  document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('confirmDeleteModal');
    if (!modalEl) return;
    const bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);

    let activeForm = null;
    let activeRow = null;
    const detailEl = document.getElementById('confirmDeleteDetail');
    const urlInput = document.getElementById('confirmDeleteUrl');
    const confirmBtn = document.getElementById('confirmDeleteBtn');
    const btnSpinner = document.getElementById('confirmDeleteBtnSpinner');
    const messagesContainer = document.getElementById('pageMessages');

    // track requests by stable identifier (prefer data-id)
    const inFlight = new Map();   // id => true while request running
    const processed = new Map();  // id => 'notfound' | 'success' | 'error'

    // debug helper (remove or set false in prod)
    const DEBUG = false;
    function debug(...args){ if (DEBUG) console.debug('[delete-signalement]', ...args); }

    function csrfToken() {
      const meta = document.querySelector('meta[name="csrf-token"]');
      return meta ? meta.getAttribute('content') : '';
    }

    function showMessage(type, text, autoDismiss = true, timeout = 4000) {
      if (!messagesContainer) {
        console.warn('Message:', text);
        return;
      }
      // dedupe exact text
      const existing = Array.from(messagesContainer.querySelectorAll('.alert')).find(a => a.textContent.trim() === text.trim());
      if (existing) return;
      const wrapper = document.createElement('div');
      wrapper.className = `alert alert-${type} alert-dismissible fade show`;
      wrapper.role = 'alert';
      wrapper.innerHTML = `
        <div class="d-flex justify-content-between align-items-start gap-3">
          <div>${text}</div>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="إغلاق"></button>
        </div>
      `;
      messagesContainer.prepend(wrapper);
      if (autoDismiss) {
        setTimeout(()=> {
          try { bootstrap.Alert.getOrCreateInstance(wrapper).close(); }
          catch (e) { wrapper.remove(); }
        }, timeout);
      }
    }

    function getFormId(form) {
      if (!form) return null;
      const fid = form.dataset.id || form.getAttribute('data-id');
      if (fid) return String(fid);
      return form.getAttribute('action') || '';
    }

    // PREVENT native submit as extra safety (capture phase)
    document.addEventListener('submit', function(e){
      if (e.target && e.target.matches('.delete-signalement-form')) {
        e.preventDefault();
        debug('Preventing native submit for delete form');
      }
    }, true);

    // Delegate click -> open modal
    // We add the listener only once (checked by top-level guard)
    document.body.addEventListener('click', function (e) {
      const btn = e.target.closest('.delete-btn');
      if (!btn) return;

      // Stop other click listeners on this target from executing (avoid duplicates)
      try { e.stopImmediatePropagation(); } catch (err) { /* ignore in older browsers */ }

      const form = btn.closest('form.delete-signalement-form');
      if (!form) return;

      // prevent re-opening / double processing
      if (form.dataset.deleting === '1') {
        debug('Form already deleting, ignore click', getFormId(form));
        return;
      }

      e.preventDefault();

      activeForm = form;
      activeRow = form.closest('tr');

      let victimName = 'هذا البلاغ';
      if (activeRow) {
        const firstCell = activeRow.querySelector('td');
        if (firstCell && firstCell.textContent.trim()) victimName = firstCell.textContent.trim();
      }

      detailEl.textContent = `سيتم حذف ${victimName}. هذا الإجراء نهائي ولا يمكن التراجع عنه.`;
      urlInput.value = form.getAttribute('action') || '';

      // visual marker (0 = opened but not confirmed)
      form.dataset.deleting = '0';

      debug('Opening modal for', getFormId(form), urlInput.value);
      bsModal.show();
    }, false);

    // Prevent duplicate confirm listeners: attach only once
    if (!confirmBtn.dataset.listenerAttached) {
      confirmBtn.dataset.listenerAttached = '1';

      confirmBtn.addEventListener('click', function () {
        if (!activeForm) { bsModal.hide(); return; }
        const action = (urlInput.value || activeForm.getAttribute('action') || '').toString();
        const id = getFormId(activeForm) || action;

        if (!action) {
          showMessage('danger', 'URL الحذف غير موجود.', true);
          bsModal.hide();
          return;
        }

        if (processed.has(id)) { debug('Already processed', id); bsModal.hide(); return; }
        if (inFlight.has(id)) { debug('In-flight exists', id); bsModal.hide(); return; }

        // mark form as being processed immediately
        activeForm.dataset.deleting = '1';
        inFlight.set(id, true);

        confirmBtn.disabled = true;
        btnSpinner.style.display = 'inline-block';

        debug('Sending DELETE', id, action);
        fetch(action, {
          method: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': csrfToken(),
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          credentials: 'same-origin',
          body: JSON.stringify({})
        })
        .then(async (resp) => {
          inFlight.delete(id);
          confirmBtn.disabled = false;
          btnSpinner.style.display = 'none';

          debug('Response status', resp.status, id);

          if (resp.status === 404) {
            processed.set(id, 'notfound');
            if (activeRow) activeRow.remove();
            try { bsModal.hide(); } catch (e) {}
            activeForm && (activeForm.dataset.deleting = '0');
            showMessage('info', 'البلاغ غير موجود أو تم حذفه مسبقًا. تم تحديث القائمة.', true, 4500);
            return { __handled: 'notfound' };
          }

          if (!resp.ok) {
            let payload = null;
            try { payload = await resp.json(); } catch(e){ payload = null; }
            const msg = payload && payload.message ? payload.message : 'حدث خطأ أثناء الحذف.';
            const err = new Error(msg);
            err.payload = payload;
            throw err;
          }

          const json = await resp.json().catch(()=>({ success: true }));
          processed.set(id, 'success');
          return json;
        })
        .then((json) => {
          if (json && json.__handled === 'notfound') return;

          if (json && json.success === false) {
            processed.set(id, 'error');
            activeForm && (activeForm.dataset.deleting = '0');
            showMessage('danger', json.message || 'تعذّر الحذف', true, 6000);
            try { bsModal.hide(); } catch (e) {}
            return;
          }

          // If your application exposes fetchResults() let it handle refresh.
          if (typeof fetchResults === 'function') {
            try {
              const r = fetchResults({ preservePage: true });
              if (r === false) {
                if (activeRow) activeRow.remove();
                showMessage('success', (json && json.message) ? json.message : 'تم الحذف بنجاح', true, 3500);
              }
              activeForm && (activeForm.dataset.deleting = '0');
              try { bsModal.hide(); } catch (e) {}
              return;
            } catch (e) {
              console.warn('fetchResults call failed', e);
            }
          }

          if (activeRow) activeRow.remove();
          activeForm && (activeForm.dataset.deleting = '0');
          try { bsModal.hide(); } catch (e) {}
          showMessage('success', (json && json.message) ? json.message : 'تم الحذف بنجاح', true, 3500);
        })
        .catch(err => {
          inFlight.delete(id);
          confirmBtn.disabled = false;
          btnSpinner.style.display = 'none';
          try { bsModal.hide(); } catch (e) {}
          console.error('Delete failed', err);
          const msg = (err && err.payload && err.payload.message) ? err.payload.message : (err && err.message ? err.message : 'حدث خطأ أثناء حذف البلاغ. حاول مجدداً.');
          processed.set(id, 'error');
          activeForm && (activeForm.dataset.deleting = '0');
          showMessage('danger', msg, true, 6000);
        });
      }, false);
    } // end attach guard

    debug('Delete init done');
  }); // DOMContentLoaded
})(); // IIFE
</script>
@endpush





<style>
  

/* ---------- Banner: center title/subtitle + tighter top spacing ---------- */
/* Scope to .page-title-card so other banner variants won't be affected */
.page-title-card .card-body,
.page-title-card-sommaires .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;   /* put items to the right edge */
  text-align: right !important;       /* ensure inline text is right-aligned */
  justify-content: flex-start !important; /* keep vertical stacking at top */
  gap: 0.35rem;
  padding-top: 0.8rem;
  padding-bottom: 0.2rem;
}
/* ensure right-aligned helper classes (text-md-end) do not reassert on this card */
.page-title-card .text-md-end,
.page-title-card-sommaires .text-md-end {
  text-align: right !important;
}

/* tighten title/subtitle spacing */
.page-title-card .banner-title,
.page-title-card-sommaires .banner-title {
  margin-bottom: 0.12rem;  /* less vertical space under the title */
  line-height: 1.08;
}

/* smaller subtitle and less margin */
.page-title-card .banner-subtitle,
.page-title-card-sommaires .banner-subtitle,
.page-title-card small.text-muted,
.page-title-card-sommaires small.text-muted {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  color: rgba(16,32,46,0.6);
}

/* badges centered under title (keeps previous style but centers) */
.page-title-card .banner-stats,
.page-title-card-sommaires .banner-stats {
  display: flex;
  gap: .5rem;
  justify-content: right;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* keep the decorative graphic hidden on narrow screens and positioned on wide screens */
@media (min-width: 768px) {
  /* If you still want the graphic on desktop, show and keep it aligned to the right visually */
  .page-title-card .banner-graphic,
  .page-title-card-sommaires .banner-graphic {
    display: block !important;
    margin-top: 2px;
  }
}

/* reduce the top margin that surrounds the whole card (if present elsewhere) */
.page-title-card,
.page-title-card-sommaires {
  margin-top: 0.4rem;  /* reduce overall top spacing relative to surrounding content */
  margin-bottom: 0.2rem;
}

/* small screens: ensure card body not cramped but centered */
@media (max-width:767.98px) {
  .page-title-card .card-body,
  .page-title-card-sommaires .card-body {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
/* add spacing above the page title (h3) */
.page-title-card-sommaires .card-body h3 {
  margin-top: 0.6rem; /* adjust value (e.g. 0.4rem - 1rem) to taste */
}
.page-title-card-sommaires{
  position: relative;       /* nécessaire pour le pseudo-élément */
  overflow: visible;        /* laisse la ligne dépasser si besoin */
  z-index: 0;
  border-radius: 16px;
  box-shadow: 0 6px 6px rgba(82, 155, 250, 0.08), 0 2px 8px rgba(28, 101, 238, 0.06) !important;

  max-height: 80px !important;
}

</style>

<style>
  /* Add-button centralized styles (use a semantic class) */
.btn-add-signalement {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: .375rem;
  font-weight: 600;
  color: #ff702e; /* text color */
  background: rgba(255,122,0,0.06);          /* subtle orange wash */
  border: 1px solid rgba(255,122,0,0.12);    /* subtle orange border */
  transition: background-color .12s ease, box-shadow .12s ease, transform .08s ease;
  text-decoration: none;
}

/* hover: slightly darker background and soft lift */
.btn-add-signalement:hover,
.btn-add-signalement:focus {
  background: rgba(255,122,0,0.14);          /* darker on hover */
  border-color: rgba(255,122,0,0.18);
  box-shadow: 0 8px 20px rgba(255,122,0,0.06);
  transform: translateY(-2px);
  text-decoration: none;
  color: #ff5a00; /* slightly stronger text on hover */
}

/* active pressed state */
.btn-add-signalement:active {
  transform: translateY(0);
  background: rgba(255,122,0,0.18);
  box-shadow: none;
}

/* accessible focus ring */
.btn-add-signalement:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,122,0,0.12);
}

    /* add to your CSS file */
.btn-filter {
  background: rgba(13,110,253,0.06);              /* soft blue wash */
  border: 1px solid rgba(13,110,253,0.12);        /* subtle blue border */
  color: #0d6efd;                                 /* primary blue text */
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border-radius: .375rem;
  font-weight: 500;
}

/* hover / active */
.btn-filter:hover { 
  background: rgba(13,110,253,0.12);
  color: #0b5ed7;
  text-decoration: none;
}

.btn-filter:active {
  background: rgba(13,110,253,0.16);
}

/* accessible focus ring — small & subtle */
.btn-filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(13,110,253,0.12);
}

</style>
@stack('scripts')
@endsection