<%
  // =====================================================
  // SAFE PAGE DATA
  // =====================================================

  const company =
    typeof companySettings !== "undefined" &&
    companySettings
      ? companySettings
      : {};

  const dashboardStats =
    typeof stats !== "undefined" &&
    stats
      ? stats
      : {};

  const loggedInUser =
    typeof currentUser !== "undefined" &&
    currentUser
      ? currentUser
      : null;

  const userIsAdmin =
    (
      typeof isAdmin !== "undefined" &&
      isAdmin === true
    ) ||
    (
      loggedInUser &&
      String(loggedInUser.role || "")
        .toLowerCase() === "admin"
    );

  const companyName =
    company.company_name ||
    "Company Management System";

  const companyAddress =
    company.address || "";

  const companyLogo =
    company.company_logo || "";

  const pageTitle =
    typeof title !== "undefined" &&
    title
      ? title
      : companyName + " | Dashboard";

  const displayMoney =
    typeof formatMoney === "function"
      ? formatMoney
      : function (value) {
          const convertedValue =
            Number(value);

          const safeValue =
            Number.isFinite(convertedValue)
              ? convertedValue
              : 0;

          const fallbackCurrency =
            company.currency_symbol ||
            company.currency_code ||
            "AFN";

          return (
            fallbackCurrency +
            " " +
            safeValue.toLocaleString(
              "en-US",
              {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
              }
            )
          );
        };
