<!doctype html>
<html lang="ar" dir="rtl" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تقرير المبيعات اليومي</title>

  <style>
    /* ========= Themes (3 حالات) ========= */

    :root{ /* LIGHT (هو القديم) */
      --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;

      --tableBg:#ffffff;
      --tableHead:#f9fafb;
      --tableBorder:#e5e7eb;
      --tableHover:#f3f4f6;
    }

    html[data-theme="dim"]{ /* مريح */
      --bg:#0f172a;
      --card:#111c33;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --border:rgba(255,255,255,.10);
      --shadow:0 14px 35px rgba(0,0,0,.30);

      --btn:#111827; --btnText:#ffffff;
      --btn2Bg:rgba(255,255,255,.06); --btn2Text:#ffffff; --btn2Border:rgba(255,255,255,.14);

      --tableBg:#0b1327;
      --tableHead:rgba(255,255,255,.07);
      --tableBorder:rgba(255,255,255,.10);
      --tableHover:rgba(255,255,255,.05);
    }

    html[data-theme="dark"]{ /* داكن */
      --bg:#0b1220;
      --card:#0f172a;
      --text:#ffffff;
      --muted:#cbd5e1;
      --border:rgba(255,255,255,.16);
      --shadow:0 16px 40px rgba(0,0,0,.40);

      --btn:#111827; --btnText:#ffffff;
      --btn2Bg:rgba(255,255,255,.08); --btn2Text:#ffffff; --btn2Border:rgba(255,255,255,.20);

      --tableBg:#0b1327;
      --tableHead:rgba(255,255,255,.10);
      --tableBorder:rgba(255,255,255,.18);
      --tableHover:rgba(255,255,255,.06);
    }

    *{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:800;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:800;font-size:13px;line-height:1;display:inline-flex;align-items:center;gap:8px;
    }

    /* ✅ زر واحد فقط للثيم */
    .themeBtn{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;
    }

    /* Filters */
    .grid{
      display:grid;
      grid-template-columns: 1.2fr 0.7fr 0.7fr 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:700;margin-bottom:6px}
    input,select{
      width:100%;
      padding:11px 12px;
      border:1px solid var(--border);
      border-radius:12px;
      outline:none;
      font-size:14px;
      background:var(--tableBg);
      color:var(--text);
    }
    html[data-theme="light"] input,
    html[data-theme="light"] select{
      background:#fff;
      color:#111827;
    }

    .filterActions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    /* Table */
    .tableWrap{overflow:auto;border-radius:12px;border:1px solid var(--tableBorder)}
    table{width:100%;border-collapse:collapse;min-width:980px;background:var(--tableBg)}
    th,td{
      padding:12px;
      border-bottom:1px solid var(--tableBorder);
      text-align:right;
      vertical-align:middle;
      color:var(--text);
    }
    th{background:var(--tableHead);font-weight:900;font-size:15px;white-space:nowrap}
    td{font-size:13px}
    tbody tr:hover td{background:var(--tableHover)}
    .num{font-weight:900}
    .empty{padding:16px;text-align:center;color:var(--muted);font-weight:700}
  </style>

  <!-- ✅ Apply saved theme ASAP (avoid flash) -->
  <script>
    (function(){
      const key = "ui_theme_3";
      const saved = localStorage.getItem(key);
      const t = (saved === "dim" || saved === "dark") ? saved : "light";
      document.documentElement.setAttribute("data-theme", t);
    })();
  </script>
</head>
<body>
<div class="container">

  <div class="bar">
    <div>
      <div class="title">تقرير المبيعات اليومي</div>
      <div class="subtitle">حسب (الفرع + التاريخ)</div>
    </div>

    <div class="actions">
      <a class="btn2" href="{{ route('dashboard.sales', ['branch_id'=>$branchId, 'from'=>$from, 'to'=>$to]) }}">رجوع للملخص</a>

      <a class="btn2" href="{{ route('dashboard.sales.report.export', ['branch_id'=>$branchId, 'from'=>$from, 'to'=>$to]) }}">
        Export CSV
      </a>

      <!-- ✅ زر واحد فقط يتبدّل (فاتح → مريح → داكن) -->
      <button class="btn2 themeBtn" type="button" id="themeToggle">
        <span id="themeIcon">☀️</span>
        <span id="themeText">فاتح</span>
      </button>

      <form method="POST" action="/logout" style="display:inline">
        @csrf
        <button class="btn" type="submit">خروج</button>
      </form>
    </div>
  </div>

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

    <form method="GET" action="{{ route('dashboard.sales.report') }}">
      <div class="grid">

        <div>
          <label>الفرع</label>
          <select name="branch_id">
            <option value="0">كل الفروع</option>
            @foreach($branches as $b)
              <option value="{{ $b->id }}" @selected((int)$branchId === (int)$b->id)>
                {{ $b->branch_no }} - {{ $b->name }}
              </option>
            @endforeach
          </select>
        </div>

        <div>
          <label>من تاريخ</label>
          <input type="date" name="from" value="{{ $from }}">
        </div>

        <div>
          <label>إلى تاريخ</label>
          <input type="date" name="to" value="{{ $to }}">
        </div>

        <div class="filterActions">
          <button class="btn" type="submit">تطبيق</button>
          <a class="btn2" href="{{ route('dashboard.sales.report') }}">مسح</a>
        </div>

      </div>
    </form>
  </div>

  <div class="card">
    <div style="font-weight:900;margin-bottom:10px">النتائج</div>

    <div class="tableWrap">
      <table>
        <thead>
          <tr>
            <th>التاريخ</th>
            <th>رقم الفرع</th>
            <th>اسم الفرع</th>
            <th>الإجمالي</th>
          </tr>
        </thead>
        <tbody>
          @foreach($rows as $r)
            <tr>
              <td class="num">{{ $r->day }}</td>
              <td class="num">{{ $r->branch_no }}</td>
              <td style="font-weight:900;">{{ $r->name }}</td>
              <td class="num">{{ number_format($r->total, 2) }}</td>
            </tr>
          @endforeach

          @if(count($rows) === 0)
            <tr>
              <td colspan="4" class="empty">لا توجد بيانات</td>
            </tr>
          @endif
        </tbody>
      </table>
    </div>
  </div>

</div>

<script>
(function(){
  const key = "ui_theme_3";
  const order = ["light","dim","dark"];

  const meta = {
    light: { icon:"☀️", text:"فاتح" },
    dim:   { icon:"🌙", text:"مريح" },
    dark:  { icon:"🌑", text:"داكن" }
  };

  const html = document.documentElement;
  const btn  = document.getElementById("themeToggle");
  const ic   = document.getElementById("themeIcon");
  const tx   = document.getElementById("themeText");

  function apply(t){
    html.setAttribute("data-theme", t);
    localStorage.setItem(key, t);
    if (ic) ic.textContent = meta[t].icon;
    if (tx) tx.textContent = meta[t].text;
  }

  const saved = localStorage.getItem(key);
  apply(order.includes(saved) ? saved : (html.getAttribute("data-theme") || "light"));

  if(btn){
    btn.addEventListener("click", function(){
      const cur = html.getAttribute("data-theme") || "light";
      const idx = order.indexOf(cur);
      const next = order[(idx + 1) % order.length];
      apply(next);
    });
  }
})();
</script>

</body>
</html>
