<?php
declare(strict_types=1);

require_once __DIR__ . '/_auth.php';
financial_require_access();
if (!function_exists('financial_branch_id')) {
    function financial_branch_id(): int
    {
        if (session_status() !== PHP_SESSION_ACTIVE) {
            session_start();
        }

        if (isset($_GET['branch_id'])) {
            $branchId = (int)$_GET['branch_id'];

            if (in_array($branchId, [1, 2], true)) {
                $_SESSION['financial_branch_id'] = $branchId;
            }
        }

        return (int)($_SESSION['financial_branch_id'] ?? 1);
    }
}

if (!function_exists('financial_branch_name')) {
    function financial_branch_name(): string
    {
        $branchId = financial_branch_id();

        return match ($branchId) {
            2 => 'دبي',
            1 => 'أبوظبي',
            default => 'غير معروف',
        };
    }
}
if (!function_exists('financial_page_start')) {
    function financial_page_start(string $title): void
    {
        $name = trim((string)($_SESSION['name'] ?? $_SESSION['username'] ?? 'مستخدم'));
        $currentFile = basename($_SERVER['PHP_SELF'] ?? '');

        $displayName = $name !== '' ? $name : 'مستخدم النظام';
        ?>
        <!doctype html>
        <html lang="ar" dir="rtl">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title><?= financial_h($title) ?></title>
          <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap" rel="stylesheet">
          <style>
/* إصلاح انكماش جداول الداشبورد */
.panel .table-wrap {
  width: 100% !important;
  overflow-x: visible !important;
}

.panel .table-wrap table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.panel .table-wrap th,
.panel .table-wrap td {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  vertical-align: middle !important;
  padding: 14px 10px !important;
}

/* أعمدة آخر المدخولات */
.panel table th:nth-child(1),
.panel table td:nth-child(1) {
  width: 12%;
}

.panel table th:nth-child(2),
.panel table td:nth-child(2) {
  width: 19%;
}

.panel table th:nth-child(3),
.panel table td:nth-child(3) {
  width: 17%;
}

.panel table th:nth-child(4),
.panel table td:nth-child(4) {
  width: 14%;
}

.panel table th:nth-child(5),
.panel table td:nth-child(5) {
  width: 12%;
}

.panel table th:nth-child(6),
.panel table td:nth-child(6) {
  width: 10%;
}

.panel table th:nth-child(7),
.panel table td:nth-child(7) {
  width: 16%;
}

/* أزرار الإجراءات */
.panel .actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

.panel .actions form {
  margin: 0 !important;
  display: inline-flex !important;
}

.panel .actions .btn,
.panel .actions button.btn {
  min-width: 62px !important;
  height: 38px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

/* لا تجعل زر إضافة مدخول يتأثر */
.panel > .panel-body > .actions {
  justify-content: flex-start !important;
}

@media (max-width: 900px) {
  .panel .table-wrap {
    overflow-x: auto !important;
  }

  .panel .table-wrap table {
    min-width: 850px !important;
    table-layout: auto !important;
  }

  .panel .table-wrap th,
  .panel .table-wrap td {
    white-space: nowrap !important;
  }
}
</style>
<style>
  :root{
    --bg1:#07171d;
    --bg2:#0b2633;
    --bg3:#021d23;

    --card:rgba(255,255,255,.05);
    --card-2:rgba(255,255,255,.04);
    --line:rgba(255,255,255,.08);
    --line-soft:rgba(255,255,255,.05);

    --text:rgba(255,255,255,.94);
    --muted:rgba(255,255,255,.68);

    --gold:#d4af37;
    --gold-2:#ffd76a;
    --gold-soft:rgba(212,175,55,.14);

    --danger:#f87171;
    --danger-soft:rgba(248,113,113,.12);

    --success:#34d399;
    --success-soft:rgba(52,211,153,.12);

    --blue:#60a5fa;
    --blue-soft:rgba(96,165,250,.12);

    --shadow:0 18px 40px rgba(0,0,0,.16);
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box;
  }

  html,body{
    margin:0;
    padding:0;
  }

  body{
    font-family:"Tajawal",sans-serif;
    background:
      radial-gradient(circle at 20% 20%, rgba(10,77,87,.85), transparent 40%),
      radial-gradient(circle at 80% 80%, rgba(13,106,122,.55), transparent 40%),
      var(--bg3);
    color:var(--text);
  }

  a{
    text-decoration:none;
    color:inherit;
  }

  .wrap{
    max-width:1400px;
    margin:0 auto;
    padding:22px;
  }

  .top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
    flex-wrap:wrap;
  }

  .title-wrap{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .title{
    font-size:34px;
    font-weight:900;
    letter-spacing:-.5px;
    line-height:1.15;
    margin:0;
    color:#fff;
  }

  .welcome-line{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .welcome-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(212,175,55,.10);
    border:1px solid rgba(212,175,55,.18);
    color:#ffd76a;
    font-size:13px;
    font-weight:900;
    box-shadow:0 8px 18px rgba(212,175,55,.08);
  }

  .sub{
    color:var(--muted);
    font-size:14px;
    margin:0;
    line-height:1.8;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:11px 16px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    cursor:pointer;
    font:inherit;
    font-weight:800;
    color:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    transition:.18s ease;
  }

  .btn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.08);
  }

  .btn.primary{
    background:linear-gradient(135deg,#ffd76a,#d4af37);
    color:#1d1600;
    border-color:rgba(212,175,55,.25);
    box-shadow:0 12px 24px rgba(212,175,55,.18);
  }

  .btn.primary:hover{
    box-shadow:0 16px 28px rgba(212,175,55,.24);
  }

  .btn.soft{
    background:rgba(255,255,255,.05);
    color:#fff;
  }

  /* ===== Hero ===== */
  .finance-hero{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    border:1px solid var(--line);
    background:
      radial-gradient(circle at 85% 20%, rgba(255,255,255,.10), transparent 18%),
      radial-gradient(circle at 15% 80%, rgba(212,175,55,.14), transparent 24%),
      linear-gradient(135deg,#0b3c47 0%,#0f4f66 55%,#0b2230 100%);
    box-shadow:
      0 18px 40px rgba(15,35,48,.18),
      inset 0 1px 0 rgba(255,255,255,.08);
    color:#fff;
    margin-bottom:18px;
    min-height:300px;
  }

  .finance-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,.05), transparent 32%, transparent 68%, rgba(255,255,255,.03));
    pointer-events:none;
  }

  .hero-track{
    position:relative;
    height:300px;
  }

  .hero-slide{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1.3fr .9fr;
    gap:18px;
    align-items:center;
    padding:28px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease, visibility .35s ease;
  }

  .hero-slide.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .hero-copy{
    position:relative;
    z-index:1;
    min-width:0;
  }

  .hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    font-size:13px;
    font-weight:800;
    margin-bottom:14px;
  }

  .hero-title{
    margin:0;
    font-size:32px;
    line-height:1.28;
    font-weight:900;
    letter-spacing:-.4px;
    max-width:700px;
    color:#fff;
  }

  .hero-desc{
    margin:14px 0 0;
    font-size:15px;
    line-height:1.9;
    color:rgba(255,255,255,.88);
    max-width:680px;
  }

  .hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
  }

  .hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 16px;
    border-radius:14px;
    font-weight:900;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.10);
    color:#fff;
    backdrop-filter:blur(6px);
    transition:.18s ease;
  }

  .hero-btn:hover{
    transform:translateY(-1px);
  }

  .hero-btn.primary{
    background:linear-gradient(135deg,#ffd76a,#d4af37);
    color:#1d1600;
    border-color:rgba(212,175,55,.30);
  }

  .hero-btn.home{
    background:rgba(255,255,255,.08);
    color:#fff;
    border-color:rgba(255,255,255,.20);
  }

  .hero-visual{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    z-index:1;
    align-self:stretch;
  }

  .mini-stat{
    border-radius:20px;
    padding:16px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    min-height:92px;
  }

  .mini-stat .k{
    font-size:12px;
    color:rgba(255,255,255,.78);
    font-weight:700;
  }

  .mini-stat .v{
    font-size:24px;
    font-weight:900;
    margin-top:8px;
    color:#fff;
  }

  .mini-stat.wide{
    grid-column:1 / -1;
  }

  .hero-dots{
    position:absolute;
    left:20px;
    bottom:18px;
    display:flex;
    gap:8px;
    z-index:3;
  }

  .hero-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    border:none;
    cursor:pointer;
    padding:0;
  }

  .hero-dot.active{
    background:#ffd76a;
    transform:scale(1.12);
  }

  /* ===== Layout ===== */
  .layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:18px;
    align-items:start;
  }

  .sidebar{
    position:sticky;
    top:18px;
  }

  .side-unified{
    overflow:hidden;
    border-radius:24px;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    backdrop-filter:blur(12px);
  }

  .side-top{
    position:relative;
    padding:20px 18px 18px;
    color:#fff;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 22%),
      linear-gradient(135deg,#0f766e 0%,#0f4f66 52%,#0b2230 100%);
  }

  .side-top::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(140deg, rgba(255,255,255,.06), transparent 45%, rgba(255,255,255,.03));
    pointer-events:none;
  }

  .side-top-inner{
    position:relative;
    z-index:1;
  }

  .side-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.16);
    font-size:12px;
    font-weight:800;
    margin-bottom:12px;
  }

  .side-user{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }

  .side-avatar{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.18);
    font-size:18px;
    font-weight:900;
    flex-shrink:0;
  }

  .side-user-meta{
    min-width:0;
  }

  .side-user-name{
    font-size:20px;
    font-weight:900;
    line-height:1.2;
    margin:0;
    color:#fff;
  }

  .side-user-sub{
    margin-top:4px;
    font-size:13px;
    color:rgba(255,255,255,.82);
  }

  .side-desc{
    font-size:14px;
    line-height:1.8;
    color:rgba(255,255,255,.90);
    margin:0;
  }

  .side-mini-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px;
  }

  .side-mini-card{
    border-radius:16px;
    padding:12px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
  }

  .side-mini-card .k{
    font-size:11px;
    color:rgba(255,255,255,.78);
    font-weight:700;
  }

  .side-mini-card .v{
    font-size:18px;
    font-weight:900;
    margin-top:6px;
    color:#fff;
  }

  .side-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px;
    background:transparent;
  }

  .side-nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:54px;
    padding:13px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    font-weight:800;
    color:#fff;
    transition:.18s ease;
  }

  .side-nav a:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.07);
    box-shadow:0 10px 18px rgba(0,0,0,.08);
  }

  .side-nav a.active{
    background:linear-gradient(135deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
    color:#fff;
    border-color:rgba(212,175,55,.30);
    box-shadow:0 12px 24px rgba(212,175,55,.12);
  }

  .side-link-text{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }

  .side-link-title{
    font-size:15px;
    font-weight:900;
    line-height:1.2;
  }

  .side-link-sub{
    font-size:12px;
    opacity:.78;
    font-weight:700;
  }

  .side-pill{
    font-size:11px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid var(--line);
    white-space:nowrap;
    flex-shrink:0;
  }

  .side-nav a.active .side-pill{
    background:rgba(255,255,255,.14);
    color:#fff7d1;
    border-color:rgba(255,255,255,.14);
  }

  .content{
    min-width:0;
  }

  .cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }

  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow);
    min-height:116px;
    backdrop-filter:blur(12px);
    color:#fff;
  }

  .card .k{
    font-size:13px;
    color:var(--muted);
    font-weight:700;
  }

  .card .v{
    font-size:28px;
    font-weight:900;
    margin-top:8px;
    line-height:1.25;
    color:#ffd76a;
  }

  .panel{
    margin-top:16px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    overflow:hidden;
    backdrop-filter:blur(12px);
  }

  .panel-head{
    padding:16px 18px;
    border-bottom:1px solid var(--line);
    font-weight:900;
    color:#fff;
    background:rgba(255,255,255,.03);
  }

  .panel-body{
    padding:18px;
    color:#fff;
  }

  .table-wrap{
    overflow:auto;
  }

  table{
    width:100%;
    border-collapse:collapse;
  }

  th,td{
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    text-align:right;
    white-space:nowrap;
  }

  th{
    background:rgba(255,255,255,.04);
    font-size:13px;
    color:rgba(255,255,255,.72);
  }

  td{
    color:#fff;
  }

  .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .field label{
    font-weight:800;
    font-size:14px;
    color:#fff;
  }

  .input,.select,.textarea{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    font:inherit;
    color:#fff;
    outline:none;
  }

  .input::placeholder,
  .textarea::placeholder{
    color:rgba(255,255,255,.45);
  }

  .select option{
    background:#0b1f26;
    color:#fff;
  }

  .input:focus,
  .select:focus,
  .textarea:focus{
    border-color:rgba(212,175,55,.45);
    box-shadow:0 0 0 4px rgba(212,175,55,.12);
  }

  .textarea{
    min-height:100px;
    resize:vertical;
  }

  .actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  .msg{
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:12px;
    font-weight:700;
  }

  .ok{
    background:rgba(6,95,70,.18);
    color:#d1fae5;
    border:1px solid rgba(52,211,153,.24);
  }

  .err{
    background:rgba(127,29,29,.18);
    color:#fecaca;
    border:1px solid rgba(248,113,113,.24);
  }

  @media (max-width: 1180px){
    .cards{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hero-track{
      height:340px;
    }

    .hero-slide{
      grid-template-columns:1fr;
    }

    .hero-title{
      font-size:28px;
    }
  }

  @media (max-width: 980px){
    .layout{
      grid-template-columns:1fr;
    }

    .sidebar{
      position:relative;
      top:auto;
    }
  }

  @media (max-width: 700px){
    .wrap{
      padding:14px;
    }

    .cards,
    .form-grid{
      grid-template-columns:1fr;
    }

    .title{
      font-size:25px;
    }

    .hero-track{
      height:440px;
    }

    .hero-slide{
      padding:20px;
    }

    .hero-title{
      font-size:24px;
    }

    .hero-desc{
      font-size:14px;
    }

    .hero-visual{
      grid-template-columns:1fr;
    }

    .hero-dots{
      left:14px;
      bottom:14px;
    }

    .side-mini-stats{
      grid-template-columns:1fr 1fr;
    }
  }
  .financial-main,
.main-content,
.page-content,
.content,
.panel,
.panel-body {
  width: 100% !important;
  max-width: none !important;
}

.panel {
  overflow: visible !important;
}

.table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}