%>

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    <%= pageTitle %>
  </title>

  <link
    rel="stylesheet"
    href="/css/style.css"
  >

  <style>

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;

      background-color: #f1f5f9;

      font-family:
        Arial,
        Helvetica,
        sans-serif;
    }

    button,
    input {
      font-family: inherit;
    }

    /* ==================================================
       ACCOUNT BAR
    ================================================== */

    .account-bar {
      width: calc(100% - 40px);
      max-width: 1200px;

      margin: 20px auto;
      padding: 15px 20px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;

      background-color: #ffffff;

      border: 1px solid #e2e8f0;
      border-radius: 9px;

      box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.08);
    }

    .account-user {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .account-avatar {
      width: 44px;
      height: 44px;

      display: flex;
      align-items: center;
      justify-content: center;

      flex-shrink: 0;

      background-color: #dbeafe;
      color: #1d4ed8;

      border-radius: 50%;

      font-size: 17px;
      font-weight: 700;
    }

    .account-details {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .account-details strong {
      color: #0f172a;
      font-size: 15px;
    }

    .account-details span {
      color: #64748b;
      font-size: 13px;
    }

    .account-actions {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .change-password-button,
    .logout-button {
      min-height: 40px;
      padding: 0 15px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      border: none;
      border-radius: 6px;

      color: #ffffff;

      font-size: 14px;
      font-weight: 700;
      text-decoration: none;

      cursor: pointer;

      transition:
        background-color 0.2s,
        transform 0.1s;
    }

    .change-password-button {
      background-color: #2563eb;
    }

    .change-password-button:hover {
      background-color: #1d4ed8;
    }

    .logout-button {
      background-color: #dc2626;
    }

    .logout-button:hover {
      background-color: #b91c1c;
    }

    .change-password-button:active,
    .logout-button:active {
      transform: translateY(1px);
    }

    .logout-form {
      width: auto;
      margin: 0;
      padding: 0;

      display: inline-flex;

      background: none;
      border: none;
      box-shadow: none;
    }

    /* ==================================================
       DASHBOARD HEADER
    ================================================== */

    .dashboard-header {
      padding: 38px 20px;

      background:
        linear-gradient(
          135deg,
          #0f172a,
          #1e3a8a
        );

      color: #ffffff;
      text-align: center;
    }

    .company-branding {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      gap: 18px;
    }

    .company-logo-wrapper {
      width: 85px;
      height: 85px;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 7px;

      background-color: rgba(
        255,
        255,
        255,
        0.96
      );

      border: 1px solid rgba(
        255,
        255,
        255,
        0.4
      );

      border-radius: 13px;

      box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.18);
    }

    .company-logo {
      width: 100%;
      height: 100%;

      object-fit: contain;
    }

    .company-branding-text {
      text-align: left;
    }

    .dashboard-header h1 {
      margin: 0 0 10px;

      font-size: 35px;
      overflow-wrap: anywhere;
    }

    .dashboard-header p {
      margin: 0;

      color: #dbeafe;

      font-size: 16px;
      line-height: 1.6;
    }

    .company-address {
      margin-top: 5px !important;

      color: #bfdbfe !important;

      font-size: 14px !important;
    }

    /* ==================================================
       MAIN CONTAINER
    ================================================== */

    .dashboard-container {
      width: calc(100% - 40px);
      max-width: 1200px;

      margin: 30px auto 50px;
    }

    /* ==================================================
       DASHBOARD CARDS
    ================================================== */

    .dashboard-grid {
      display: grid;

      grid-template-columns:
        repeat(
          4,
          minmax(0, 1fr)
        );

      gap: 20px;
    }

    .dashboard-card {
      min-width: 0;
      min-height: 210px;

      padding: 25px;

      display: flex;
      flex-direction: column;

      background-color: #ffffff;
      color: #1f2937;

      border: 1px solid #e2e8f0;
      border-top: 5px solid #2563eb;
      border-radius: 10px;

      text-decoration: none;

      box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.08);

      transition:
        transform 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;
    }

    .dashboard-card:hover {
      transform: translateY(-4px);

      border-top-color: #1d4ed8;

      box-shadow:
        0 10px 25px
        rgba(15, 23, 42, 0.14);
    }

    .dashboard-card h2 {
      margin: 0 0 17px;

      color: #0f172a;

      font-size: 21px;
      line-height: 1.3;
    }

    .dashboard-number {
      margin-bottom: 17px;

      color: #2563eb;

      font-size: 29px;
      font-weight: 700;

      overflow-wrap: anywhere;
    }

    .dashboard-card p {
      margin: auto 0 0;

      color: #64748b;

      font-size: 14px;
      line-height: 1.7;
    }

    .dashboard-card p strong {
      color: #0f172a;
    }

    .settings-card {
      border-top-color: #0f766e;
    }

    .settings-card:hover {
      border-top-color: #115e59;
    }

    .settings-card .dashboard-number {
      color: #0f766e;
    }

    .users-card {
      border-top-color: #7c3aed;
    }

    .users-card:hover {
      border-top-color: #6d28d9;
    }

    .users-card .dashboard-number {
      color: #7c3aed;
    }


    .project-employees-card {
      border-top-color: #0891b2;
    }

    .project-employees-card:hover {
      border-top-color: #0e7490;
    }

    .project-employees-card .dashboard-number {
      color: #0891b2;
    }

    .project-items-card {
      border-top-color: #f59e0b;
    }

    .project-items-card:hover {
      border-top-color: #d97706;
    }

    .project-items-card .dashboard-number {
      color: #d97706;
    }

    .fund-transfers-card {
      border-top-color: #16a34a;
    }

    .fund-transfers-card:hover {
      border-top-color: #15803d;
    }

    .fund-transfers-card .dashboard-number {
      color: #16a34a;
    }

    .ledger-card {
      border-top-color: #9333ea;
    }

    .ledger-card:hover {
      border-top-color: #7e22ce;
    }

    .ledger-card .dashboard-number {
      color: #9333ea;
    }

    .excel-backup-card {
      border-top-color: #059669;
    }

    .excel-backup-card:hover {
      border-top-color: #047857;
    }

    .excel-backup-card .dashboard-number {
      color: #059669;
    }

    /* ==================================================
       FINANCE OVERVIEW
    ================================================== */

    .finance-overview {
      margin-top: 32px;
      padding: 27px;

      background-color: #ffffff;

      border: 1px solid #e2e8f0;
      border-radius: 11px;

      box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.08);
    }

    .finance-overview h2 {
      margin: 0 0 22px;

      color: #0f172a;

      font-size: 24px;
    }

    .finance-grid {
      display: grid;

      grid-template-columns:
        repeat(
          3,
          minmax(0, 1fr)
        );

      gap: 18px;
    }

    .finance-card {
      min-width: 0;

      padding: 21px;

      background-color: #f8fafc;

      border-left: 5px solid #2563eb;
      border-radius: 8px;
    }

    .finance-card span {
      display: block;
      margin-bottom: 11px;

      color: #64748b;

      font-size: 14px;
      font-weight: 600;
    }

    .finance-card strong {
      display: block;

      color: #0f172a;

      font-size: 20px;

      overflow-wrap: anywhere;
    }

    .profit-value {
      color: #15803d !important;
    }

    .loss-value {
      color: #dc2626 !important;
    }

    /* ==================================================
       RESPONSIVE DESIGN
    ================================================== */

    @media (max-width: 1050px) {
      .dashboard-grid {
        grid-template-columns:
          repeat(
            2,
            minmax(0, 1fr)
          );
      }
    }

    @media (max-width: 800px) {
      .finance-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .account-bar {
        align-items: stretch;
        flex-direction: column;
      }

      .account-actions {
        width: 100%;
      }

      .change-password-button,
      .logout-form,
      .logout-button {
        flex: 1;
        width: 100%;
      }

      .dashboard-header {
        padding: 30px 15px;
      }

      .company-branding {
        flex-direction: column;
      }

      .company-branding-text {
        text-align: center;
      }

      .company-logo-wrapper {
        width: 75px;
        height: 75px;
      }

      .dashboard-header h1 {
        font-size: 27px;
      }

      .dashboard-container {
        width: calc(100% - 24px);
        margin: 22px auto;
      }

      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .dashboard-card {
        min-height: 190px;
      }

      .finance-overview {
        padding: 21px;
      }
    }

  </style>

