<!DOCTYPE html>
<html lang="{$language|default:'en'}">
<head>
    <meta charset="{$charset}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nebulix | {$pagetitle}</title>

    <link href="{assetPath file='all.min.css'}?v={$versionHash}" rel="stylesheet">
    <link href="{assetPath file='theme.min.css'}?v={$versionHash}" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="{assetPath file='invoice.min.css'}?v={$versionHash}" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{$WEB_ROOT}/templates/{$template}/assets/css/custom.css?v=20260508-08" />
    
    <style>
        
        
        

:root {
  --invoice-card: rgba(255, 255, 255, 0.94);
  --invoice-card-soft: rgba(var(--brand-primary-rgb), 0.045);
  --invoice-border: rgba(var(--brand-primary-rgb), 0.16);
  --invoice-border-strong: rgba(var(--brand-primary-rgb), 0.26);
  --invoice-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
  --invoice-shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.055);
  --invoice-radius: 26px;
  --invoice-radius-sm: 16px;
}

body.invoice-dashboard-body {
  font-family: "Plus Jakarta Sans", "Cairo", sans-serif;
  background: var(--invoice-bg);
  color: var(--text-main);
  min-height: 100vh;
}

.invoice-dashboard {
  max-width: 1180px;
  margin: 0 auto;
  padding: 38px 22px 46px;
}

.dashboard-panel,
.dashboard-inline-alert,
.dashboard-invoice-payment-note {
  background: var(--invoice-card);
  border: 1px solid var(--invoice-border);
  border-radius: var(--invoice-radius);
  box-shadow: var(--invoice-shadow-soft);
}

.dashboard-inline-alert {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin-bottom: 22px;
}

.dashboard-inline-alert__icon,
.dashboard-invoice-hero__brand-icon,
.dashboard-invoice-status-card__icon,
.dashboard-invoice-overview__icon,
.dashboard-page-heading__icon,
.dashboard-invoice-payment-note__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: rgba(var(--brand-primary-rgb), 0.1);
  color: var(--brand-primary);
  font-size: 18px;
}

.dashboard-inline-alert__copy {
  flex: 1;
}

.dashboard-inline-alert__copy strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-primary);
  margin-bottom: 3px;
}

.dashboard-inline-alert__copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.dashboard-inline-alert__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dashboard-invoice-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  margin-bottom: 22px;
}

.dashboard-invoice-hero__main {
  position: relative;
  overflow: hidden;
  padding: 34px;
  min-height: 250px;
  background:
    radial-gradient(circle at 88% 10%, rgba(var(--brand-accent-rgb), 0.16), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, rgba(var(--brand-primary-rgb), 0.055) 100%);
}

.dashboard-invoice-hero__main:before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  bottom: -110px;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), 0.08);
}

.dashboard-invoice-hero__brand {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  z-index: 1;
}

.dashboard-invoice-hero__eyebrow {
  margin: 8px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
}

.dashboard-invoice-hero h1 {
  margin: 0;
  font-size: clamp(46px, 7vw, 76px);
  line-height: 0.95;
  font-weight: 800;
  color: var(--text-main);
}

.dashboard-invoice-hero__copy {
  position: relative;
  z-index: 1;
  margin-top: 34px;
}

.dashboard-invoice-hero__copy p {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.dashboard-invoice-status-card {
  padding: 28px;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(var(--brand-primary-rgb), 0.045) 100%);
}

.dashboard-invoice-status-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--invoice-border);
}

.dashboard-invoice-status-card__header strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  color: var(--brand-primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.dashboard-invoice-status-card__header span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.dashboard-invoice-status-card__details {
  margin-top: 20px;
  border: 1px solid var(--invoice-border);
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
}

.dashboard-invoice-status-card__details div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.dashboard-invoice-status-card__details div:last-child {
  border-bottom: 0;
}

.dashboard-invoice-status-card__details span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-invoice-status-card__details strong {
  color: var(--text-main);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.dashboard-invoice-overview {
  padding: 22px;
  margin-bottom: 22px;
}

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

.dashboard-invoice-overview__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  min-height: 150px;
  border: 1px solid var(--invoice-border);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(var(--brand-primary-rgb), 0.035) 100%);
}

.dashboard-invoice-overview__card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.2;
  color: var(--text-main);
  font-weight: 800;
}

.dashboard-invoice-overview__card p,
.dashboard-invoice-overview__card address,
.small-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.75;
  font-style: normal;
  font-weight: 500;
}

.dashboard-invoice-overview__badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--invoice-border-strong);
  background: rgba(var(--brand-primary-rgb), 0.06);
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 800;
}

