@extends('layouts.app')

@section('page_title', 'إدارة الخدمات الطبية')

@section('content')
<div class="container-fluid">
    <div class="mb-3">
        <div class="row g-2 align-items-center">
            <div class="col-12 col-md">
                <h5 class="mb-2 mb-md-0">الخدمات الطبية</h5>
            </div>
            <div class="col-12 col-sm-4 col-md-3">
                <select id="filterCategory" class="form-select form-select-sm w-100">
                    <option value="">كل الفئات</option>
                    <option value="lab">معمل</option>
                    <option value="xray">أشعة</option>
                    <option value="other">أخرى</option>
                </select>
            </div>
            <div class="col-12 col-sm-6 col-md-5">
                <input id="searchBox" class="form-control form-control-sm w-100" placeholder="بحث بالاسم" />
            </div>
            <div class="col-12 col-sm-2 col-md-auto text-sm-end">
                <button class="btn btn-primary btn-sm w-100 w-sm-auto" onclick="openCreateService()">
                    <i class="fas fa-plus me-1"></i>إضافة خدمة
                </button>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive services-scroll">
                <table class="table table-hover align-middle services-table">
                    <thead class="table-light thead-sticky">
                        <tr>
                            <th>الاسم</th>
                            <th>الفئة</th>
                            <th>التكلفة</th>
                            <th>الحالة</th>
                            <th class="text-center" style="width:120px;">إجراءات</th>
                        </tr>
                    </thead>
                    <tbody id="servicesTableBody">
                        <tr><td colspan="5" class="text-center text-muted">جاري التحميل...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Create/Edit Modal -->
<div class="modal fade" id="serviceModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="serviceModalTitle">إضافة خدمة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="serviceForm" onsubmit="submitService(event)">
        @csrf
        <input type="hidden" id="serviceId" value="">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">الاسم</label>
            <input type="text" id="svc_name" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">الفئة</label>
            <select id="svc_category" class="form-select" required>
              <option value="lab" selected>معمل</option>
              <option value="xray">أشعة</option>
              <option value="other">أخرى</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">التكلفة  (ج.م)</label>
            <input type="number" id="svc_cost" class="form-control" min="0" step="0.01" required>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="svc_active" checked>
            <label class="form-check-label" for="svc_active">نشط</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
          <button type="submit" class="btn btn-primary">حفظ</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
let services = [];

function loadServices() {
  const params = new URLSearchParams();
  const cat = document.getElementById('filterCategory').value;
  const search = document.getElementById('searchBox').value.trim();
  if (cat) params.set('category', cat);
  if (search) params.set('search', search);
  fetch(`/admin/services/list?${params.toString()}`)
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        services = data.data || [];
        renderServices();
      }
    });
}

function renderServices() {
  const tbody = document.getElementById('servicesTableBody');
  if (!services.length) {
    tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>';
    return;
  }
  tbody.innerHTML = services.map(s => `
    <tr>
      <td>${escapeHtml(s.name)}</td>
      <td>${catText(s.category)}</td>
      <td>${Number(s.default_cost||0).toFixed(2)} ج.م</td>
      <td>${s.is_active ? '<span class="badge bg-success">نشط</span>' : '<span class="badge bg-secondary">متوقف</span>'}</td>
      <td class="text-center">
        <div class="btn-group btn-group-sm">
          <button class="btn btn-outline-primary" onclick="openEditService(${s.id})"><i class="fas fa-edit"></i></button>
          <button class="btn btn-outline-danger" onclick="deleteService(${s.id})"><i class="fas fa-trash"></i></button>
        </div>
      </td>
    </tr>
  `).join('');
}

function catText(c) {
  const m = {analysis:'تحاليل', xray:'أشعة', lab:'معمل', other:'أخرى'}; return m[c]||c;
}

function escapeHtml(str) {
  return (str||'').replace(/[&<>"']/g, s => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[s]));
}

function openCreateService() {
  document.getElementById('serviceModalTitle').textContent = 'إضافة خدمة';
  document.getElementById('serviceId').value = '';
  document.getElementById('svc_name').value = '';
  document.getElementById('svc_category').value = 'analysis';
  document.getElementById('svc_cost').value = '0.00';
  document.getElementById('svc_active').checked = true;
  bootstrap.Modal.getOrCreateInstance(document.getElementById('serviceModal')).show();
}

function openEditService(id) {
  const s = services.find(x => x.id === id);
  if (!s) return;
  document.getElementById('serviceModalTitle').textContent = 'تعديل خدمة';
  document.getElementById('serviceId').value = s.id;
  document.getElementById('svc_name').value = s.name;
  document.getElementById('svc_category').value = s.category;
  document.getElementById('svc_cost').value = Number(s.default_cost||0).toFixed(2);
  document.getElementById('svc_active').checked = !!s.is_active;
  bootstrap.Modal.getOrCreateInstance(document.getElementById('serviceModal')).show();
}

function submitService(e) {
  e.preventDefault();
  const id = document.getElementById('serviceId').value;
  const payload = {
    name: document.getElementById('svc_name').value.trim(),
    category: document.getElementById('svc_category').value,
    default_cost: document.getElementById('svc_cost').value,
    is_active: document.getElementById('svc_active').checked ? 1 : 0,
    _token: document.querySelector('meta[name="csrf-token"]').content
  };
  const url = id ? `/admin/services/${id}` : '/admin/services';
  const method = id ? 'PUT' : 'POST';
  fetch(url, {
    method: method,
    headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json', 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  }).then(r => r.json())
    .then(data => {
      if (data.success) {
        bootstrap.Modal.getInstance(document.getElementById('serviceModal')).hide();
        loadServices();
      } else {
        alert('فشل الحفظ');
      }
    }).catch(() => alert('خطأ في الاتصال'));
}

function deleteService(id) {
  if (!confirm('هل تريد حذف هذه الخدمة؟')) return;
  fetch(`/admin/services/${id}`, {
    method: 'DELETE',
    headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }
  }).then(r => r.json()).then(data => {
    if (data.success) loadServices(); else alert('فشل الحذف');
  }).catch(() => alert('خطأ في الاتصال'));
}

// Listeners
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('filterCategory').addEventListener('change', loadServices);
  document.getElementById('searchBox').addEventListener('input', () => {
    clearTimeout(window.__svc_t);
    window.__svc_t = setTimeout(loadServices, 300);
  });
  loadServices();
});
</script>

<style>
.table td, .table th { vertical-align: middle; }
@media (max-width: 576px) {
  .table td, .table th { white-space: normal; word-break: break-word; }
}
.services-scroll { max-height: 60vh; overflow: auto; }
.thead-sticky { position: sticky; top: 0; z-index: 1; }
/* Fit columns to content: keep meta columns compact, name column flexible */
.services-table th:nth-child(1), .services-table td:nth-child(1),
.services-table th:nth-child(2), .services-table td:nth-child(2),
.services-table th:nth-child(3), .services-table td:nth-child(3),
.services-table th:nth-child(4), .services-table td:nth-child(4),
.services-table th:nth-child(5), .services-table td:nth-child(5) {
  width: 1%;
  white-space: nowrap;
}
/* If you prefer truncation instead of nowrap for the name, comment the rule above and use the following: */
/* .services-table th:nth-child(1), .services-table td:nth-child(1) { max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } */
</style>
@endsection