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

  <style>
    /* =========================
       Theme Variables (Default = DIM)
       ========================= */
    :root{ /* default = dim */
      --bg:#121826;
      --surface:#101827;
      --card:#151e30;
      --card2:#0f1a33;

      --text:#e5e7eb;
      --muted:#9ca3af;

      --border:rgba(255,255,255,.10);
      --border2:rgba(255,255,255,.14);
      --shadow:0 18px 40px rgba(0,0,0,.22);

      --primary:#6366f1;
      --primary2:#4f46e5;
      --success:#22c55e;
      --warning:#f59e0b;
      --danger:#ef4444;

      --input:#0b1327;
      --inputBorder:rgba(255,255,255,.12);
      --inputFocus:rgba(99,102,241,.35);

      --tableHead:rgba(255,255,255,.05);
      --rowHover:rgba(99,102,241,.08);
    }

    /* ✅ Dark */
    html[data-theme="dark"]{
      --bg:#070b14;
      --surface:#0b1220;
      --card:#0f172a;
      --card2:#0b1327;
    }

    /* ✅ Light */
    html[data-theme="light"]{
      --bg:#ffffff;
      --surface:#ffffff;
      --card:#ffffff;
      --card2:#ffffff;

      --text:#111827;
      --muted:#6b7280;

      --border:rgba(17,24,39,.10);
      --border2:rgba(17,24,39,.14);
      --shadow:0 12px 28px rgba(0,0,0,.10);

      --primary:#111827;
      --primary2:#111827;

      --success:#16a34a;
      --warning:#d97706;
      --danger:#dc2626;

      --input:#ffffff;
      --inputBorder:rgba(17,24,39,.14);
      --inputFocus:rgba(17,24,39,.12);

      --tableHead:rgba(17,24,39,.03);
      --rowHover:rgba(17,24,39,.03);
    }

    *{box-sizing:border-box}

    body{
      font-family:Arial, sans-serif;
      margin:0;
      background:var(--bg);
      color:var(--text);
      padding:22px;
    }
    html[data-theme="dim"] body,
    html[data-theme="dark"] body{
      background:linear-gradient(180deg, var(--bg), var(--bg));
    }

    .container{max-width:1200px;margin:0 auto}

    /* Page header */
    .pageHeader{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--border);
      border-radius:18px;
      box-shadow:var(--shadow);
      padding:16px 16px 12px;
      margin-bottom:14px;
    }
    html[data-theme="light"] .pageHeader{
      background:#ffffff;
      border-color:rgba(17,24,39,.10);
      box-shadow:0 12px 28px rgba(0,0,0,.08);
    }

    .headerTop{
      display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap
    }
    .title{font-weight:900;font-size:18px;letter-spacing:.2px}
    .subtitle{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.6}

    .navRow{
      display:flex;gap:8px;flex-wrap:nowrap;overflow:auto;max-width:100%;
      padding-top:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;align-items:center
    }
    .navRow > *{flex:0 0 auto; white-space:nowrap;}

    /* Buttons */
    .btn{
      padding:10px 12px;border-radius:12px;border:1px solid transparent;
      cursor:pointer;font-weight:900;font-size:13px;line-height:1;
      display:inline-flex;align-items:center;gap:8px;text-decoration:none;
      transition:transform .05s ease, opacity .15s ease, border-color .15s ease;
      user-select:none;
    }
    .btn:active{transform:translateY(1px)}

    .btnPrimary{
      background:linear-gradient(180deg, var(--primary), var(--primary2));
      color:#fff;border-color:rgba(255,255,255,.10)
    }
    html[data-theme="light"] .btnPrimary{
      background:#111827; color:#fff; border-color:rgba(17,24,39,.12);
    }

    .btnGhost{
      background:rgba(255,255,255,.03);
      color:var(--text);
      border-color:var(--border2)
    }
    html[data-theme="light"] .btnGhost{
      background:#ffffff;
      border-color:rgba(17,24,39,.12);
    }
    .btnGhost:hover{border-color:rgba(255,255,255,.18)}
    html[data-theme="light"] .btnGhost:hover{border-color:rgba(17,24,39,.20)}

    .btnDanger{
      background:rgba(239,68,68,.14);
      color:#fff;border-color:rgba(239,68,68,.35)
    }
    html[data-theme="light"] .btnDanger{
      background:#ffffff;
      color:#dc2626;
      border-color:rgba(220,38,38,.25);
    }
    .btnDanger:hover{opacity:.95}

    .activeTab{
      background:rgba(99,102,241,.20);
      border-color:rgba(99,102,241,.55);
      color:#fff;
    }
    html[data-theme="light"] .activeTab{
      background:rgba(17,24,39,.05);
      border-color:rgba(17,24,39,.18);
      color:#111827;
    }

    /* Cards */
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
      border:1px solid var(--border);
      border-radius:18px;
      box-shadow:var(--shadow);
      padding:16px;
      margin-bottom:14px;
    }
    html[data-theme="light"] .card{
      background:#ffffff;
      border-color:rgba(17,24,39,.10);
      box-shadow:0 12px 28px rgba(0,0,0,.08);
    }

    .cardTitle{
      display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
      margin-bottom:10px;
    }
    .cardTitle h3{margin:0;font-size:15px;font-weight:900}
    .cardHint{color:var(--muted);font-size:12px;font-weight:900}

    /* Alerts */
    .alert{padding:12px;border-radius:14px;border:1px solid;font-weight:900;margin-bottom:14px}
    .alert.err{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35);color:#fff}
    .alert.ok{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.35);color:#fff}
    html[data-theme="light"] .alert.err{color:#991b1b;background:#fef2f2;border-color:#fecaca}
    html[data-theme="light"] .alert.ok{color:#166534;background:#ecfdf3;border-color:#bbf7d0}

    /* Forms */
    label{display:block;font-size:12px;color:var(--muted);font-weight:900;margin-bottom:6px}
    input, select, textarea{
      width:100%;
      padding:11px 12px;
      border:1px solid var(--inputBorder);
      border-radius:12px;
      outline:none;
      font-size:14px;
      background:var(--input);
      color:var(--text);
    }
    textarea{min-height:44px;resize:vertical}
    input:focus, select:focus, textarea:focus{
      border-color:rgba(99,102,241,.55);
      box-shadow:0 0 0 3px var(--inputFocus);
    }
    html[data-theme="light"] input:focus,
    html[data-theme="light"] select:focus,
    html[data-theme="light"] textarea:focus{
      border-color:rgba(17,24,39,.22);
      box-shadow:0 0 0 3px rgba(17,24,39,.08);
    }

    /* ✅ Grids خاصة بالمصروفات (مع الحفاظ على توزيع الأعمدة القديم) */
    .gridExp{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 0.7fr;
      gap:12px;
      align-items:end;
    }
    @media (max-width: 980px){
      body{padding:16px}
      .gridExp{grid-template-columns: 1fr 1fr;}
    }
    @media (max-width: 560px){
      .gridExp{grid-template-columns: 1fr;}
    }

    .gridExp2{
      display:grid;
      grid-template-columns: 1fr 1.2fr;
      gap:12px;
      align-items:end;
      margin-top:12px;
    }
    @media (max-width: 980px){
      .gridExp2{grid-template-columns: 1fr;}
    }

    .kpiGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:10px;
      margin-top:12px;
    }
    @media (max-width: 980px){ .kpiGrid{grid-template-columns: repeat(2, 1fr);} }
    @media (max-width: 560px){ .kpiGrid{grid-template-columns: 1fr;} }

    .kpi{
      border:1px solid var(--border);
      border-radius:14px;
      padding:12px;
      background:rgba(255,255,255,.03);
    }
    html[data-theme="light"] .kpi{
      background:#ffffff;
      border-color:rgba(17,24,39,.10);
    }
    .kpi .t{color:var(--muted);font-size:12px;font-weight:900}
    .kpi .v{margin-top:8px;font-size:16px;font-weight:900}

    .hr{height:1px;background:var(--border);margin:14px 0}
    .small{color:var(--muted);font-size:12px;font-weight:900}
  </style>

  <!-- ✅ Apply saved theme ASAP (avoid flash) -->
  <script>
    (function(){
      const themes = ["light","dim","dark"];
      const key = "ui_theme";
      const saved = localStorage.getItem(key);
      const t = (saved && themes.includes(saved)) ? saved : "dim";
      document.documentElement.setAttribute("data-theme", t);
    })();
  </script>
</head>

<body>
<div class="container">

  <div class="pageHeader">
    <div class="headerTop">
      <div>
        <div class="title">المصروفات</div>
        <div class="subtitle">إضافة مصروف (سعر شامل الضريبة — يحسب قبل الضريبة والضريبة تلقائياً)</div>
      </div>

      <div class="navRow">
        <a class="btn btnPrimary" href="<?php echo e(Route::has('dashboard.sales') ? route('dashboard.sales') : '#'); ?>">الرئيسية</a>

        <a class="btn btnGhost <?php echo e(Route::currentRouteNamed('dashboard.sales') ? 'activeTab' : ''); ?>"
           href="<?php echo e(Route::has('dashboard.sales') ? route('dashboard.sales') : '#'); ?>">المبيعات</a>

        <a class="btn btnGhost <?php echo e(Route::currentRouteNamed('purchases.*') ? 'activeTab' : ''); ?>"
           href="<?php echo e(Route::has('purchases.index') ? route('purchases.index') : '#'); ?>">المشتريات</a>

        <a class="btn btnGhost <?php echo e(Route::currentRouteNamed('expenses.*') ? 'activeTab' : ''); ?>"
           href="<?php echo e(Route::has('expenses.index') ? route('expenses.index') : '#'); ?>">المصروفات</a>

        <a class="btn btnGhost <?php echo e(Route::currentRouteNamed('dashboard.reports*') ? 'activeTab' : ''); ?>"
           href="<?php echo e(Route::has('dashboard.reports') ? route('dashboard.reports') : '#'); ?>">التقارير</a>

        <a class="btn btnGhost <?php echo e(Route::currentRouteNamed('settings.*') ? 'activeTab' : ''); ?>"
           href="<?php echo e(Route::has('settings.index') ? route('settings.index') : '#'); ?>">الإعدادات</a>

        <?php if(auth()->check() && (auth()->user()->role ?? 'user') === 'admin'): ?>
          <a class="btn btnGhost" href="<?php echo e(Route::has('branches.index') ? route('branches.index') : '#'); ?>">إدارة الفروع</a>
          <a class="btn btnGhost" href="<?php echo e(Route::has('users.index') ? route('users.index') : '#'); ?>">إدارة المستخدمين</a>
        <?php endif; ?>

        <button class="btn btnGhost" type="button" id="themeBtn">🎨 المظهر</button>

        <form method="POST" action="<?php echo e(Route::has('logout') ? route('logout') : '#'); ?>" style="display:inline">
          <?php echo csrf_field(); ?>
          <button class="btn btnDanger" type="submit">خروج</button>
        </form>
      </div>
    </div>
  </div>

  <?php
    $activeTab = 'create';
    if (\Illuminate\Support\Facades\Route::currentRouteNamed('expenses.invoices'))  $activeTab = 'invoices';
    if (\Illuminate\Support\Facades\Route::currentRouteNamed('expenses.settings'))  $activeTab = 'settings';
  ?>

  <div class="card">
    <div class="navRow" style="padding-top:0">
      <a class="btn btnGhost <?php echo e($activeTab==='create' ? 'activeTab' : ''); ?>"
         href="<?php echo e(Route::has('expenses.index') ? route('expenses.index') : '#'); ?>">
        إضافة مصروف
      </a>

      <a class="btn btnGhost <?php echo e($activeTab==='invoices' ? 'activeTab' : ''); ?>"
         href="<?php echo e(Route::has('expenses.invoices') ? route('expenses.invoices') : '#'); ?>">
        فواتير المصروفات
      </a>

      <a class="btn btnGhost <?php echo e($activeTab==='settings' ? 'activeTab' : ''); ?>"
         href="<?php echo e(Route::has('expenses.settings') ? route('expenses.settings') : '#'); ?>">
        إعدادات المصروفات
      </a>
    </div>
  </div>

  <?php if(session('ok')): ?>    <div class="alert ok"><?php echo e(session('ok')); ?></div> <?php endif; ?>
  <?php if(session('error')): ?> <div class="alert err"><?php echo e(session('error')); ?></div> <?php endif; ?>
  <?php if($errors->any()): ?>   <div class="alert err"><?php echo e($errors->first()); ?></div> <?php endif; ?>

  <div class="card">
    <div class="cardTitle">
      <h3>بيانات المصروف</h3>
      <div class="cardHint">املأ البيانات ثم احفظ</div>
    </div>

    <form method="POST" action="<?php echo e(route('expenses.store')); ?>" id="expForm">
      <?php echo csrf_field(); ?>

      <div class="gridExp">
        <div>
          <label>الفرع</label>
          <select name="branch_id" id="branch_id" required>
            <option value="">اختر</option>
            <?php $__currentLoopData = $branches; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
              <option value="<?php echo e($b->id); ?>" <?php if((int)old('branch_id', $branchId) === (int)$b->id): echo 'selected'; endif; ?>>
                <?php echo e($b->branch_no); ?> - <?php echo e($b->name); ?>

              </option>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
          </select>
        </div>

        <div>
          <label>المصروف (فرعي)</label>
          <select name="expense_subcategory_id" id="expense_subcategory_id" required>
            <option value="">اختر</option>
            <?php $__currentLoopData = $subcats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
              <option value="<?php echo e($sc->id); ?>" <?php if((int)old('expense_subcategory_id') === (int)$sc->id): echo 'selected'; endif; ?>>
                <?php echo e($sc->name); ?>

              </option>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
          </select>
        </div>

        <div>
          <label>رقم الفاتورة (إجباري / غير مكرر)</label>
          <input type="text" name="bill_no" value="<?php echo e(old('bill_no')); ?>" required placeholder="مثال: EXP-8899">
        </div>

        <div>
          <label>تاريخ الفاتورة</label>
          <input type="date" name="bill_date" value="<?php echo e(old('bill_date')); ?>">
        </div>

        <div>
          <label>الضريبة %</label>
          <input type="number" step="0.01" name="vat_rate" id="vat_rate" value="<?php echo e(old('vat_rate', 15)); ?>" required>
        </div>
      </div>

      <div class="hr"></div>

      <div class="gridExp2">
        <div>
          <label>المبلغ شامل الضريبة</label>
          <input type="number" step="0.01" min="0" name="total_gross" id="total_gross"
                 value="<?php echo e(old('total_gross')); ?>" required>
          <div class="small" style="margin-top:6px">
            * أدخل الإجمالي شامل، والنظام يحسب قبل الضريبة والضريبة تلقائيًا
          </div>
        </div>

        <div>
          <label>ملاحظات</label>
          <textarea name="notes" placeholder="اختياري"><?php echo e(old('notes')); ?></textarea>
        </div>
      </div>

      <div class="kpiGrid">
        <div class="kpi">
          <div class="t">قبل الضريبة</div>
          <div class="v"><span id="k_sub">0.00</span></div>
        </div>
        <div class="kpi">
          <div class="t">قيمة الضريبة</div>
          <div class="v"><span id="k_vat">0.00</span></div>
        </div>
        <div class="kpi">
          <div class="t">الإجمالي شامل</div>
          <div class="v"><span id="k_total">0.00</span></div>
        </div>
      </div>

      <div style="display:flex;justify-content:flex-end;margin-top:14px">
        <button class="btn btnPrimary" type="submit">حفظ المصروف</button>
      </div>
    </form>
  </div>

</div>

<script>
(function(){
  // Theme toggle
  const themes = ["light","dim","dark"];
  const key = "ui_theme";
  const html = document.documentElement;
  const btn = document.getElementById("themeBtn");

  function label(t){
    if(t === "light") return "☀️ فاتح";
    if(t === "dark") return "🌙 داكن";
    return "🌗 مريح";
  }
  function apply(t){
    html.setAttribute("data-theme", t);
    localStorage.setItem(key, t);
    if(btn) btn.textContent = "🎨 " + label(t);
  }
  const saved = localStorage.getItem(key);
  const t = (saved && themes.includes(saved)) ? saved : (html.getAttribute("data-theme") || "dim");
  apply(t);

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

  // Expense calc
  const vatEl = document.getElementById('vat_rate');
  const grossEl = document.getElementById('total_gross');
  const kSub = document.getElementById('k_sub');
  const kVat = document.getElementById('k_vat');
  const kTot = document.getElementById('k_total');

  function num(v){ v = parseFloat(v); return isNaN(v) ? 0 : v; }
  function r2(v){ return Math.round((v + Number.EPSILON) * 100) / 100; }
  function fmt(v){ return r2(v).toFixed(2); }

  function recalc(){
    const rate = num(vatEl.value);
    const gross = num(grossEl.value);
    const div = 1 + (rate / 100);
    const sub = div > 0 ? (gross / div) : gross;
    const vat = gross - sub;

    kSub.textContent = fmt(sub);
    kVat.textContent = fmt(vat);
    kTot.textContent = fmt(gross);
  }

  vatEl.addEventListener('input', recalc);
  grossEl.addEventListener('input', recalc);
  recalc();
})();
</script>

</body>
</html>
<?php /**PATH /home/ksaad26/laravel/laundry-dashboard/resources/views/expenses.blade.php ENDPATH**/ ?>