.dashboard-invoice-block {
  padding: 24px;
  margin-bottom: 22px;
}

.dashboard-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dashboard-page-heading__title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.dashboard-panel__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  color: var(--text-main);
  font-weight: 800;
}

.dashboard-table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
}

.dashboard-table thead th {
  padding: 17px 18px;
  background: rgba(var(--brand-primary-rgb), 0.055);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 800;
  border: 0;
}

.dashboard-table tbody td {
  padding: 18px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  border-top: 1px solid var(--border-soft);
}

.dashboard-table tbody tr:hover td {
  background: rgba(var(--brand-primary-rgb), 0.025);
}

.dashboard-invoice-table__total td,
.dashboard-invoice-table__balance td {
  background: rgba(var(--brand-primary-rgb), 0.09) !important;
  color: var(--text-main);
  font-weight: 800;
}

.dashboard-invoice-table__total td:last-child,
.dashboard-invoice-table__balance td:last-child {
  color: var(--brand-primary);
  font-size: 15px;
}

.dashboard-invoice-tax-note {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.dashboard-invoice-payment-note {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  margin-bottom: 22px;
  background:
    radial-gradient(circle at 90% 50%, rgba(var(--brand-accent-rgb), 0.12), transparent 25%),
    rgba(var(--brand-primary-rgb), 0.07);
}

.dashboard-invoice-payment-note p {
  flex: 1;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}

.dashboard-invoice-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-invoice-actions__group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.invoice-dashboard .btn,
.invoice-dashboard button,
.invoice-dashboard input[type="submit"] {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
}

.invoice-dashboard .btn-primary,
.invoice-dashboard .btn-success,
.invoice-dashboard input[type="submit"] {
  border-color: transparent;
  background: var(--gradient-primary);
  color: #ffffff;
}

.invoice-dashboard .btn-primary:hover,
.invoice-dashboard .btn-success:hover,
.invoice-dashboard input[type="submit"]:hover {
  background: var(--gradient-primary-hover);
  color: #ffffff;
  transform: translateY(-1px);
}

.invoice-dashboard .btn-default,
.invoice-dashboard .btn-secondary {
  border: 1px solid var(--invoice-border-strong);
  background: #ffffff;
  color: var(--text-main);
}

.invoice-dashboard .btn-default:hover,
.invoice-dashboard .btn-secondary:hover {
  border-color: rgba(var(--brand-primary-rgb), 0.36);
  background: rgba(var(--brand-primary-rgb), 0.06);
  color: var(--brand-primary);
}

.invoice-dashboard select.custom-select,
.invoice-dashboard .form-control {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--invoice-border);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
}

.invoice-dashboard select.custom-select:focus,
.invoice-dashboard .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.12);
}

@media (max-width: 992px) {
  .dashboard-invoice-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-invoice-overview__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .invoice-dashboard {
    padding: 22px 12px 32px;
  }

  .dashboard-invoice-hero__main,
  .dashboard-invoice-status-card,
  .dashboard-invoice-block,
  .dashboard-invoice-overview {
    padding: 18px;
  }

  .dashboard-inline-alert,
  .dashboard-invoice-payment-note,
  .dashboard-invoice-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-invoice-actions__group {
    flex-direction: column;
  }

  .invoice-dashboard .btn {
    width: 100%;
  }
}

@media print {
  body.invoice-dashboard-body {
    background: #ffffff;
  }

  .invoice-dashboard {
    max-width: 100%;
    padding: 0;
  }

  .dashboard-panel,
  .dashboard-inline-alert,
  .dashboard-invoice-payment-note {
    box-shadow: none;
  }

  .d-print-none,
  .dashboard-inline-alert__action,
  .dashboard-invoice-payment-note__cta {
    display: none !important;
  }
}

body.invoice-dashboard-body {
  background:
    radial-gradient(circle at top left, rgba(91, 92, 246, 0.08), transparent 20%),
    linear-gradient(180deg, #f6f7ff 0%, #fbfbff 25%, #f6f7ff 100%) !important;
}

body.invoice-dashboard-body .invoice-dashboard {
  max-width: 1220px;
  padding: 1.85rem 1rem 3rem;
}

body.invoice-dashboard-body .dashboard-inline-alert,
body.invoice-dashboard-body .dashboard-invoice-hero__main,
body.invoice-dashboard-body .dashboard-invoice-status-card,
body.invoice-dashboard-body .dashboard-invoice-overview,
body.invoice-dashboard-body .dashboard-invoice-block,
body.invoice-dashboard-body .dashboard-invoice-credit,
body.invoice-dashboard-body .dashboard-invoice-payment-note {
  border: 1px solid rgba(219, 226, 252, 0.98) !important;
  border-radius: 1.85rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 14px 34px rgba(91, 92, 246, 0.06) !important;
}

body.invoice-dashboard-body .dashboard-inline-alert {
  min-height: 7.9rem;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,249,255,0.94)) !important;
}

