@extends('layouts.app')

@section('title', 'الفواتير')
@section('page_title', 'إدارة الفواتير')

@section('content')
<div class="card mb-3">
  <div class="card-body">
    <form method="GET" class="row g-2 align-items-end">
      <div class="col-6 col-md-3">
        <label class="form-label">من</label>
        <input type="date" name="from" class="form-control" value="{{ request('from') }}">
      </div>
      <div class="col-6 col-md-3">
        <label class="form-label">إلى</label>
        <input type="date" name="to" class="form-control" value="{{ request('to') }}">
      </div>
      <div class="col-6 col-md-3">
        <label class="form-label">الحالة</label>
        <select name="status" class="form-select">
          <option value="">الكل</option>
          @foreach(['draft','issued','partially_paid','paid','void'] as $st)
            <option value="{{ $st }}" {{ request('status')===$st?'selected':'' }}>{{ $st }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-6 col-md-3">
        <label class="form-label">بحث</label>
        <input type="text" name="q" class="form-control" placeholder="رقم الفاتورة/المريض" value="{{ request('q') }}">
      </div>
      <div class="col-12 text-end mt-2">
        <button class="btn btn-outline-primary btn-sm"><i class="fas fa-filter me-1"></i>تصفية</button>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">الفواتير</h5>
    <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createInvoiceModal"><i class="fas fa-plus me-1"></i>إنشاء فاتورة</a>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-striped mb-0">
        <thead>
          <tr>
            <th>#</th>
            <th>الفاتورة</th>
            <th>المريض</th>
            <th>التاريخ</th>
            <th>الإجمالي</th>
            <th>الحالة</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @forelse($invoices as $inv)
            <tr>
              <td>{{ $inv->id }}</td>
              <td>{{ $inv->invoice_number }}</td>
              <td>{{ $inv->patient?->name }}</td>
              <td>{{ $inv->issued_date }}</td>
              <td>{{ number_format($inv->total_amount, 2) }} ج.م</td>
              <td><span class="badge bg-secondary">{{ $inv->status }}</span></td>
              <td>
                <a class="btn btn-sm btn-outline-primary" href="{{ route('receptionist.invoices.show', $inv) }}">عرض</a>
              </td>
            </tr>
          @empty
            <tr><td colspan="7" class="text-center text-muted py-4">لا توجد فواتير</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    {{ $invoices->withQueryString()->links() }}
  </div>
</div>

<!-- Minimal create invoice modal (manual lines) -->
<div class="modal fade" id="createInvoiceModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">إنشاء فاتورة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="createInvoiceForm">
          @csrf
          <div class="row g-3">
            <div class="col-12 position-relative">
              <label class="form-label">المريض</label>
              <input type="text" id="patientSearch" class="form-control" placeholder="ابحث بالاسم أو رقم الجوال" autocomplete="off" required>
              <input type="hidden" name="patient_id" id="patientId">
              <div id="patientSuggestions" class="list-group position-absolute w-100 mt-1" style="z-index:1056;max-height:220px;overflow:auto;display:none;"></div>
              <small class="text-muted">اكتب 2 حروف على الأقل ثم اختر من القائمة</small>
            </div>
            <div class="col-12">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="vatToggle" name="vat_enabled" checked>
                <label class="form-check-label" for="vatToggle">تفعيل ضريبة القيمة المضافة (14%)</label>
              </div>
              <input type="hidden" name="vat_rate" value="14">
            </div>
          </div>
          <hr>
          <div id="invoiceItems">
            <div class="row g-2 align-items-end inv-line">
              <div class="col-md-4"><input class="form-control item-input" list="itemsCatalogDatalist" name="items[0][description]" placeholder="اختر بندًا محفوظًا أو اكتب وصفًا" required></div>
              <div class="col-md-2"><input class="form-control" type="number" step="0.01" min="0.01" name="items[0][quantity]" placeholder="الكمية" required></div>
              <div class="col-md-2"><input class="form-control unit-price-input" type="number" step="0.01" min="0" name="items[0][unit_price]" placeholder="سعر الوحدة" required></div>
              <div class="col-md-2">
                <select class="form-select" name="items[0][line_discount_type]">
                  <option value="none">بدون خصم</option>
                  <option value="percent">%</option>
                  <option value="amount">مبلغ</option>
                </select>
              </div>
              <div class="col-md-2"><input class="form-control" type="number" step="0.01" min="0" name="items[0][line_discount_value]" placeholder="قيمة الخصم"></div>
            </div>
          </div>
          <div class="mt-3 d-flex flex-wrap gap-2 align-items-center">
            <button type="button" id="btnLoadLastAppt" class="btn btn-outline-primary btn-sm">
              <i class="fas fa-calendar-check me-1"></i> تحميل من آخر موعد
            </button>
            <button type="button" id="btnLoadLastReq" class="btn btn-outline-info btn-sm">
              <i class="fas fa-vials me-1"></i> تحميل من آخر طلب تحليل/خدمة
            </button>
            <div class="input-group input-group-sm" style="max-width: 380px;">
              <span class="input-group-text">مرجع</span>
              <input type="text" id="refInput" class="form-control" placeholder="SC- أو SR-">
              <button type="button" id="btnLoadByRef" class="btn btn-outline-secondary">
                تحميل
              </button>
            </div>
          </div>
          <div class="text-end mt-3">
            <button type="button" id="addLine" class="btn btn-sm btn-outline-secondary">إضافة بند</button>
            <button type="submit" class="btn btn-success">حفظ</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<datalist id="itemsCatalogDatalist"></datalist>
@endsection

@push('scripts')
<script>
(function(){
  const suggestUrlBase = "{{ route('receptionist.invoices.suggest-items') }}";
  let idx = 1;
  document.getElementById('addLine').addEventListener('click', function(){
    const c = document.getElementById('invoiceItems');
    const row = document.createElement('div');
    row.className = 'row g-2 align-items-end inv-line mt-2';
    row.innerHTML = `
      <div class="col-md-4"><input class="form-control item-input" list="itemsCatalogDatalist" name="items[${idx}][description]" placeholder="اختر بندًا محفوظًا أو اكتب وصفًا" required></div>
      <div class="col-md-2"><input class="form-control" type="number" step="0.01" min="0.01" name="items[${idx}][quantity]" placeholder="الكمية" required></div>
      <div class="col-md-2"><input class="form-control unit-price-input" type="number" step="0.01" min="0" name="items[${idx}][unit_price]" placeholder="سعر الوحدة" required></div>
      <div class="col-md-2">
        <select class="form-select" name="items[${idx}][line_discount_type]">
          <option value="none">بدون خصم</option>
          <option value="percent">%</option>
          <option value="amount">مبلغ</option>
        </select>
      </div>
      <div class="col-md-2"><input class="form-control" type="number" step="0.01" min="0" name="items[${idx}][line_discount_value]" placeholder="قيمة الخصم"></div>
    `;
    c.appendChild(row);
    bindItemAutoPrice(row.querySelector('.item-input'), row.querySelector('.unit-price-input'));
    idx++;
  });

  // Presaved items catalog (can be moved to backend later)
  const itemsCatalog = [
    { label: 'كشف - زيارة', price: 150 },
    { label: 'متابعة', price: 100 },
    { label: 'تحاليل مخبرية', price: 300 },
    { label: 'أشعة', price: 250 }
  ];
  const dl = document.getElementById('itemsCatalogDatalist');
  dl.innerHTML = itemsCatalog.map(i=>`<option value="${i.label}"></option>`).join('');

  function findCatalogPrice(label){
    const it = itemsCatalog.find(x => x.label === label);
    return it ? it.price : null;
  }

  // ===== Load suggested items helpers =====
  function clearAllLines(){
    const container = document.getElementById('invoiceItems');
    container.innerHTML = '';
    idx = 0;
  }
  function addLineWithValues(desc, qty, price){
    const c = document.getElementById('invoiceItems');
    const row = document.createElement('div');
    row.className = 'row g-2 align-items-end inv-line mt-2';
    row.innerHTML = `
      <div class="col-md-4"><input class="form-control item-input" list="itemsCatalogDatalist" name="items[${idx}][description]" value="${desc}" required></div>
      <div class="col-md-2"><input class="form-control" type="number" step="0.01" min="0.01" name="items[${idx}][quantity]" value="${Number(qty||1).toFixed(2)}" required></div>
      <div class="col-md-2"><input class="form-control unit-price-input" type="number" step="0.01" min="0" name="items[${idx}][unit_price]" value="${Number(price||0).toFixed(2)}" required></div>
      <div class="col-md-2">
        <select class="form-select" name="items[${idx}][line_discount_type]">
          <option value="none">بدون خصم</option>
          <option value="percent">%</option>
          <option value="amount">مبلغ</option>
        </select>
      </div>
      <div class="col-md-2"><input class="form-control" type="number" step="0.01" min="0" name="items[${idx}][line_discount_value]" value="0.00"></div>
    `;
    c.appendChild(row);
    bindItemAutoPrice(row.querySelector('.item-input'), row.querySelector('.unit-price-input'));
    idx++;
  }
  function loadSuggestedItems(params){
    const url = new URL(suggestUrlBase, window.location.origin);
    Object.keys(params||{}).forEach(k=> url.searchParams.append(k, params[k]));
    fetch(url.toString())
      .then(r=>r.json())
      .then(resp=>{
        if (!resp.success || !Array.isArray(resp.items) || resp.items.length===0){
          alert('لا توجد بنود مقترحة');
          return;
        }
        clearAllLines();
        resp.items.forEach(it=> addLineWithValues(it.description||'', it.quantity||1, it.unit_price||0));
      })
      .catch(()=> alert('فشل تحميل البنود المقترحة'));
  }
  // Bind buttons
  const btnAppt = document.getElementById('btnLoadLastAppt');
  const btnReq = document.getElementById('btnLoadLastReq');
  const btnRef = document.getElementById('btnLoadByRef');
  const refInput = document.getElementById('refInput');
  if (btnAppt) btnAppt.addEventListener('click', function(){
    const pid = document.getElementById('patientId').value;
    if (!pid) { alert('اختر المريض أولاً'); return; }
    loadSuggestedItems({ source: 'last_appointment', patient_id: pid });
  });
  if (btnReq) btnReq.addEventListener('click', function(){
    const pid = document.getElementById('patientId').value;
    if (!pid) { alert('اختر المريض أولاً'); return; }
    loadSuggestedItems({ source: 'last_request', patient_id: pid });
  });
  if (btnRef) btnRef.addEventListener('click', function(){
    const ref = (refInput.value||'').trim();
    if (!ref) { alert('أدخل المرجع (SC- أو SR-)'); return; }
    loadSuggestedItems({ source: 'reference', reference: ref });
  });
  function bindItemAutoPrice(inputEl, priceEl){
    if (!inputEl || !priceEl) return;
    inputEl.addEventListener('change', function(){
      const p = findCatalogPrice(this.value.trim());
      if (p != null) priceEl.value = Number(p).toFixed(2);
    });
  }
  // Bind initial row
  bindItemAutoPrice(document.querySelector('.item-input'), document.querySelector('.unit-price-input'));

  // Patient live search (name/mobile)
  const $ps = document.getElementById('patientSearch');
  const $pid = document.getElementById('patientId');
  const $sg = document.getElementById('patientSuggestions');
  let tmr;
  if ($ps) {
    $ps.addEventListener('input', function(){
      clearTimeout(tmr);
      const q = this.value.trim();
      $pid.value = '';
      if (q.length < 2) { $sg.style.display='none'; $sg.innerHTML=''; return; }
      tmr = setTimeout(()=>{
        fetch('/receptionist/search-patients?q='+encodeURIComponent(q))
          .then(r=>r.json())
          .then(list=>{
            if (!Array.isArray(list) || list.length===0){ $sg.style.display='none'; $sg.innerHTML=''; return; }
            $sg.innerHTML = list.slice(0,10).map(p=>
              `<button type="button" class="list-group-item list-group-item-action" data-id="${p.id}" data-name="${p.name||''}" data-mobile="${p.mobile||''}">
                 <div class="d-flex justify-content-between"><span>${p.name||'-'}</span><small class="text-muted">${p.mobile||''}</small></div>
               </button>`
            ).join('');
            $sg.style.display='block';
          }).catch(()=>{ $sg.style.display='none'; });
      }, 250);
    });
    $sg.addEventListener('click', function(e){
      const btn = e.target.closest('button[list-group-item]') || e.target.closest('.list-group-item');
      if (!btn) return;
      $pid.value = btn.getAttribute('data-id');
      $ps.value = `${btn.getAttribute('data-name')} - ${btn.getAttribute('data-mobile')}`;
      $sg.style.display='none';
      $sg.innerHTML='';
    });
  }

  document.getElementById('createInvoiceForm').addEventListener('submit', function(e){
    e.preventDefault();
    const form = e.target;
    const fd = new FormData(form);
    if (!fd.get('patient_id')) { alert('يرجى اختيار المريض من القائمة'); return; }
    if (!fd.has('vat_enabled')) {
      fd.set('vat_enabled', '0');
    } else {
      fd.set('vat_enabled', '1');
    }
    fetch("{{ route('receptionist.invoices.store') }}", { method:'POST', headers:{'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}, body: fd })
    .then(r => r.json())
    .then(resp => {
      if (resp.success) {
        window.location.href = "{{ route('receptionist.invoices') }}";
      } else {
        alert(resp.message || 'خطأ في إنشاء الفاتورة');
      }
    }).catch(()=>alert('خطأ في إنشاء الفاتورة'));
  });
})();
</script>
@endpush