<?php $__env->startSection('title', 'لوحة التحكم — مراسلات'); ?>
<?php $__env->startSection('page-title', 'لوحة التحكم'); ?>
<?php $__env->startSection('breadcrumb', 'رئيسي / لوحة التحكم'); ?>

<?php $__env->startSection('styles'); ?>
<style>
  :root{
    --teal:#00b09b;--teal-dk:#008f7a;--teal-lt:rgba(0,176,155,.10);
    --blue:#1a8fff;--blue-lt:rgba(26,143,255,.10);
    --gold:#f5a623;--gold-lt:rgba(245,166,35,.12);
    --red:#e74c3c;--red-lt:rgba(231,76,60,.10);
    --purple:#7c6fcd;--purple-lt:rgba(124,111,205,.10);
    --green:#28d094;--green-lt:rgba(40,208,148,.10);
    --orange:#ff6b35;--orange-lt:rgba(255,107,53,.10);
    --text:#2c3e50;--text-mid:#546e7a;--muted:#90a4ae;
    --border:#e0e7ef;--white:#fff;--bg:#f0f3f8;
    --sh:0 2px 10px rgba(0,0,0,.07);--sh-md:0 4px 20px rgba(0,0,0,.09);
  }

  /* ── page header ── */
  .pg-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
  .pg-hdr-l h1{font-size:21px;font-weight:900;color:var(--text)}
  .pg-hdr-l .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
  .pg-hdr-r{display:flex;gap:8px;align-items:center}
  .btn-p{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:var(--teal);color:#fff;border:none;border-radius:9px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 3px 12px rgba(0,176,155,.28);transition:background .16s,transform .14s}
  .btn-p:hover{background:var(--teal-dk);transform:translateY(-1px)}
  .btn-s{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;background:var(--white);color:var(--text-mid);border:1px solid var(--border);border-radius:9px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .16s}
  .btn-s:hover{background:var(--bg)}

  /* ── stat cards ── */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
  .sc{background:var(--white);border:1px solid var(--border);border-radius:13px;padding:18px 16px 14px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;animation:cIn .4s ease both}
  .sc:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
  @keyframes cIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .sc:nth-child(1){animation-delay:.04s}.sc:nth-child(2){animation-delay:.08s}.sc:nth-child(3){animation-delay:.12s}.sc:nth-child(4){animation-delay:.16s}
  .sc:nth-child(5){animation-delay:.20s}.sc:nth-child(6){animation-delay:.24s}.sc:nth-child(7){animation-delay:.28s}.sc:nth-child(8){animation-delay:.32s}
  .sc::after{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--ac,var(--teal));border-radius:13px 13px 0 0}
  .sc::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:var(--ac,var(--teal));border-radius:50%;filter:blur(35px);opacity:.08;pointer-events:none}
  .sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .sc-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--ic,var(--teal-lt));color:var(--ac,var(--teal))}
  .sc-badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:20px}
  .sc-badge.up{background:rgba(40,208,148,.12);color:#1a7a5e}
  .sc-badge.dn{background:var(--red-lt);color:var(--red)}
  .sc-badge.warn{background:var(--gold-lt);color:#9a6200}
  .sc-val{font-size:32px;font-weight:900;color:var(--text);line-height:1;margin-bottom:4px;direction:ltr;text-align:right}
  .sc-lbl{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
  .sc-desc{font-size:11px;color:var(--muted)}

  /* ── row 2 charts ── */
  .row2{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin-bottom:18px}
  .card{background:var(--white);border:1px solid var(--border);border-radius:13px;overflow:hidden;animation:cIn .4s .3s ease both}
  .card-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
  .card-title{font-size:14px;font-weight:800;color:var(--text)}
  .card-sub{font-size:11px;color:var(--muted);margin-top:2px}
  .card-body{padding:18px}

  .donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
  .donut-canvas{width:180px!important;height:180px!important}
  .donut-legend{width:100%}
  .dl-item{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:12px}
  .dl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
  .dl-lbl{display:flex;align-items:center;gap:6px;color:var(--text-mid)}
  .dl-val{font-weight:800;color:var(--text);font-size:13px}

  .tab-sw{display:flex;gap:3px;background:var(--bg);border-radius:8px;padding:3px}
  .tab-btn{padding:5px 12px;border-radius:6px;border:none;background:none;color:var(--muted);font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:background .16s,color .16s}
  .tab-btn.active{background:var(--white);color:var(--teal);box-shadow:0 1px 4px rgba(0,0,0,.08)}
  .chart-wrap{height:240px;position:relative}

  .row3{margin-bottom:18px}
  .bar-wrap{height:220px;position:relative}

  .tbl-wrap{background:var(--white);border:1px solid var(--border);border-radius:13px;overflow:hidden;margin-bottom:18px;animation:cIn .4s .45s ease both}
  .tbl-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
  .view-all{font-size:12px;color:var(--teal);text-decoration:none;font-weight:600}
  .view-all:hover{text-decoration:underline}
  .data-table{width:100%;border-collapse:collapse;font-size:12.5px}
  .data-table th{padding:10px 14px;text-align:right;color:var(--muted);font-weight:700;font-size:11.5px;border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap}
  .data-table td{padding:11px 14px;text-align:right;border-bottom:1px solid #f3f6fa;color:var(--text-mid);vertical-align:middle}
  .data-table tr:last-child td{border-bottom:none}
  .data-table tr:hover td{background:#fafcff}
  .ref-link{color:var(--teal);font-weight:700;text-decoration:none;font-size:12px}
  .ref-link:hover{text-decoration:underline}

  .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
  .badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .b-pending{background:rgba(245,166,35,.12);color:#9a6200}.b-pending::before{background:var(--gold)}
  .b-done{background:rgba(40,208,148,.12);color:#1a7a5e}.b-done::before{background:var(--green)}
  .b-new{background:var(--blue-lt);color:#0a5fa0}.b-new::before{background:var(--blue)}
  .b-referred{background:var(--purple-lt);color:#4a3a9a}.b-referred::before{background:var(--purple)}
  .b-late{background:var(--red-lt);color:var(--red)}.b-late::before{background:var(--red)}
  .b-waiting{background:rgba(255,107,53,.10);color:#c0481a}.b-waiting::before{background:var(--orange)}
  .b-archived{background:#f0f3f8;color:var(--muted)}.b-archived::before{background:var(--muted)}

  .prio{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
  .prio-dot{width:6px;height:6px;border-radius:50%}
  .p-urgent{background:var(--red-lt);color:var(--red)}
  .p-vurgent{background:rgba(139,0,0,.1);color:#8b0000}
  .p-normal{background:var(--green-lt);color:#1a7a5e}
  .p-low{background:var(--bg);color:var(--muted)}

  .act-btns{display:flex;align-items:center;gap:6px}
  .act-btn{width:27px;height:27px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg);border:1px solid var(--border);cursor:pointer;font-size:13px;transition:background .14s,color .14s;text-decoration:none}
  .act-btn:hover{background:var(--teal-lt);color:var(--teal);border-color:rgba(0,176,155,.3)}

  .row4{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:0}
  .activity-list{list-style:none}
  .act-item{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid #f3f6fa}
  .act-item:last-child{border-bottom:none}
  .act-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
  .act-body{flex:1}
  .act-name{font-size:12.5px;font-weight:700;color:var(--text)}
  .act-desc{font-size:12px;color:var(--text-mid);margin-top:1px}
  .act-ref{color:var(--teal);font-weight:600}
  .act-time{font-size:11px;color:var(--muted);white-space:nowrap;margin-top:3px}

  .alert-card{background:rgba(231,76,60,.06);border:1px solid rgba(231,76,60,.18);border-radius:11px;padding:14px 16px;display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;transition:box-shadow .16s}
  .alert-card:hover{box-shadow:0 2px 12px rgba(231,76,60,.12)}
  .alert-card i{font-size:20px;color:var(--red);flex-shrink:0;margin-top:1px}
  .alert-card-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:3px}
  .alert-card-desc{font-size:11.5px;color:var(--text-mid)}
  .alert-ref{color:var(--red);font-weight:700;font-size:11.5px;margin-top:4px;display:block;text-decoration:none}
  .alert-time{font-size:11px;color:var(--muted);white-space:nowrap;margin-right:auto}

  @keyframes spin{to{transform:rotate(360deg)}}
  @media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.row2{grid-template-columns:1fr}}
  @media(max-width:700px){.stats-grid{grid-template-columns:1fr}.row4{grid-template-columns:1fr}}
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<!-- PAGE HEADER -->
<div class="pg-hdr">
  <div class="pg-hdr-l">
    <h1>لوحة التحكم</h1>
<?php
    function toArabicNumbers($number) {
        $western = ['0','1','2','3','4','5','6','7','8','9'];
        $arabic  = ['٠','١','٢','٣','٤','٥','٦','٧','٨','٩'];
        return str_replace($western, $arabic, $number);
    }
    $date = now()->locale('ar')->isoFormat('dddd، D MMMM YYYY');
    $time = now()->format('H:i');
?>
    <div class="sub">
      <?php echo e(toArabicNumbers($date)); ?>

      — آخر تحديث: <?php echo e(toArabicNumbers($time)); ?>

    </div>
  </div>
  <div class="pg-hdr-r">
    <a href="#" class="btn-p" onclick="this.querySelector('i').style.animation='spin .6s linear infinite';location.reload();return false;"><i class="las la-sync-alt"></i> تحديث</a>
    <!--<a href="<?php echo e(route('documents.create')); ?>" class="btn-p"><i class="las la-plus"></i> ارسال كتاب جديد</a>-->
  </div>
</div>

<!-- STAT CARDS ROW 1 -->
<div class="stats-grid">
  <div class="sc" style="--ac:var(--teal);--ic:var(--teal-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-envelope-open-text"></i></div>
      <span class="sc-badge up"><i class="las la-arrow-up"></i> اليوم</span>
    </div>
    <div class="sc-val"><?php echo e($incomingToday); ?></div>
    <div class="sc-lbl">الوارد اليوم</div>
    <div class="sc-desc">الكتب الواردة منذ منتصف الليل</div>
  </div>

  <div class="sc" style="--ac:var(--blue);--ic:var(--blue-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-paper-plane"></i></div>
      <span class="sc-badge up"><i class="las la-arrow-up"></i> اليوم</span>
    </div>
    <div class="sc-val"><?php echo e($outgoingToday); ?></div>
    <div class="sc-lbl">الصادر اليوم</div>
    <div class="sc-desc">كتاب صادر حتى الآن</div>
  </div>

  <div class="sc" style="--ac:var(--gold);--ic:var(--gold-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-clock"></i></div>
      <span class="sc-badge warn">قيد المتابعة</span>
    </div>
    <div class="sc-val"><?php echo e($pending); ?></div>
    <div class="sc-lbl">قيد الإجراء</div>
    <div class="sc-desc">تحتاج متابعة فعلية</div>
  </div>

  <div class="sc" style="--ac:var(--red);--ic:var(--red-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-exclamation-triangle"></i></div>
      <span class="sc-badge dn">متأخرة</span>
    </div>
    <div class="sc-val"><?php echo e($overdue); ?></div>
    <div class="sc-lbl">المتأخرة</div>
    <div class="sc-desc">تجاوزت 7 أيام بدون رد</div>
  </div>
</div>

<!-- STAT CARDS ROW 2 -->
<div class="stats-grid" style="margin-bottom:18px">
  <div class="sc" style="--ac:var(--purple);--ic:var(--purple-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-archive"></i></div>
      <span class="sc-badge up"><i class="las la-arrow-up"></i> الكل</span>
    </div>
    <div class="sc-val"><?php echo e(number_format($archived)); ?></div>
    <div class="sc-lbl">إجمالي المستندات</div>
    <div class="sc-desc">جميع المستندات في النظام</div>
  </div>

  <div class="sc" style="--ac:var(--teal);--ic:var(--teal-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-envelope"></i></div>
      <span class="sc-badge up"><i class="las la-arrow-up"></i> الشهر</span>
    </div>
    <div class="sc-val"><?php echo e($incomingMonth); ?></div>
    <div class="sc-lbl">الوارد هذا الشهر</div>
    <div class="sc-desc"><?php echo e(now()->locale('ar')->isoFormat('MMMM YYYY')); ?></div>
  </div>

  <div class="sc" style="--ac:var(--green);--ic:var(--green-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-check-circle"></i></div>
      <span class="sc-badge up"><i class="las la-arrow-up"></i> منجز</span>
    </div>
    <div class="sc-val"><?php echo e($completedMonth); ?></div>
    <div class="sc-lbl">المنجزة هذا الشهر</div>
    <div class="sc-desc">من إجمالي <?php echo e($incomingMonth); ?> معاملة</div>
  </div>

  <div class="sc" style="--ac:var(--orange);--ic:var(--orange-lt)">
    <div class="sc-top">
      <div class="sc-icon"><i class="las la-bolt"></i></div>
      <span class="sc-badge warn">عاجل</span>
    </div>
    <div class="sc-val"><?php echo e($urgent); ?></div>
    <div class="sc-lbl">العاجلة</div>
    <div class="sc-desc">وردت خلال آخر 24 ساعة</div>
  </div>
</div>

<!-- ROW 2: Donut + Line Chart -->
<div class="row2">
  <div class="card">
    <div class="card-hdr">
      <div>
        <div class="card-title">توزيع الحالات</div>
        <div class="card-sub">جميع المعاملات النشطة</div>
      </div>
    </div>
    <div class="card-body">
      <div class="donut-wrap">
        <canvas id="donutChart" class="donut-canvas"></canvas>
        <div class="donut-legend" id="donutLegend"></div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-hdr">
      <div>
        <div class="card-title">حركة المراسلات</div>
        <div class="card-sub">مقارنة الوارد والصادر</div>
      </div>
      <div class="tab-sw">
        <button class="tab-btn active" onclick="switchLine(this,'7d')">7 أيام</button>
        <button class="tab-btn" onclick="switchLine(this,'30d')">30 يوم</button>
      </div>
    </div>
    <div class="card-body">
      <div class="chart-wrap">
        <canvas id="lineChart"></canvas>
      </div>
    </div>
  </div>
</div>

<!-- ROW 3: Bar Chart -->
<div class="row3">
  <div class="card">
    <div class="card-hdr">
      <div>
        <div class="card-title">حركة المراسلات حسب القسم</div>
        <div class="card-sub">هذا الشهر — <?php echo e(now()->locale('ar')->isoFormat('MMMM YYYY')); ?></div>
      </div>
    </div>
    <div class="card-body">
      <div class="bar-wrap">
        <canvas id="barChart"></canvas>
      </div>
    </div>
  </div>
</div>

<!-- TABLE -->
<div class="tbl-wrap">
  <div class="tbl-hdr">
    <div>
      <div class="card-title">آخر الكتب المسجلة</div>
      <div class="card-sub">آخر 8 كتب مضافة للنظام</div>
    </div>
    <a href="<?php echo e(route('documents.index')); ?>" class="view-all">عرض الكل</a>
  </div>
  <div style="overflow-x:auto">
    <table class="data-table">
      <thead>
        <tr>
          <th>رقم الكتاب</th>
          <th>الجهة المرسِلة</th>
          <th>الموضوع</th>
          <th>تاريخ الورود</th>
          <th>الحالة</th>
          <th>الأولوية</th>
          <th>المستلم</th>
          <th>إجراءات</th>
        </tr>
      </thead>
      <tbody>
        <?php
          $statusMap = ['pending'=>['قيد الإجراء','b-pending'],'done'=>['مكتمل','b-done'],'new'=>['جديد','b-new'],'referred'=>['محال','b-referred'],'late'=>['متأخر','b-late'],'waiting'=>['بانتظار الرد','b-waiting'],'archived'=>['مؤرشف','b-archived']];
          $prioMap   = ['urgent'=>['عاجل','p-urgent'],'vurgent'=>['عاجل جداً','p-vurgent'],'normal'=>['اعتيادي','p-normal'],'low'=>['منخفض','p-low']];
        ?>
        <?php $__empty_1 = true; $__currentLoopData = $recentLetters; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <tr>
          <td><a href="<?php echo e(route('documents.show', $r['id'])); ?>" class="ref-link"><?php echo e($r['ref']); ?></a></td>
          <td><?php echo e($r['from']); ?></td>
          <td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="<?php echo e($r['subject']); ?>"><?php echo e($r['subject']); ?></td>
          <td><?php echo e($r['date']); ?></td>
          <td><span class="badge <?php echo e($statusMap[$r['status']][1] ?? 'b-pending'); ?>"><?php echo e($statusMap[$r['status']][0] ?? '—'); ?></span></td>
          <td>
            <span class="prio <?php echo e($prioMap[$r['prio']][1] ?? 'p-normal'); ?>">
              <span class="prio-dot" style="background:currentColor;opacity:.7;border-radius:50%;width:6px;height:6px;display:inline-block"></span>
              <?php echo e($prioMap[$r['prio']][0] ?? '—'); ?>

            </span>
          </td>
          <td><?php echo e($r['user']); ?></td>
          <td>
            <div class="act-btns">
              <a href="<?php echo e(route('documents.show', $r['id'])); ?>" class="act-btn" title="عرض"><i class="las la-eye"></i></a>
            </div>
          </td>
        </tr>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <tr>
          <td colspan="8" style="text-align:center;padding:30px;color:var(--muted)">
            <i class="las la-file-alt" style="font-size:28px;display:block;margin-bottom:6px;color:#d0dce8"></i>
            لا توجد مستندات بعد
          </td>
        </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</div>

<!-- ROW 4: Activity + Alerts -->
<div class="row4">

  <!-- النشاطات الأخيرة -->
  <div class="card" style="animation-delay:.5s">
    <div class="card-hdr">
      <div>
        <div class="card-title">النشاطات الأخيرة</div>
        <div class="card-sub">آخر التحركات في النظام</div>
      </div>
      <span style="font-size:11px;color:var(--muted)">تحديث مستمر</span>
    </div>
    <div class="card-body" style="padding:0 18px">
      <ul class="activity-list">
        <?php $__empty_1 = true; $__currentLoopData = $recentActivity; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $a): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <li class="act-item">
          <div class="act-av" style="background:<?php echo e($a['color']); ?>"><?php echo e(mb_substr($a['name'], 0, 1)); ?></div>
          <div class="act-body">
            <div class="act-name"><?php echo e($a['name']); ?></div>
            <div class="act-desc"><?php echo e($a['action']); ?> <span class="act-ref"><?php echo e($a['ref']); ?></span> — <?php echo e($a['from']); ?></div>
          </div>
          <div class="act-time"><?php echo e($a['time']); ?></div>
        </li>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <li style="text-align:center;padding:20px;color:var(--muted);font-size:12px">لا توجد نشاطات بعد</li>
        <?php endif; ?>
      </ul>
    </div>
  </div>

  <!-- التنبيهات النشطة -->
  <div class="card" style="animation-delay:.55s">
    <div class="card-hdr">
      <div style="display:flex;align-items:center;gap:8px">
        <span style="width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;animation:pulse 1.5s infinite"></span>
        <div class="card-title">التنبيهات النشطة</div>
      </div>
      <span style="background:var(--red-lt);color:var(--red);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700"><?php echo e($alertsCount); ?></span>
    </div>
    <div class="card-body">
      <?php $__empty_1 = true; $__currentLoopData = $activeAlerts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $al): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
      <div class="alert-card">
        <i class="las la-exclamation-triangle"></i>
        <div style="flex:1">
          <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px">
            <div class="alert-card-title"><?php echo e($al['title']); ?></div>
            <span class="alert-time"><?php echo e($al['time']); ?></span>
          </div>
          <div class="alert-card-desc"><?php echo e($al['desc']); ?></div>
          <a href="<?php echo e(route('documents.show', $al['id'])); ?>" class="alert-ref"><?php echo e($al['ref']); ?> ←</a>
        </div>
      </div>
      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
      <div style="text-align:center;padding:24px;color:var(--muted)">
        <i class="las la-check-circle" style="font-size:32px;color:var(--green);display:block;margin-bottom:8px"></i>
        <span style="font-size:13px">لا توجد تنبيهات نشطة 🎉</span>
      </div>
      <?php endif; ?>
    </div>
  </div>

</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script>
// ── Donut — ديناميك من Controller ──
const donutData = {
  labels: <?php echo json_encode($donutData['labels'], 15, 512) ?>,
  values: <?php echo json_encode($donutData['values'], 15, 512) ?>,
  colors: <?php echo json_encode($donutData['colors'], 15, 512) ?>,
};
new Chart(document.getElementById('donutChart'),{
  type:'doughnut',
  data:{labels:donutData.labels,datasets:[{data:donutData.values,backgroundColor:donutData.colors,borderWidth:0,hoverOffset:6}]},
  options:{
    responsive:true,maintainAspectRatio:true,cutout:'68%',
    plugins:{legend:{display:false},tooltip:{rtl:true,titleFont:{family:'Cairo'},bodyFont:{family:'Cairo'},backgroundColor:'#fff',titleColor:'#2c3e50',bodyColor:'#546e7a',borderColor:'#e0e7ef',borderWidth:1,padding:10}},
    animation:{animateRotate:true,duration:800}
  }
});
const leg=document.getElementById('donutLegend');
donutData.labels.forEach((l,i)=>{
  leg.innerHTML+=`<div class="dl-item"><div class="dl-lbl"><div class="dl-dot" style="background:${donutData.colors[i]}"></div>${l}</div><div class="dl-val">${donutData.values[i]}</div></div>`;
});

// ── Line Chart — ديناميك من Controller ──
const ld7  = { labels: <?php echo json_encode($lineData['7d']['labels'], 15, 512) ?>,  inc: <?php echo json_encode($lineData['7d']['inc'], 15, 512) ?>,  out: <?php echo json_encode($lineData['7d']['out'], 15, 512) ?>  };
const ld30 = { labels: <?php echo json_encode($lineData['30d']['labels'], 15, 512) ?>, inc: <?php echo json_encode($lineData['30d']['inc'], 15, 512) ?>, out: <?php echo json_encode($lineData['30d']['out'], 15, 512) ?> };

const lCtx=document.getElementById('lineChart').getContext('2d');
const gT=lCtx.createLinearGradient(0,0,0,240);gT.addColorStop(0,'rgba(0,176,155,.18)');gT.addColorStop(1,'rgba(0,176,155,0)');
const gB=lCtx.createLinearGradient(0,0,0,240);gB.addColorStop(0,'rgba(26,143,255,.14)');gB.addColorStop(1,'rgba(26,143,255,0)');
const lineChart=new Chart(lCtx,{
  type:'line',
  data:{
    labels:ld7.labels,
    datasets:[
      {label:'وارد',data:ld7.inc,borderColor:'#00b09b',backgroundColor:gT,borderWidth:2.5,fill:true,tension:.4,pointBackgroundColor:'#00b09b',pointRadius:4,pointHoverRadius:7},
      {label:'صادر',data:ld7.out,borderColor:'#1a8fff',backgroundColor:gB,borderWidth:2.5,fill:true,tension:.4,pointBackgroundColor:'#1a8fff',pointRadius:4,pointHoverRadius:7}
    ]
  },
  options:{
    responsive:true,maintainAspectRatio:false,
    plugins:{
      legend:{labels:{color:'#546e7a',font:{family:'Cairo',size:12},usePointStyle:true,pointStyleWidth:8}},
      tooltip:{rtl:true,backgroundColor:'#fff',titleColor:'#2c3e50',bodyColor:'#546e7a',borderColor:'#e0e7ef',borderWidth:1,titleFont:{family:'Cairo',size:13,weight:'700'},bodyFont:{family:'Cairo',size:12},padding:12}
    },
    scales:{
      x:{grid:{color:'#f3f6fa',drawTicks:false},ticks:{color:'#90a4ae',font:{family:'Cairo',size:11}},border:{display:false}},
      y:{grid:{color:'#f3f6fa',drawTicks:false},ticks:{color:'#90a4ae',font:{family:'Cairo',size:11}},border:{display:false}}
    }
  }
});
function switchLine(btn,range){
  document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  const d=range==='7d'?ld7:ld30;
  lineChart.data.labels=d.labels;
  lineChart.data.datasets[0].data=d.inc;
  lineChart.data.datasets[1].data=d.out;
  lineChart.update();
}

// ── Bar Chart — ديناميك من Controller ──
new Chart(document.getElementById('barChart'),{
  type:'bar',
  data:{
    labels: <?php echo json_encode($barData['labels'], 15, 512) ?>,
    datasets:[
      {label:'وارد', data: <?php echo json_encode($barData['inc'], 15, 512) ?>, backgroundColor:'#00b09b',borderRadius:5,hoverBackgroundColor:'#008f7a'},
      {label:'صادر', data: <?php echo json_encode($barData['out'], 15, 512) ?>, backgroundColor:'#7c6fcd',borderRadius:5,hoverBackgroundColor:'#5a4db0'}
    ]
  },
  options:{
    responsive:true,maintainAspectRatio:false,
    plugins:{
      legend:{labels:{color:'#546e7a',font:{family:'Cairo',size:12},usePointStyle:true,pointStyleWidth:8}},
      tooltip:{rtl:true,backgroundColor:'#fff',titleColor:'#2c3e50',bodyColor:'#546e7a',borderColor:'#e0e7ef',borderWidth:1,titleFont:{family:'Cairo',size:13,weight:'700'},bodyFont:{family:'Cairo',size:12},padding:12}
    },
    scales:{
      x:{grid:{display:false},ticks:{color:'#90a4ae',font:{family:'Cairo',size:11}},border:{display:false}},
      y:{grid:{color:'#f3f6fa',drawTicks:false},ticks:{color:'#90a4ae',font:{family:'Cairo',size:11}},border:{display:false}}
    }
  }
});

const style=document.createElement('style');
style.textContent='@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}';
document.head.appendChild(style);
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/gamcoiraq/sctl.gamcoiraq.com/resources/views/admin/index.blade.php ENDPATH**/ ?>