body.invoice-dashboard-body .dashboard-inline-alert__icon,
body.invoice-dashboard-body .dashboard-invoice-hero__brand-icon,
body.invoice-dashboard-body .dashboard-invoice-status-card__icon,
body.invoice-dashboard-body .dashboard-invoice-overview__icon,
body.invoice-dashboard-body .dashboard-page-heading__icon,
body.invoice-dashboard-body .dashboard-invoice-payment-note__icon {
  width: 3.45rem;
  height: 3.45rem;
  min-width: 3.45rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(91, 92, 246, 0.12), rgba(125, 107, 255, 0.18)) !important;
  color: #4f47f8 !important;
  box-shadow: inset 0 0 0 1px rgba(201, 208, 255, 0.5);
}

body.invoice-dashboard-body .dashboard-inline-alert__copy strong {
  color: #3e54ff;
  font-size: 0.98rem;
}

body.invoice-dashboard-body .dashboard-inline-alert__copy p {
  color: #4d5d88;
  font-size: 0.92rem;
}

body.invoice-dashboard-body .dashboard-inline-alert__action .btn {
  min-width: 12.5rem;
}

body.invoice-dashboard-body .dashboard-invoice-hero {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

body.invoice-dashboard-body .dashboard-invoice-hero__main {
  min-height: 22rem;
  padding: 1.35rem 1.45rem 1.6rem;
  background:
    radial-gradient(circle at 90% 95%, rgba(91, 92, 246, 0.08), transparent 16%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,255,0.95)) !important;
}

body.invoice-dashboard-body .dashboard-invoice-hero__main:before {
  width: 230px;
  height: 230px;
  right: -88px;
  bottom: -112px;
  background: rgba(91, 92, 246, 0.08);
}

body.invoice-dashboard-body .dashboard-invoice-hero__brand {
  gap: 1rem;
  margin-bottom: 0;
}

body.invoice-dashboard-body .dashboard-invoice-hero__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  color: #7a86ad;
}

body.invoice-dashboard-body .dashboard-invoice-hero h1 {
  font-size: clamp(4rem, 7vw, 5.3rem);
  letter-spacing: -0.06em;
  color: #15203d !important;
}

body.invoice-dashboard-body .dashboard-invoice-hero__copy {
  margin-top: 1.6rem;
}

body.invoice-dashboard-body .dashboard-invoice-hero__copy p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #536391 !important;
}

body.invoice-dashboard-body .dashboard-invoice-status-card {
  padding: 1.6rem 1.45rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,255,0.96)) !important;
}

body.invoice-dashboard-body .dashboard-invoice-status-card__header {
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0 0 1.3rem;
  border-bottom: 1px solid rgba(230, 234, 251, 0.98);
}

body.invoice-dashboard-body .dashboard-invoice-status-card__header strong {
  font-size: 2rem;
  letter-spacing: -0.03em;
}

body.invoice-dashboard-body .dashboard-invoice-status-card__header span {
  font-size: 0.98rem;
  color: #c76710 !important;
}

body.invoice-dashboard-body .dashboard-invoice-status-card__body {
  padding: 1.35rem 0 0;
}

body.invoice-dashboard-body .dashboard-invoice-status-card__details {
  gap: 0;
  border: 1px solid rgba(228, 233, 251, 0.98);
  border-radius: 1.2rem;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
}

body.invoice-dashboard-body .dashboard-invoice-status-card__details div {
  padding: 1rem 1rem;
}

body.invoice-dashboard-body .dashboard-invoice-status-card__details div + div {
  padding-top: 1rem;
  border-top: 1px solid rgba(233, 237, 251, 0.98);
}

body.invoice-dashboard-body .dashboard-invoice-status-card--unpaid .dashboard-invoice-status-card__icon,
body.invoice-dashboard-body .dashboard-invoice-status-card--draft .dashboard-invoice-status-card__icon {
  background: linear-gradient(135deg, rgba(255, 166, 0, 0.16), rgba(255, 119, 0, 0.12)) !important;
  color: #c76710 !important;
}

body.invoice-dashboard-body .dashboard-invoice-status-card--unpaid .dashboard-invoice-status-card__header strong,
body.invoice-dashboard-body .dashboard-invoice-status-card--draft .dashboard-invoice-status-card__header strong {
  color: #c76710 !important;
}

body.invoice-dashboard-body .dashboard-invoice-overview {
  padding: 1rem;
  margin-bottom: 1.2rem;
}