.table-wrap table {
  width: 100% !important;
  min-width: 1150px !important;
  table-layout: auto !important;
}

.table-wrap th,
.table-wrap td {
  white-space: nowrap !important;
  text-align: right !important;
  vertical-align: middle !important;
}

.table-wrap td:nth-child(7),
.table-wrap th:nth-child(7) {
  min-width: 210px !important;
}

.table-wrap .actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

.table-wrap .actions form {
  display: inline-flex !important;
  margin: 0 !important;
}

.table-wrap .btn {
  min-width: 74px !important;
  height: 42px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 900px) {
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    min-width: 1050px !important;
  }
}

</style>
        </head>
        <body>
          <div class="wrap">

            <div class="top">
           
              <div class="title-wrap">
                <h1 class="title"><?= financial_h($title) ?></h1>
                <div class="welcome-line">
                  <span class="welcome-badge">مرحباً <?= financial_h($displayName) ?></span>
                  <p class="sub">إدارة احترافية للمدخولات والمصروفات والتقارير والجرد المالي</p>
                </div>
              </div>
            </div>

            <section class="finance-hero" aria-label="واجهة الإدارة المالية">

              <div class="hero-track" id="financeHeroTrack">
                <div class="hero-slide active">
                  <div class="hero-copy">
                    <div class="hero-kicker">إدارة مالية متقدمة</div>
                    <h2 class="hero-title">تحكم كامل بالمدخولات والمصروفات والتقارير المالية</h2>
                    <p class="hero-desc">
                      راقب الأداء المالي لمجموعة حمدان القانونية من مكان واحد، مع تنظيم يومي للمدخولات،
                      متابعة دقيقة للمصروفات، وإصدار تقارير وجردات نصف سنوية وسنوية بصورة احترافية.
                    </p>
                    <div class="hero-actions">
                      <a class="hero-btn primary" href="<?= financial_h(financial_u('income.php')) ?>">إضافة مدخول</a>
                      <a class="hero-btn" href="<?= financial_h(financial_u('expenses.php')) ?>">إضافة مصروف</a>
                      <a class="hero-btn home" href="<?= financial_h(app_url('dashboard.php')) ?>">العودة للرئيسية</a>
                    </div>
                  </div>

                  <div class="hero-visual">
                    <div class="mini-stat">
                      <div class="k">إدارة السيولة</div>
                      <div class="v">100%</div>
                    </div>
                    <div class="mini-stat">
                      <div class="k">تحكم بالمصاريف</div>
                      <div class="v">دقيق</div>
                    </div>
                    <div class="mini-stat wide">
                      <div class="k">تقارير مالية موحدة</div>
                      <div class="v">يومي • شهري • سنوي</div>
                    </div>
                  </div>
                </div>

                <div class="hero-slide">
                  <div class="hero-copy">
                    <div class="hero-kicker">تحليل وربحية</div>
                    <h2 class="hero-title">رؤية أوضح لصافي الربح واتجاهات الأداء المالي</h2>
                    <p class="hero-desc">
                      قارن بين الإيرادات والمصروفات بسهولة، وحدد أثر كل حركة مالية على الربحية،
                      مع عرض منظم يساعد الإدارة على اتخاذ قرارات أسرع وأكثر دقة.
                    </p>
                    <div class="hero-actions">
                      <a class="hero-btn primary" href="<?= financial_h(financial_u('reports.php')) ?>">عرض التقارير</a>
                      <a class="hero-btn" href="<?= financial_h(financial_u('yearly.php')) ?>">الجرد السنوي</a>
                      <a class="hero-btn home" href="<?= financial_h(app_url('dashboard.php')) ?>">العودة للرئيسية</a>
                    </div>
                  </div>

                  <div class="hero-visual">
                    <div class="mini-stat">
                      <div class="k">صافي الربح</div>
                      <div class="v">مباشر</div>
                    </div>
                    <div class="mini-stat">
                      <div class="k">المؤشرات</div>
                      <div class="v">ذكية</div>
                    </div>
                    <div class="mini-stat wide">
                      <div class="k">المراجعة المالية</div>
                      <div class="v">مستمرة ومنظمة</div>
                    </div>
                  </div>
                </div>

                <div class="hero-slide">
                  <div class="hero-copy">
                    <div class="hero-kicker">جرد ومراجعة</div>
                    <h2 class="hero-title">جرد نصف سنوي وسنوي يعكس الصورة المالية الكاملة</h2>
                    <p class="hero-desc">
                      احفظ ملخصات الفترات المالية المهمة داخل النظام، وارجع إليها في أي وقت
                      لمراجعة الأداء، المقارنة بين الفترات، وتوثيق النتائج للإدارة العليا.
                    </p>
                    <div class="hero-actions">
                      <a class="hero-btn primary" href="<?= financial_h(financial_u('half_yearly.php')) ?>">الجرد النصف سنوي</a>
                      <a class="hero-btn" href="<?= financial_h(financial_u('yearly.php')) ?>">الجرد السنوي</a>
                      <a class="hero-btn home" href="<?= financial_h(app_url('dashboard.php')) ?>">العودة للرئيسية</a>
                    </div>
                  </div>

                  <div class="hero-visual">
                    <div class="mini-stat">
                      <div class="k">توثيق الفترات</div>
                      <div class="v">محفوظ</div>
                    </div>
                    <div class="mini-stat">
                      <div class="k">مراجعة الإدارة</div>
                      <div class="v">جاهزة</div>
                    </div>
                    <div class="mini-stat wide">
                      <div class="k">مخرجات احترافية</div>
                      <div class="v">تقارير • جرد • متابعة</div>
                    </div>
                  </div>
                </div>

                <div class="hero-dots" id="financeHeroDots">
                  <button type="button" class="hero-dot active" aria-label="الشريحة الأولى"></button>
                  <button type="button" class="hero-dot" aria-label="الشريحة الثانية"></button>
                  <button type="button" class="hero-dot" aria-label="الشريحة الثالثة"></button>
                </div>
              </div>
            </section>

            <div class="layout">
              <aside class="sidebar">
                <div class="side-unified">
                  <div class="side-top">
                    <div class="side-top-inner">
                      <div class="side-label">بوابة الإدارة المالية</div>

                      <div class="side-user">
                        <div class="side-avatar">هـ</div>
                        <div class="side-user-meta">
                          <h2 class="side-user-name"><?= financial_h($displayName) ?></h2>
                          <div class="side-user-sub">إدارة ومتابعة مالية متكاملة</div>
                        </div>
                      </div>

                      <p class="side-desc">
                        منصة موحدة لمتابعة الإيرادات والمصروفات والتقارير والجرد المالي بأسلوب احترافي ومنظم.
                      </p>

                      <div class="side-mini-stats">
                        <div class="side-mini-card">
                          <div class="k">المدخولات</div>
                          <div class="v">إيرادات</div>
                        </div>
                        <div class="side-mini-card">
                          <div class="k">المصروفات</div>
                          <div class="v">نفقات</div>
                        </div>
                        <div class="side-mini-card">
                          <div class="k">التحليل</div>
                          <div class="v">تقارير</div>
                        </div>
                        <div class="side-mini-card">
                          <div class="k">المراجعة</div>
                          <div class="v">جرد</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <nav class="side-nav">
                    <a class="<?= $currentFile === 'dashboard.php' ? 'active' : '' ?>" href="<?= financial_h(financial_u('dashboard.php')) ?>">
                      <span class="side-link-text">
                        <span class="side-link-title">لوحة المالية</span>
                        <span class="side-link-sub">نظرة عامة على الأداء</span>
                      </span>
                      <span class="side-pill">الرئيسية</span>
                    </a>

                    <a class="<?= $currentFile === 'income.php' ? 'active' : '' ?>" href="<?= financial_h(financial_u('income.php')) ?>">
                      <span class="side-link-text">
                        <span class="side-link-title">المدخولات</span>
                        <span class="side-link-sub">إدارة الإيرادات اليومية</span>
                      </span>
                      <span class="side-pill">إيرادات</span>
                    </a>

                    <a class="<?= $currentFile === 'expenses.php' ? 'active' : '' ?>" href="<?= financial_h(financial_u('expenses.php')) ?>">
                      <span class="side-link-text">
                        <span class="side-link-title">المصروفات</span>
                        <span class="side-link-sub">تتبع النفقات والمصاريف</span>
                      </span>
                      <span class="side-pill">نفقات</span>
                    </a>
 <a
  class="<?= $currentFile === 'import_files.php' ? 'active' : '' ?>"
  href="/HLG-Justice-Hub/financial/import_files.php"