</head>

<body>

  <!-- ==================================================
       ACCOUNT INFORMATION
  =================================================== -->

  <div class="account-bar">

    <div class="account-user">

      <div class="account-avatar">

        <%=
          loggedInUser &&
          loggedInUser.full_name
            ? loggedInUser.full_name
                .charAt(0)
                .toUpperCase()
            : "U"
        %>

      </div>

      <div class="account-details">

        <strong>
          <%=
            loggedInUser
              ? loggedInUser.full_name
              : "System User"
          %>
        </strong>

        <span>
          <%=
            loggedInUser
              ? loggedInUser.role
              : "User"
          %>
        </span>

      </div>

    </div>

    <div class="account-actions">

      <a
        href="/account/change-password"
        class="change-password-button"
      >
        Change Password
      </a>

      <form
        action="/logout"
        method="POST"
        class="logout-form"
        onsubmit="
          return confirm(
            'Are you sure you want to log out?'
          );
        "
      >

        <button
          type="submit"
          class="logout-button"
        >
          Logout
        </button>

      </form>

    </div>

  </div>

  <!-- ==================================================
       COMPANY HEADER
  =================================================== -->

  <header class="dashboard-header">

    <div class="company-branding">

      <% if (companyLogo) { %>

        <div class="company-logo-wrapper">

          <img
            src="<%= companyLogo %>"
            alt="<%= companyName %> logo"
            class="company-logo"
          >

        </div>

      <% } %>

      <div class="company-branding-text">

        <h1>
          <%= companyName %>
        </h1>

        <p>
          Manage your company from one place
        </p>

        <% if (companyAddress) { %>

          <p class="company-address">
            <%= companyAddress %>
          </p>

        <% } %>

      </div>

    </div>

  </header>

  <!-- ==================================================
       DASHBOARD CONTENT
  =================================================== -->

  <main class="dashboard-container">

    <section class="dashboard-grid">

      <!-- ==============================================
           ADMIN: USERS
      =============================================== -->

      <% if (userIsAdmin) { %>

        <a
          href="/users"
          class="dashboard-card users-card"
        >

          <h2>
            Users
          </h2>

          <div class="dashboard-number">
            Security
          </div>

          <p>
            Create and manage system user
            accounts and permission roles.
          </p>

        </a>

      <% } %>

      <!-- ==============================================
           EMPLOYEES
      =============================================== -->

      <a
        href="/employees"
        class="dashboard-card"
      >

        <h2>
          Employees
        </h2>

        <div class="dashboard-number">
          <%= dashboardStats.total_employees || 0 %>
        </div>

        <p>
          Add, view, edit and manage
          company employees.
        </p>

      </a>

      <!-- ==============================================
           DEPARTMENTS
      =============================================== -->

      <a
        href="/departments"
        class="dashboard-card"
      >

        <h2>
          Departments
        </h2>

        <div class="dashboard-number">
          <%= dashboardStats.total_departments || 0 %>
        </div>

        <p>
          Add and manage company departments.
        </p>

      </a>

      <!-- ==============================================
           ATTENDANCE
      =============================================== -->

      <a
        href="/attendance"
        class="dashboard-card"
      >

        <h2>
          Attendance
        </h2>

        <div class="dashboard-number">
          <%= dashboardStats.total_attendance || 0 %>
        </div>

        <p>
          Add and view employee
          attendance records.
        </p>

      </a>

      <!-- ==============================================
           SALARIES
      =============================================== -->

      <a
        href="/salaries"
        class="dashboard-card"
      >

        <h2>
          Salaries
        </h2>

        <div class="dashboard-number">
          <%= dashboardStats.total_salary_records || 0 %>
        </div>

        <p>
          Total payroll:

          <strong>
            <%=
              displayMoney(
                dashboardStats.total_payroll || 0
              )
            %>
          </strong>
        </p>

      </a>

      <!-- ==============================================
           PROJECTS
      =============================================== -->

      <a
        href="/projects"
        class="dashboard-card"
      >

        <h2>
          Projects
        </h2>

        <div class="dashboard-number">
          <%= dashboardStats.total_projects || 0 %>
        </div>

        <p>
          Manage projects and
          financial summaries.
        </p>

      </a>

      <!-- ==============================================
           PROJECT EMPLOYEES
      =============================================== -->

<a
  href="/employee-projects"
  class="dashboard-card project-employees-card"
>
  <h2>
    Project Employees
  </h2>

  <div class="dashboard-number">
    Teams
  </div>

  <p>
    Assign employees to projects and manage
    project teams and roles.
  </p>