body.invoice-dashboard-body .dashboard-invoice-overview__grid {
  gap: 0.9rem;
}

body.invoice-dashboard-body .dashboard-invoice-overview__card {
  min-height: 9.3rem;
  padding: 1.2rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(228, 233, 251, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,255,0.95)) !important;
}

body.invoice-dashboard-body .dashboard-invoice-overview__card strong {
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
}

body.invoice-dashboard-body .dashboard-invoice-overview__card p,
body.invoice-dashboard-body .dashboard-invoice-overview__card address,
body.invoice-dashboard-body .small-text {
  font-size: 0.92rem;
  color: #526287 !important;
  line-height: 1.7;
}

body.invoice-dashboard-body .dashboard-invoice-overview__badge {
  min-height: 2.55rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(223, 229, 250, 0.98);
  background: rgba(255,255,255,0.96);
  color: #17233f;
}

body.invoice-dashboard-body .dashboard-invoice-block,
body.invoice-dashboard-body .dashboard-invoice-credit {
  padding: 1rem;
  margin-bottom: 1.2rem;
}

body.invoice-dashboard-body .dashboard-panel__header {
  margin-bottom: 1rem;
}

body.invoice-dashboard-body .dashboard-panel__title {
  font-size: 1.02rem;
  color: #17233f;
}

body.invoice-dashboard-body .dashboard-table {
  border: 1px solid rgba(225, 231, 250, 0.98);
  border-radius: 1.25rem;
}

body.invoice-dashboard-body .dashboard-table thead th {
  padding: 1rem 1rem;
  background: rgba(243, 246, 255, 0.96) !important;
  color: #7b87ac !important;
  font-size: 0.8rem !important;
  border-bottom: 1px solid rgba(228, 233, 251, 0.98) !important;
}

body.invoice-dashboard-body .dashboard-table tbody td {
  padding: 1.15rem 1rem;
  color: #33415f;
  font-size: 0.92rem;
  border-top: 1px solid rgba(236, 240, 252, 0.98);
}

body.invoice-dashboard-body .dashboard-invoice-table__total td,
body.invoice-dashboard-body .dashboard-invoice-table__balance td {
  background: rgba(233, 241, 255, 0.92) !important;
}

body.invoice-dashboard-body .dashboard-invoice-table__total td:last-child,
body.invoice-dashboard-body .dashboard-invoice-table__balance td:last-child {
  color: #2f6dff;
  font-size: 1.5rem;
  font-weight: 800;
}

body.invoice-dashboard-body .dashboard-invoice-payment-note {
  min-height: 8rem;
  padding: 1.25rem 1.4rem;
  margin-top: 0.25rem;
  background:
    linear-gradient(180deg, rgba(246,248,255,0.98), rgba(255,255,255,0.98)) !important;
}

body.invoice-dashboard-body .dashboard-invoice-payment-note p {
  font-size: 0.96rem;
  color: #536391 !important;
}

body.invoice-dashboard-body .dashboard-invoice-actions {
  margin-top: 1.2rem;
}

body.invoice-dashboard-body .dashboard-invoice-actions .btn-default {
  min-width: 11.5rem;
  min-height: 3rem;
  border-radius: 1rem;
}

body.invoice-dashboard-body .dashboard-invoice-actions__group {
  gap: 0.75rem;
}

@media (max-width: 991.98px) {
  body.invoice-dashboard-body .dashboard-invoice-hero {
    grid-template-columns: 1fr;
  }

  body.invoice-dashboard-body .dashboard-invoice-overview__grid {
    grid-template-columns: 1fr;
  }
}


