<!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)}

    /* Form */
    .grid{
      display:grid;
      grid-template-columns: 1fr 0.6fr 0.7fr 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,textarea{
      width:100%;
      padding:11px 12px;
      border:1px solid var(--border);
      border-radius:12px;
      outline:none;
      font-size:14px;
      background:#fff;
    }
    textarea{min-height:42px;resize:vertical}
    input:focus,textarea:focus{border-color:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.25)}
    .small{color:var(--muted);font-size:12px;margin-top:8px}

    /* Table */
    .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)}
  </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>
      <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('suppliers.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('suppliers.index') }}">مسح</a>
        </div>
      </div>
    </form>
  </div>

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

    <form method="POST" action="{{ route('suppliers.store') }}">
      @csrf

      <div class="grid">
        <div>
          <label>اسم المورد *</label>
          <input type="text" name="name" value="{{ old('name') }}" required>
        </div>

        <div>
          <label>الجوال</label>
          <input type="text" name="phone" value="{{ old('phone') }}">
        </div>

        <div>
          <label>الرقم الضريبي</label>
          <input type="text" name="tax_no" value="{{ old('tax_no') }}">
        </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>
            <th>تاريخ الإضافة</th>
          </tr>
        </thead>
        <tbody>
          @foreach($suppliers as $s)
            <tr>
              <td class="num">{{ $s->id }}</td>
              <td style="font-weight:900">{{ $s->name }}</td>
              <td>{{ $s->phone ?? '-' }}</td>
              <td>{{ $s->tax_no ?? '-' }}</td>
              <td>
                @if((int)$s->is_active === 1)
                  <span class="pill on">نشط</span>
                @else
                  <span class="pill off">موقوف</span>
                @endif
              </td>
              <td>
                <form method="POST" action="{{ route('suppliers.toggle', ['id' => $s->id]) }}" style="display:inline">
                  @csrf
                  @if((int)$s->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>{{ $s->created_at }}</td>
            </tr>
          @endforeach

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

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

