<?php $title='المواقع / الرفوف'; include __DIR__ . '/../layout/header.php'; ?>

<style>
.locations-wrap{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:16px;
}
.locations-hero{
  background:linear-gradient(180deg,#fff,#fbf7f2);
  border:1px solid #eadfd5;
}
.locations-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.location-stat{
  background:#fff;
  border:1px solid #efe4d8;
  border-radius:18px;
  padding:14px;
}
.location-stat .num{
  font-size:28px;
  font-weight:800;
  color:#5e3b23;
  margin-top:6px;
}
.locations-list{
  display:grid;
  gap:14px;
}
.location-card{
  background:#fff;
  border:1px solid #eadfd5;
  border-radius:22px;
  padding:16px;
  box-shadow:0 10px 22px rgba(17,24,39,.05);
}
.location-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.location-title{
  font-size:22px;
  font-weight:800;
  color:#2d1f16;
  margin:0;
}
.location-sub{
  color:#8b7a6b;
  font-size:13px;
  margin-top:4px;
}
.location-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.location-meta-box{
  background:#faf7f4;
  border:1px solid #efe4da;
  border-radius:16px;
  padding:12px;
}
.location-meta-box .meta-label{
  font-size:12px;
  color:#8b7a6b;
  margin-bottom:4px;
}
.location-meta-box .meta-value{
  font-weight:800;
  color:#1f2937;
}
.location-preview{
  background:#fffaf5;
  border:1px dashed #decab6;
  border-radius:16px;
  padding:12px;
  color:#6b7280;
  margin-bottom:14px;
  line-height:1.7;
}
.location-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
}
.location-actions form:first-child{
  display:grid;
  gap:10px;
}
.location-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}
.status-badge.active{
  background:#dcfce7;
  color:#166534;
}
.status-badge.inactive{
  background:#f3f4f6;
  color:#374151;
}
.add-location-card{
  position:sticky;
  top:88px;
}
.section-note{
  color:#8b7a6b;
  line-height:1.8;
  margin-top:6px;
}
@media (max-width: 1100px){
  .locations-wrap{
    grid-template-columns:1fr;
  }
  .add-location-card{
    position:static;
  }
}
@media (max-width: 700px){
  .locations-stats{
    grid-template-columns:1fr;
  }
  .location-meta{
    grid-template-columns:1fr;
  }
  .location-actions{
    grid-template-columns:1fr;
  }
  .location-inline{
    grid-template-columns:1fr;
  }
}
</style>

<?php
$totalLocations = count($rows ?? []);
$activeLocations = 0;
$totalItems = 0;

foreach (($rows ?? []) as $r) {
    if (!empty($r['is_active'])) $activeLocations++;
    $totalItems += (int)($r['items_count'] ?? 0);
}
?>

<div class="card locations-hero">
  <div class="page-head">
    <div>
      <h2 style="margin:0">المواقع / الرفوف</h2>
      <div class="section-note">إدارة مواقع القطع داخل المخزن بشكل أوضح وأسهل، مع عرض حالة كل موقع وعدد القطع المرتبطة به.</div>
    </div>
    <span class="pill"><?= $totalLocations ?> موقع</span>
  </div>

  <div class="locations-stats">
    <div class="location-stat">
      <div class="muted">إجمالي المواقع</div>
      <div class="num"><?= $totalLocations ?></div>
    </div>
    <div class="location-stat">
      <div class="muted">المواقع المفعلة</div>
      <div class="num"><?= $activeLocations ?></div>
    </div>
    <div class="location-stat">
      <div class="muted">إجمالي القطع المرتبطة</div>
      <div class="num"><?= $totalItems ?></div>
    </div>
  </div>
</div>

<div class="locations-wrap">
  <div>
    <div class="locations-list">
      <?php foreach(($rows ?? []) as $row): ?>
        <?php $itemsPreview = $row['items_preview'] ?? ''; ?>

        <div class="location-card">
          <div class="location-card-head">
            <div>
              <h3 class="location-title"><?= e($row['name'] ?? '-') ?></h3>
              <div class="location-sub">موقع تخزين / رف داخل المخزن</div>
            </div>

            <?php if(!empty($row['is_active'])): ?>
              <span class="status-badge active">● مفعّل</span>
            <?php else: ?>
              <span class="status-badge inactive">● موقوف</span>
            <?php endif; ?>
          </div>

          <div class="location-meta">
            <div class="location-meta-box">
              <div class="meta-label">عدد القطع</div>
              <div class="meta-value"><?= (int)($row['items_count'] ?? 0) ?></div>
            </div>
            <div class="location-meta-box">
              <div class="meta-label">المعرّف</div>
              <div class="meta-value">#<?= (int)($row['id'] ?? 0) ?></div>
            </div>
          </div>

          <div class="location-preview">
            <strong>معاينة القطع:</strong><br>
            <?= e($itemsPreview !== '' ? $itemsPreview : 'لا توجد معاينة متاحة حالياً') ?>
          </div>

          <div class="location-actions">
            <form method="post" action="<?= e(base_url('?page=location_update')) ?>">
              <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
              <input type="hidden" name="id" value="<?= (int)($row['id'] ?? 0) ?>">

              <div>
                <label class="label">اسم الموقع</label>
                <input class="input" name="name" value="<?= e($row['name'] ?? '') ?>" placeholder="اسم الموقع">
              </div>

              <div class="location-inline">
                <label style="display:flex;align-items:center;gap:8px;font-weight:700">
                  <input type="checkbox" name="is_active" value="1" <?= !empty($row['is_active']) ? 'checked' : '' ?>>
                  <span>مفعّل</span>
                </label>

                <button class="btn light" type="submit">حفظ التعديل</button>
              </div>
            </form>

            <form method="post" action="<?= e(base_url('?page=location_delete')) ?>" onsubmit="return confirm('تأكيد حذف الموقع؟')">
              <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
              <input type="hidden" name="id" value="<?= (int)($row['id'] ?? 0) ?>">
              <button class="btn danger" style="width:100%">حذف</button>
            </form>
          </div>
        </div>
      <?php endforeach; ?>

      <?php if(empty($rows)): ?>
        <div class="card" style="text-align:center">
          <h3 style="margin-top:0">لا توجد مواقع حالياً</h3>
          <div class="muted">ابدأ بإضافة أول موقع أو رف داخل المخزن من النموذج الجانبي.</div>
        </div>
      <?php endif; ?>
    </div>
  </div>

  <div>
    <div class="card soft add-location-card">
      <div class="page-head" style="margin-bottom:10px">
        <div>
          <h3 style="margin:0">إضافة موقع جديد</h3>
          <div class="section-note">يمكنك إنشاء رف أو موقع جديد ليظهر مباشرة ضمن المواقع المتاحة للقطع.</div>
        </div>
      </div>

      <form method="post" action="<?= e(base_url('?page=location_store')) ?>">
        <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">

        <div style="display:grid;gap:14px">
          <div>
            <label class="label">اسم الموقع / الرف</label>
            <input class="input" name="name" placeholder="مثال: رف A1" required>
          </div>

          <label style="display:flex;align-items:center;gap:8px;font-weight:700">
            <input type="checkbox" name="is_active" value="1" checked>
            <span>مفعّل</span>
          </label>

          <button class="btn secondary">إضافة الموقع</button>
        </div>
      </form>
    </div>
  </div>
</div>

<?php include __DIR__ . '/../layout/footer.php'; ?>