>
  <span class="side-link-text">
    <span class="side-link-title">الكشوفات المالية</span>
    <span class="side-link-sub">استيراد ملفات Excel و CSV</span>
  </span>

  <span class="side-pill">ملفات</span>
</a>
                    <a class="<?= $currentFile === 'reports.php' ? 'active' : '' ?>" href="<?= financial_h(financial_u('reports.php')) ?>">
                      <span class="side-link-text">
                        <span class="side-link-title">التقارير</span>
                        <span class="side-link-sub">تحليلات ومؤشرات مالية</span>
                      </span>
                      <span class="side-pill">تقارير</span>
                    </a>

                    <a class="<?= $currentFile === 'half_yearly.php' ? 'active' : '' ?>" href="<?= financial_h(financial_u('half_yearly.php')) ?>">
                      <span class="side-link-text">
                        <span class="side-link-title">الجرد النصف سنوي</span>
                        <span class="side-link-sub">مراجعة نصف سنوية منظمة</span>
                      </span>
                      <span class="side-pill">6 أشهر</span>
                    </a>

                    <a class="<?= $currentFile === 'yearly.php' ? 'active' : '' ?>" href="<?= financial_h(financial_u('yearly.php')) ?>">
                      <span class="side-link-text">
                        <span class="side-link-title">الجرد السنوي</span>
                        <span class="side-link-sub">ملخص سنوي شامل</span>
                      </span>
                      <span class="side-pill">سنوي</span>
                    </a>
                  </nav>
                </div>
              </aside>

              <section class="content">

            <script>
              (function(){
                const track = document.getElementById('financeHeroTrack');
                if (!track) return;

                const slides = Array.from(track.querySelectorAll('.hero-slide'));
                const dots   = Array.from(document.querySelectorAll('#financeHeroDots .hero-dot'));
                let current  = 0;
                let timer    = null;

                function showSlide(index){
                  slides.forEach((slide, i) => {
                    slide.classList.toggle('active', i === index);
                  });
                  dots.forEach((dot, i) => {
                    dot.classList.toggle('active', i === index);
                  });
                  current = index;
                }

                function nextSlide(){
                  const next = (current + 1) % slides.length;
                  showSlide(next);
                }

                function startAuto(){
                  stopAuto();
                  timer = setInterval(nextSlide, 4500);
                }

                function stopAuto(){
                  if (timer) {
                    clearInterval(timer);
                    timer = null;
                  }
                }

                dots.forEach((dot, index) => {
                  dot.addEventListener('click', function(){
                    showSlide(index);
                    startAuto();
                  });
                });

                track.addEventListener('mouseenter', stopAuto);
                track.addEventListener('mouseleave', startAuto);

                showSlide(0);
                startAuto();
              })();
            </script>
        <?php
    }
}

if (!function_exists('financial_page_end')) {
    function financial_page_end(): void
    {
        echo '</section></div></body></html>';
    }
}