table.dataTable {
    
    border:0px!important;
    
} 
        
    </style>
    <script>
        (function () {
            var themeMap = {
                green: {
                    hue: "160",
                    sat: "84%",
                    primaryLightness: "32%",
                    primary: "#0d9766",
                    primaryRgb: "13, 151, 102",
                    accent: "#1bb79b",
                    accentRgb: "27, 183, 155",
                    gradient: "linear-gradient(135deg, #0d9766 0%, #1bb79b 100%)",
                    primaryHover: "#0c8e60",
                    primaryActive: "#096f4b",
                    hoverGradient: "linear-gradient(135deg, #0c8e60 0%, #19aa91 100%)"
                },
                blue: {
                    hue: "217",
                    sat: "92%",
                    primaryLightness: "53%",
                    primary: "#156cff",
                    primaryRgb: "21, 108, 255",
                    accent: "#00a3ff",
                    accentRgb: "0, 163, 255",
                    gradient: "linear-gradient(135deg, #156cff 0%, #00a3ff 100%)",
                    primaryHover: "#0f5ee4",
                    primaryActive: "#0a47b3",
                    hoverGradient: "linear-gradient(135deg, #0f5ee4 0%, #0092e6 100%)"
                },
                purple: {
                    hue: "267",
                    sat: "68%",
                    primaryLightness: "51%",
                    primary: "#6d2bd7",
                    primaryRgb: "109, 43, 215",
                    accent: "#b03ced",
                    accentRgb: "176, 60, 237",
                    gradient: "linear-gradient(135deg, #6d2bd7 0%, #b03ced 100%)",
                    primaryHover: "#5f24c3",
                    primaryActive: "#4f1ca7",
                    hoverGradient: "linear-gradient(135deg, #5f24c3 0%, #9d35e3 100%)"
                },
                red: {
                    hue: "349",
                    sat: "61%",
                    primaryLightness: "51%",
                    primary: "#cf334d",
                    primaryRgb: "207, 51, 77",
                    accent: "#f26b7a",
                    accentRgb: "242, 107, 122",
                    gradient: "linear-gradient(135deg, #cf334d 0%, #f26b7a 100%)",
                    primaryHover: "#b82d44",
                    primaryActive: "#962539",
                    hoverGradient: "linear-gradient(135deg, #b82d44 0%, #e75f70 100%)"
                },
                yellow: {
                    hue: "38",
                    sat: "82%",
                    primaryLightness: "40%",
                    primary: "#b87412",
                    primaryRgb: "184, 116, 18",
                    accent: "#e9a72f",
                    accentRgb: "233, 167, 47",
                    gradient: "linear-gradient(135deg, #b87412 0%, #e9a72f 100%)",
                    primaryHover: "#a5660f",
                    primaryActive: "#874f08",
                    hoverGradient: "linear-gradient(135deg, #a5660f 0%, #d99a29 100%)"
                },
                black: {
                    hue: "220",
                    sat: "22%",
                    primaryLightness: "13%",
                    primary: "#111827",
                    primaryRgb: "17, 24, 39",
                    accent: "#374151",
                    accentRgb: "55, 65, 81",
                    gradient: "linear-gradient(135deg, #111827 0%, #374151 100%)",
                    primaryHover: "#0b1220",
                    primaryActive: "#050a14",
                    hoverGradient: "linear-gradient(135deg, #0b1220 0%, #2f3947 100%)"
                }
            };
            var initialTheme = "blue";
            try {
                initialTheme = window.localStorage.getItem("hostique-theme") || window.localStorage.getItem("cloudhosting-theme") || initialTheme;
            } catch (e) {}
            var theme = themeMap[initialTheme] || themeMap.green;
            var root = document.documentElement;
            root.style.setProperty("--hue", theme.hue || "217");
            root.style.setProperty("--sat", theme.sat || "92%");
            root.style.setProperty("--primary-lightness", theme.primaryLightness || "53%");
            root.style.setProperty("--brand-primary", theme.primary);
            root.style.setProperty("--brand-primary-rgb", theme.primaryRgb);
            root.style.setProperty("--brand-primary-hover", theme.primaryHover || theme.primary);
            root.style.setProperty("--brand-primary-active", theme.primaryActive || theme.primaryHover || theme.primary);
            root.style.setProperty("--brand-accent", theme.accent);
            root.style.setProperty("--brand-accent-rgb", theme.accentRgb);
            root.style.setProperty("--primary", theme.primary);
            root.style.setProperty("--primary-rgb", theme.primaryRgb);
            root.style.setProperty("--accent", theme.accent);
            root.style.setProperty("--accent-rgb", theme.accentRgb);
            root.style.setProperty("--gradient-primary", theme.gradient);
            root.style.setProperty("--primary-hover", theme.primaryHover || theme.primary);
            root.style.setProperty("--gradient-primary-hover", theme.hoverGradient || theme.gradient);
            root.style.setProperty("--surface-page", "hsl(214, 100%, 98%)");
            root.style.setProperty("--surface-card", "#ffffff");
            root.style.setProperty("--surface-soft", "hsla(var(--hue), 58%, 97%, 1)");
            root.style.setProperty("--text-main", "hsl(220, 40%, 13%)");
            root.style.setProperty("--text-secondary", "hsl(218, 30%, 29%)");
            root.style.setProperty("--text-muted", "hsl(216, 16%, 46%)");
            root.style.setProperty("--border", "hsla(var(--hue), 36%, 86%, 1)");
            root.style.setProperty("--border-soft", "hsla(var(--hue), 28%, 92%, 1)");
            root.setAttribute("data-theme", initialTheme);
            document.addEventListener("DOMContentLoaded", function () {
                if (document.body) {
                    document.body.setAttribute("data-theme", initialTheme);
                }
            });
        })();
        var whmcsBaseUrl = "{$WEB_ROOT}";
    </script>
    <script src="{assetPath file='scripts.min.js'}?v={$versionHash}"></script>