</a>
      

      <!-- ==============================================
           PROJECT ITEMS
      =============================================== -->

      <a
        href="/project-items"
        class="dashboard-card project-items-card"
      >

        <h2>
          Project Items
        </h2>

        <div class="dashboard-number">
          Inventory
        </div>

        <p>
          Manage kitchen items, furniture,
          equipment, tools and other project assets.
        </p>

      </a>

      <!-- ==============================================
           PROJECT PAYMENTS
      =============================================== -->

      <a
        href="/project-payments"
        class="dashboard-card"
      >

        <h2>
          Project Payments
        </h2>

        <div class="dashboard-number">
          Payments
        </div>

        <p>
          Record advance, progress,
          final and retention payments.
        </p>

      </a>

      <!-- ==============================================
           FUND TRANSFERS
      =============================================== -->

      <a
        href="/fund-transfers"
        class="dashboard-card fund-transfers-card"
      >

        <h2>
          Fund Transfers
        </h2>

        <div class="dashboard-number">
          Transfers
        </div>

        <p>
          Transfer funds between company accounts
          and view the complete transfer history.
        </p>

      </a>

      <!-- ==============================================
           GENERAL LEDGER
      =============================================== -->

      <a
        href="/ledger"
        class="dashboard-card ledger-card"
      >

        <h2>
          General Ledger
        </h2>

        <div class="dashboard-number">
          Ledger
        </div>

        <p>
          View accounts, debit, credit,
          balances and create journal entries.
        </p>

      </a>

      <!-- ==============================================
           PROJECT EXPENSES
      =============================================== -->

      <a
        href="/expenses"
        class="dashboard-card"
      >

        <h2>
          Project Expenses
        </h2>

        <div class="dashboard-number">
          <%= dashboardStats.total_expense_records || 0 %>
        </div>

        <p>
          Add, edit and manage
          project expenses.
        </p>

      </a>

      <!-- ==============================================
           EXPENSE CATEGORIES
      =============================================== -->

      <a
        href="/expense-categories"
        class="dashboard-card"
      >

        <h2>
          Expense Categories
        </h2>

        <div class="dashboard-number">
          Categories
        </div>

        <p>
          Manage Cement, Steel, Labor,
          Diesel and other categories.
        </p>

      </a>

      <!-- ==============================================
           FINANCE REPORTS
      =============================================== -->



      
      <a
        href="/reports/project-finance"
        class="dashboard-card"
      >

        <h2>
          Finance Reports
        </h2>

        <div class="dashboard-number">
          Report
        </div>

        <p>
          Filter project expenses by project,
          category, location and date.
        </p>

      </a>

      <!-- ==============================================
           ADMIN: COMPANY SETTINGS
      =============================================== -->

      <% if (userIsAdmin) { %>

        <a
          href="/settings"
          class="dashboard-card settings-card"
        >

          <h2>
            ⚙ Company Settings
          </h2>

          <div class="dashboard-number">
            Settings
          </div>

          <p>
            Manage company information,
            logo, currency, working hours
            and report details.
          </p>

        </a>

      <% } %>

      <!-- ==============================================
           ADMIN: EXCEL BACKUP
      =============================================== -->

      <% if (userIsAdmin) { %>

        <a
          href="/admin/backups/excel"
          class="dashboard-card excel-backup-card"
        >

          <h2>
            Excel Backup
          </h2>

          <div class="dashboard-number">
            Download
          </div>

          <p>
            Download a complete Excel backup of
            company records and financial data.
          </p>

        </a>

      <% } %>

    </section>
    

    <!-- ==================================================
         PROJECT FINANCE OVERVIEW
    =================================================== -->

    <section class="finance-overview">

      <h2>
        Project Finance Overview
      </h2>

      <div class="finance-grid">

        <!-- TOTAL AWARDED AMOUNT -->

        <div class="finance-card">

          <span>
            Total Awarded Amount
          </span>

          <strong>
            <%=
              displayMoney(
                dashboardStats.total_awarded_amount || 0
              )
            %>
          </strong>

        </div>

        <!-- TOTAL PROJECT EXPENSES -->

        <div class="finance-card">

          <span>
            Total Project Expenses
          </span>

          <strong>
            <%=
              displayMoney(
                dashboardStats.total_project_expenses || 0
              )
            %>
          </strong>

        </div>

        <!-- REMAINING PROJECT BALANCE -->

        <div class="finance-card">

          <span>
            Remaining Project Balance
          </span>

          <strong
            class="
              <%=
                Number(
                  dashboardStats.total_project_balance || 0
                ) >= 0
                  ? "profit-value"
                  : "loss-value"
              %>
            "
          >
            <%=
              displayMoney(
                dashboardStats.total_project_balance || 0
              )
            %>
          </strong>

        </div>

      </div>

    </section>

  </main>

</body>

</html>
