<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تعريفات المصروفات</title>
  <style>
    body{font-family:Arial;margin:32px;background:#f6f7fb;color:#111827}
    .c{max-width:1100px;margin:0 auto}
    .card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin-bottom:14px}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media (max-width:900px){.grid{grid-template-columns:1fr}}
    input,select{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px}
    .btn{padding:10px 12px;border-radius:12px;border:0;background:#111827;color:#fff;font-weight:900;cursor:pointer}
    table{width:100%;border-collapse:collapse}
    th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:right}
    th{background:#f9fafb;font-weight:900}
    .ok{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;padding:10px;border-radius:12px;font-weight:900}
  </style>
</head>
<body>
<div class="c">

  <div class="card">
    <div style="display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center">
      <div style="font-weight:900;font-size:18px">تعريفات المصروفات</div>
      <a href="{{ route('settings.index') }}" style="text-decoration:none;font-weight:900">رجوع</a>
    </div>
  </div>

  @if(session('ok'))
    <div class="card ok">{{ session('ok') }}</div>
  @endif

  <div class="grid">
    <div class="card">
      <div style="font-weight:900;margin-bottom:10px">إضافة مصروف أساسي</div>
      <form method="POST" action="{{ route('settings.expenses.category.store') }}">
        @csrf
        <input type="text" name="name" placeholder="مثال: فواتير" required>
        <div style="margin-top:10px">
          <button class="btn" type="submit">حفظ</button>
        </div>
      </form>
      <div style="margin-top:14px;color:#6b7280;font-weight:900">مثال: فواتير / صيانة / رواتب</div>
    </div>

    <div class="card">
      <div style="font-weight:900;margin-bottom:10px">إضافة مصروف فرعي</div>
      <form method="POST" action="{{ route('settings.expenses.subcategory.store') }}">
        @csrf
        <select name="expense_category_id" required>
          <option value="">اختر المصروف الأساسي</option>
          @foreach($categories as $c)
            <option value="{{ $c->id }}">{{ $c->name }}</option>
          @endforeach
        </select>
        <div style="margin-top:10px">
          <input type="text" name="name" placeholder="مثال: كهرباء / ماء / صيانة" required>
        </div>
        <div style="margin-top:10px">
          <button class="btn" type="submit">حفظ</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div style="font-weight:900;margin-bottom:10px">قائمة المصروفات الفرعية</div>
    <table>
      <thead>
        <tr>
          <th>الأساسي</th>
          <th>الفرعي</th>
          <th>نشط</th>
        </tr>
      </thead>
      <tbody>
        @foreach($subcategories as $s)
          <tr>
            <td style="font-weight:900">{{ $s->category_name }}</td>
            <td>{{ $s->name }}</td>
            <td style="font-weight:900">{{ (int)$s->is_active === 1 ? 'نعم' : 'لا' }}</td>
          </tr>
        @endforeach
        @if(count($subcategories) === 0)
          <tr><td colspan="3" style="text-align:center;color:#6b7280;font-weight:900">لا يوجد بيانات</td></tr>
        @endif
      </tbody>
    </table>
  </div>

</div>
</body>
</html>

