<!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>
    :root{
      --bg:#f6f7fb; --card:#ffffff; --text:#111827; --muted:#6b7280;
      --border:#e5e7eb; --shadow:0 10px 25px rgba(0,0,0,.06);
      --btn:#111827; --btnText:#ffffff; --btn2Bg:#ffffff; --btn2Text:#111827; --btn2Border:#d1d5db;
      --okBg:#ecfdf3; --okBorder:#bbf7d0; --okText:#166534;
      --errBg:#fef2f2; --errBorder:#fecaca; --errText:#991b1b;
      --onBg:#ecfdf3; --onBorder:#bbf7d0; --onText:#166534;
      --offBg:#fef2f2; --offBorder:#fecaca; --offText:#991b1b;
    }
    *{box-sizing:border-box}
    body{font-family:Arial, sans-serif;margin:32px;background:var(--bg);color:var(--text)}
    .container{max-width:1200px;margin:0 auto}
    .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
    .title{font-weight:900;font-size:18px}
    .subtitle{color:var(--muted);font-size:13px;margin-top:4px}
    .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .btn{padding:10px 
12px;border-radius:12px;background:var(--btn);color:var(--btnText);border:0;cursor:pointer;font-weight:900;font-size:13px;line-height:1}
    .btn:hover{opacity:.95}
    .btn2{padding:10px 12px;border-radius:12px;background:var(--btn2Bg);color:var(--btn2Text);border:1px solid 
var(--btn2Border);cursor:pointer;text-decoration:none;font-weight:900;font-size:13px;line-height:1;display:inline-flex;align-items:center;gap:8px}
    .card{background:var(--card);border:1px solid 
var(--border);border-radius:14px;box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
    .alert{padding:12px;border-radius:12px;border:1px solid;font-weight:900;margin-bottom:14px}
    .alert.ok{background:var(--okBg);border-color:var(--okBorder);color:var(--okText)}
    .alert.err{background:var(--errBg);border-color:var(--errBorder);color:var(--errText)}
    .grid{display:grid;grid-template-columns: 1fr 0.5fr 1fr auto;gap:12px;align-items:end}
    @media (max-width: 980px){ body{margin:18px} .grid{grid-template-columns: 1fr 1fr} }
    @media (max-width: 560px){ .grid{grid-template-columns: 1fr} }
    label{display:block;font-size:12px;color:var(--muted);font-weight:900;margin-bottom:6px}
    input{width:100%;padding:11px 12px;border:1px solid 
var(--border);border-radius:12px;outline:none;font-size:14px;background:#fff}
    input:focus{border-color:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.25)}
    .tableWrap{overflow:auto;border-radius:12px;border:1px solid var(--border)}
    table{width:100%;border-collapse:collapse;min-width:980px;background:#fff}
    th,td{padding:12px;border-bottom:1px solid var(--border);text-align:right;vertical-align:middle}
    th{background:#f9fafb;font-weight:900;font-size:14px;white-space:nowrap}
    td{font-size:13px}
    .num{font-weight:900}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px 
solid;white-space:nowrap}
    .pill.on{background:var(--onBg);border-color:var(--onBorder);color:var(--onText)}
    .pill.off{background:var(--offBg);border-color:var(--offBorder);color:var(--offText)}
    .small{color:var(--muted);font-size:12px;margin-top:8px}
  </style>
</head>
<body>
<div class="container">

  <div class="bar">
    <div>
      <div class="title">إعدادات الأصناف</div>
      <div class="subtitle">Super User + Admin فقط — أصناف + سعر افتراضي شامل الضريبة</div>
    </div>
    <div class="actions">
      <a class="btn2" href="{{ route('dashboard.sales') }}">مبيعات الفروع</a>
      <a class="btn2" href="{{ route('suppliers.index') }}">الموردين</a>
      <form method="POST" action="/logout" style="display:inline">
        @csrf
        <button class="btn" type="submit">خروج</button>
      </form>
    </div>
  </div>

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

  @if($errors->any())
    <div class="alert err">{{ $errors->first() }}</div>
  @endif

  <div class="card">
    <form method="GET" action="{{ route('items.index') }}">
      <div class="grid" style="grid-template-columns: 1fr auto;">
        <div>
          <label>بحث بالاسم</label>
          <input type="text" name="q" value="{{ $q }}" placeholder="مثال: منظف">
        </div>
        <div style="display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap">
          <button class="btn" type="submit">بحث</button>
          <a class="btn2" href="{{ route('items.index') }}">مسح</a>
        </div>
      </div>
    </form>
  </div>

  <div class="card">
    <div style="font-weight:900;margin-bottom:10px">إضافة صنف</div>

    <form method="POST" action="{{ route('items.store') }}">
      @csrf
      <div class="grid">
        <div>
          <label>اسم الصنف *</label>
          <input type="text" name="name" value="{{ old('name') }}" required>
        </div>
        <div>
          <label>السعر الافتراضي (شامل) *</label>
          <input type="number" step="0.01" name="default_price_gross" value="{{ old('default_price_gross', '0') }}" required>
        </div>
        <div>
          <label>ملاحظات</label>
          <input type="text" name="notes" value="{{ old('notes') }}">
        </div>
        <div style="display:flex;justify-content:flex-end">
          <button class="btn" type="submit">إضافة</button>
        </div>
      </div>
      <div class="small">الصنف الجديد يُضاف نشط تلقائيًا.</div>
    </form>
  </div>

  <div class="card">
    <div style="font-weight:900;margin-bottom:10px">الأصناف</div>

    <div class="tableWrap">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>اسم الصنف</th>
            <th>السعر الافتراضي (شامل)</th>
            <th>الحالة</th>
            <th>تغيير الحالة</th>
            <th>تاريخ الإضافة</th>
          </tr>
        </thead>
        <tbody>
          @foreach($items as $it)
            <tr>
              <td class="num">{{ $it->id }}</td>
              <td style="font-weight:900">{{ $it->name }}</td>
              <td class="num">{{ number_format((float)$it->default_price_gross, 2) }}</td>
              <td>
                @if((int)$it->is_active === 1)
                  <span class="pill on">نشط</span>
                @else
                  <span class="pill off">موقوف</span>
                @endif
              </td>
              <td>
                <form method="POST" action="{{ route('items.toggle', ['id' => $it->id]) }}" style="display:inline">
                  @csrf
                  @if((int)$it->is_active === 1)
                    <button class="btn" type="submit" style="background:#dc2626">إيقاف</button>
                  @else
                    <button class="btn" type="submit" style="background:#16a34a">تفعيل</button>
                  @endif
                </form>
              </td>
              <td>{{ $it->created_at }}</td>
            </tr>
          @endforeach

          @if(count($items) === 0)
            <tr>
              <td colspan="6" style="text-align:center;color:#6b7280;font-weight:900;padding:16px">لا يوجد أصناف</td>
            </tr>
          @endif
        </tbody>
      </table>
    </div>
  </div>

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

