<?php 
$page_title = 'لوحة التحكم'; 
require_once 'includes/header.php';  
$stats = getDashboardStats(); 
?>

<style>
/* === Root & Reset === */
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#222;
  --muted:#6b7280;
  --border:#e6e8ef;
  --primary:#2a7ae4;
  --primary-600:#1a5fc3;
  --success:#22c55e;
  --success-600:#16a34a;
  --shadow:0 6px 20px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Tajawal", "Noto Kufi Arabic", Arial, sans-serif;
  direction: rtl;
}

/* Page container */
.dashboard-wrap{
  max-width: 1200px;
  margin: 24px auto 48px;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(8px);
  animation: pageFade .45s ease forwards;
}

@keyframes pageFade{
  to{opacity:1; transform:none;}
}

/* === Section title & actions === */
.section-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin: 8px 2px 14px;
}
.section-header h3{
  margin:0; font-size:18px; font-weight:700; color:var(--text);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; font-size:14px; line-height:1;
  text-decoration:none; border:1px solid transparent; transition:.2s ease;
  cursor:pointer; user-select:none;
}
.btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.btn-primary{ background:var(--primary); color:#fff }
.btn-primary:hover{ background:var(--primary-600) }
.btn-success{ background:var(--success); color:#fff }
.btn-success:hover{ background:var(--success-600) }

/* === Cards grid === */
.dashboard-cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(12, 1fr);
  margin: 26px 0;
}
.card{
  grid-column: span 12;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; box-shadow: var(--shadow);
  padding:20px; position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.10); border-color:#dfe3ee }
.card .card-head{
  display:flex; align-items:center; gap:14px; margin-bottom:8px; color:var(--muted);
  font-size:14px; font-weight:600;
}
.card .icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: rgba(42,122,228,.1); color:var(--primary);
  flex:0 0 42px;
}
.card .value{
  font-size:28px; font-weight:800; color:var(--primary); letter-spacing:.2px;
}

/* Responsive columns for cards */
@media (min-width: 520px){
  .card{ grid-column: span 6; }
}
@media (min-width: 920px){
  .card{ grid-column: span 4; }
}

/* === Table (Recent Invoices) === */
.table-wrap{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow: var(--shadow); overflow:hidden;
  animation: fadeUp .4s ease both;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.items-table{ width:100%; border-collapse:collapse; table-layout:fixed }
.items-table thead th{
  background:#f1f3f7; color:#374151; font-size:13px; letter-spacing:.2px;
  padding:14px 10px; text-align:center; position:sticky; top:0; z-index:1;
  border-bottom:1px solid var(--border);
}
.items-table tbody td{
  padding:14px 10px; text-align:center; font-size:14px; border-bottom:1px solid var(--border);
}
.items-table tbody tr:nth-child(even){ background:#fafbff }
.items-table tbody tr:hover{ background:#f5f7fd }
.items-table .actions{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap }

/* Badge / subtle helpers */
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:12px; background:#eef2ff; color:#374151; border:1px solid #e5e7eb;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .dashboard-wrap, .table-wrap, .card{ animation:none !important; transform:none !important }
  .card, .btn{ transition: none !important }
}
</style>

<div class="dashboard-wrap">
  <!-- Header section (optional title area) -->
  <div class="section-header" style="margin-bottom:0">
    <h3>لوحة التحكم</h3>
    <span class="badge">واجهة حديثة</span>
  </div>

  <!-- Dashboard Cards -->
  <div class="dashboard-cards" id="dashboard">
    <div class="card">
      <div class="card-head">
        <div class="icon"><i class="fas fa-file-invoice"></i></div>
        <span>إجمالي الفواتير اليوم</span>
      </div>
      <div class="value"><?= $stats['today_invoices'] ?></div>
    </div>

    <div class="card">
      <div class="card-head">
        <div class="icon"><i class="fas fa-cash-register"></i></div>
        <span>إجمالي المبيعات اليوم</span>
      </div>
      <div class="value"><?= formatCurrency($stats['today_sales']) ?></div>
    </div>

    <div class="card">
      <div class="card-head">
        <div class="icon"><i class="fas fa-chart-line"></i></div>
        <span>إجمالي المبيعات الشهرية</span>
      </div>
      <div class="value"><?= formatCurrency($stats['month_sales']) ?></div>
    </div>
  </div>

  <!-- Recent Invoices -->
  <div class="section-header">
    <h3>آخر الفواتير</h3>
    <a href="review_invoices.php" class="btn btn-primary"><i class="fas fa-list-ul"></i> عرض الكل</a>
  </div>

  <div class="table-wrap">
    <table class="items-table" role="table" aria-label="آخر الفواتير">
      <thead>
        <tr role="row">
          <th scope="col">رقم الفاتورة</th>
          <th scope="col">التاريخ</th>
          <th scope="col">اسم العميل</th>
          <th scope="col">المبلغ الإجمالي</th>
          <th scope="col">الإجراءات</th>
        </tr>
      </thead>
      <tbody>
        <?php
          $invoices = getInvoices(5);
          if (empty($invoices)): ?>
            <tr>
              <td colspan="5" style="text-align:center; color:#6b7280;">لا توجد فواتير مسجلة</td>
            </tr>
        <?php else: ?>
          <?php foreach ($invoices as $invoice): ?>
            <tr>
              <td><?= $invoice['invoice_number'] ?></td>
              <td><?= formatDate($invoice['date']) ?></td>
              <td><?= $invoice['customer_name'] ?? 'عميل نقدي' ?></td>
              <td><?= formatCurrency($invoice['total_amount']) ?></td>
              <td class="actions">
                <a href="view_invoice.php?num=<?= urlencode($invoice['invoice_number']) ?>" class="btn btn-primary">
                  <i class="fas fa-eye"></i> عرض
                </a>
                <a href="print_invoice.php?num=<?= urlencode($invoice['invoice_number']) ?>" target="_blank" class="btn btn-success">
                  <i class="fas fa-print"></i> طباعة
                </a>
              </td>
            </tr>
          <?php endforeach; ?>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</div>

<?php require_once 'includes/footer.php'; ?>