</head>
<body class="whmcs-dashboard-body invoice-dashboard-body">

    <div class="container-fluid invoice-dashboard">

        {if $invalidInvoiceIdRequested}

            {include file="$template/includes/panel.tpl" type="danger" headerTitle="{lang key='error'}" bodyContent="{lang key='invoiceserror'}" bodyTextCenter=true}

        {else}

            {if $status eq "Unpaid" || $status eq "Draft"}
                <section class="dashboard-inline-alert dashboard-inline-alert--invoice">
                    <span class="dashboard-inline-alert__icon"><i class="fas fa-exclamation-triangle"></i></span>
                    <div class="dashboard-inline-alert__copy">
                        <strong>{lang key='invoicesunpaid'}</strong>
                        <p>{lang key='invoicesdatedue'}: {$datedue}</p>
                    </div>
                    <div class="dashboard-inline-alert__action">
                        {$paymentbutton}
                    </div>
                </section>
            {/if}

            <section class="dashboard-invoice-hero">
                <div class="dashboard-panel dashboard-invoice-hero__main">
                    <div class="dashboard-invoice-hero__brand">
                        <span class="dashboard-invoice-hero__brand-icon">
                            <i class="fas fa-file-invoice-dollar"></i>
                        </span>
                        <div>
                            <p class="dashboard-invoice-hero__eyebrow">{lang key='invoicenumber'|default:'#'}</p>
                            <h1>#{$invoiceid}</h1>
                        </div>
                    </div>
                    <div class="dashboard-invoice-hero__copy">
                        <p>{lang key='thankYou'|default:'Thank You'}</p>
                        <p>{lang key='invoicesdatedue'}: {$datedue}</p>
                    </div>
                </div>

                <aside class="dashboard-panel dashboard-invoice-status-card dashboard-invoice-status-card--{$status|lower|replace:' ':'-'}">
                    <div class="dashboard-invoice-status-card__header">
                        <span class="dashboard-invoice-status-card__icon">
                            <i class="fas fa-exclamation-circle"></i>
                        </span>
                        <div>
                            <strong>
                                {if $status eq "Draft"}
                                    {lang key='invoicesdraft'}
                                {elseif $status eq "Unpaid"}
                                    {lang key='invoicesunpaid'}
                                {elseif $status eq "Paid"}
                                    {lang key='invoicespaid'}
                                {elseif $status eq "Refunded"}
                                    {lang key='invoicesrefunded'}
                                {elseif $status eq "Cancelled"}
                                    {lang key='invoicescancelled'}
                                {elseif $status eq "Collections"}
                                    {lang key='invoicescollections'}
                                {elseif $status eq "Payment Pending"}
                                    {lang key='invoicesPaymentPending'}
                                {else}
                                    {$status}
                                {/if}
                            </strong>
                            <span>{lang key='invoicesdatedue'}: {$datedue}</span>
                        </div>
                    </div>
                    <div class="dashboard-invoice-status-card__body">
                        {if $status eq "Unpaid" || $status eq "Draft"}
                            <div class="dashboard-invoice-status-card__details">
                                <div><span>{lang key='invoicenumber'}</span><strong>#{$invoiceid}</strong></div>
                                <div><span>{lang key='invoicesdatedue'}</span><strong>{$datedue}</strong></div>
                                <div><span>{lang key='paymentmethod'}</span><strong>{$paymentmethod}</strong></div>
                            </div>
                        {/if}
                    </div>
                </aside>
            </section>

            {if $paymentSuccessAwaitingNotification}
                {include file="$template/includes/panel.tpl" type="success" headerTitle="{lang key='success'}" bodyContent="{lang key='invoicePaymentSuccessAwaitingNotify'}" bodyTextCenter=true}
            {elseif $paymentSuccess}
                {include file="$template/includes/panel.tpl" type="success" headerTitle="{lang key='success'}" bodyContent="{lang key='invoicepaymentsuccessconfirmation'}" bodyTextCenter=true}
            {elseif $paymentInititated}
                {include file="$template/includes/panel.tpl" type="info" headerTitle="{lang key='success'}" bodyContent="{lang key='invoicePaymentInitiated'}" bodyTextCenter=true}
            {elseif $pendingReview}
                {include file="$template/includes/panel.tpl" type="info" headerTitle="{lang key='success'}" bodyContent="{lang key='invoicepaymentpendingreview'}" bodyTextCenter=true}
            {elseif $paymentFailed}
                {include file="$template/includes/panel.tpl" type="danger" headerTitle="{lang key='error'}" bodyContent="{lang key='invoicepaymentfailedconfirmation'}" bodyTextCenter=true}
            {elseif $offlineReview}
                {include file="$template/includes/panel.tpl" type="info" headerTitle="{lang key='success'}" bodyContent="{lang key='invoiceofflinepaid'}" bodyTextCenter=true}
            {/if}

            <section class="dashboard-panel dashboard-invoice-overview">
                <div class="dashboard-invoice-overview__grid">
                    <div class="dashboard-invoice-overview__card">
                        <span class="dashboard-invoice-overview__icon"><i class="fas fa-user"></i></span>
                        <div>
                            <strong>{lang key='invoicesinvoicedto'}</strong>
                            <address class="small-text">
                                {if $clientsdetails.companyname}{$clientsdetails.companyname}<br />{/if}
                                {$clientsdetails.firstname} {$clientsdetails.lastname}<br />
                                {$clientsdetails.address1}, {$clientsdetails.address2}<br />
                                {$clientsdetails.city}, {$clientsdetails.state}, {$clientsdetails.postcode}<br />
                                {$clientsdetails.country}
                                {if $clientsdetails.tax_id}
                                    <br />{$taxIdLabel}: {$clientsdetails.tax_id}
                                {/if}
                            </address>
                        </div>
                    </div>
                    <div class="dashboard-invoice-overview__card">
                        <span class="dashboard-invoice-overview__icon"><i class="fas fa-university"></i></span>
                        <div>
                            <strong>{lang key='invoicespayto'}</strong>
                            <address class="small-text">
                                {$payto}
                                {if $taxCode}<br />{$taxIdLabel}: {$taxCode}{/if}
                            </address>
                        </div>
                    </div>
                    <div class="dashboard-invoice-overview__card">
                        <span class="dashboard-invoice-overview__icon"><i class="far fa-calendar-alt"></i></span>
                        <div>
                            <strong>{lang key='invoicesdatecreated'}</strong>
                            <p>{$date}</p>
                        </div>
                    </div>
                    <div class="dashboard-invoice-overview__card">
                        <span class="dashboard-invoice-overview__icon"><i class="far fa-credit-card"></i></span>
                        <div>
                            <strong>{lang key='paymentmethod'}</strong>
                            <div class="dashboard-invoice-overview__paymethod" data-role="paymethod-info">
                                {if $status eq "Unpaid" && $allowchangegateway}
                                    <form method="post" action="{$smarty.server.PHP_SELF}?id={$invoiceid}" class="form-inline">
                                        {$tokenInput}
                                        <select name="gateway" class="custom-select" onchange="submit()">
                                            {foreach $availableGateways as $gatewayModule => $gatewayName}
                                                <option value="{$gatewayModule}"{if $gatewayModule == $selectedGateway} selected="selected"{/if}>{$gatewayName}</option>
                                            {/foreach}
                                        </select>
                                    </form>
                                {else}
                                    <span class="dashboard-invoice-overview__badge">
                                        {$paymentmethod}{if $paymethoddisplayname} ({$paymethoddisplayname}){/if}
                                    </span>
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {if $manualapplycredit}
                <section class="dashboard-panel dashboard-invoice-credit">
                    <div class="dashboard-panel__header">
                        <div>
                            <h3 class="dashboard-panel__title">{lang key='invoiceaddcreditapply'}</h3>
                            <p class="dashboard-panel__copy">{lang key='invoiceaddcreditdesc1'} <strong>{$totalcredit}</strong>. {lang key='invoiceaddcreditdesc2'}</p>
                        </div>
                    </div>
                    <form method="post" action="{$smarty.server.PHP_SELF}?id={$invoiceid}" class="dashboard-invoice-credit__form">
                        <input type="hidden" name="applycredit" value="true" />
                        <div class="input-group">
                            <input type="text" name="creditamount" value="{$creditamount}" class="form-control" />
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-success" id="btnInvoiceAddCreditApply">{lang key='invoiceaddcreditapply'}</button>
                            </div>
                        </div>
                    </form>
                </section>
            {/if}

            {if $notes}
                {include file="$template/includes/panel.tpl" type="info" headerTitle="{lang key='invoicesnotes'}" bodyContent=$notes}
            {/if}

            <section class="dashboard-panel dashboard-invoice-block">
                <div class="dashboard-panel__header">
                    <div class="dashboard-page-heading__title dashboard-page-heading__title--compact">
                        <span class="dashboard-page-heading__icon dashboard-page-heading__icon--violet">
                            <i class="fas fa-shopping-cart"></i>
                        </span>
                        <div>
                            <h3 class="dashboard-panel__title">{lang key='invoicelineitems'}</h3>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm dashboard-table dashboard-invoice-table">
                        <thead>
                            <tr>
                                <th><strong>{lang key='invoicesdescription'}</strong></th>
                                <th width="20%" class="text-center"><strong>{lang key='invoicesamount'}</strong></th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $invoiceitems as $item}
                                <tr>
                                    <td>{$item.description}{if $item.taxed eq "true"} *{/if}</td>
                                    <td class="text-center">{$item.amount}</td>
                                </tr>
                            {/foreach}
                            <tr>
                                <td class="text-right"><strong>{lang key='invoicessubtotal'}</strong></td>
                                <td class="text-center">{$subtotal}</td>
                            </tr>
                            {if $taxname}
                                <tr>
                                    <td class="text-right"><strong>{$taxrate}% {$taxname}</strong></td>
                                    <td class="text-center">{$tax}</td>
                                </tr>
                            {/if}
                            {if $taxname2}
                                <tr>
                                    <td class="text-right"><strong>{$taxrate2}% {$taxname2}</strong></td>
                                    <td class="text-center">{$tax2}</td>
                                </tr>
                            {/if}
                            <tr>
                                <td class="text-right"><strong>{lang key='invoicescredit'}</strong></td>
                                <td class="text-center">{$credit}</td>
                            </tr>
                            <tr class="dashboard-invoice-table__total">
                                <td class="text-right"><strong>{lang key='invoicestotal'}</strong></td>
                                <td class="text-center">{$total}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                {if $taxrate}
                    <p class="dashboard-invoice-tax-note">* {lang key='invoicestaxindicator'}</p>
                {/if}
            </section>

            <section class="dashboard-panel dashboard-invoice-block">
                <div class="dashboard-panel__header">
                    <div class="dashboard-page-heading__title dashboard-page-heading__title--compact">
                        <span class="dashboard-page-heading__icon dashboard-page-heading__icon--blue">
                            <i class="fas fa-exchange-alt"></i>
                        </span>
                        <div>
                            <h3 class="dashboard-panel__title">{lang key='invoicestransactions'|default:'Transactions'}</h3>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm dashboard-table dashboard-invoice-table">
                        <thead>
                            <tr>
                                <th class="text-center"><strong>{lang key='invoicestransdate'}</strong></th>
                                <th class="text-center"><strong>{lang key='invoicestransgateway'}</strong></th>
                                <th class="text-center"><strong>{lang key='invoicestransid'}</strong></th>
                                <th class="text-center"><strong>{lang key='invoicestransamount'}</strong></th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $transactions as $transaction}
                                <tr>
                                    <td class="text-center">{$transaction.date}</td>
                                    <td class="text-center">{$transaction.gateway}</td>
                                    <td class="text-center">{$transaction.transid}</td>
                                    <td class="text-center">{$transaction.amount}</td>
                                </tr>
                            {foreachelse}
                                <tr>
                                    <td class="text-center" colspan="4">{lang key='invoicestransnonefound'}</td>
                                </tr>
                            {/foreach}
                            <tr class="dashboard-invoice-table__balance">
                                <td class="text-right" colspan="3"><strong>{lang key='invoicesbalance'}</strong></td>
                                <td class="text-center">{$balance}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="dashboard-invoice-payment-note">
                <span class="dashboard-invoice-payment-note__icon"><i class="fas fa-info-circle"></i></span>
                <p>Please complete payment by {$datedue} to keep your services active and uninterrupted.</p>
                {if $status eq "Unpaid" || $status eq "Draft"}
                    <div class="dashboard-invoice-payment-note__cta">{$paymentbutton}</div>
                {/if}
            </section>

            <div class="dashboard-invoice-actions d-print-none">
                <a href="clientarea.php?action=invoices" class="btn btn-default">{lang key='invoicesbacktoclientarea'}</a>
                <div class="dashboard-invoice-actions__group">
                    <a href="javascript:window.print()" class="btn btn-default"><i class="fas fa-print"></i> {$LANG.knowledgebaseprint|replace:' this Article':''}</a>
                    <a href="dl.php?type=i&amp;id={$invoiceid}" class="btn btn-default"><i class="fas fa-download"></i> {lang key='invoicesdownload'}</a>
                </div>
            </div>

        {/if}

    </div>

    <div id="fullpage-overlay" class="w-hidden">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <img src="{$WEB_ROOT}/assets/img/overlay-spinner.svg" alt="">
                <br>
                <span class="msg"></span>
            </div>
        </div>
        
    </div>
    
    


</body>
</html>
